首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES5中的对象冒充继承与原型继承

ES5中的对象冒充继承与原型继承

作者头像
越陌度阡
发布2020-11-26 14:52:58
4400
发布2020-11-26 14:52:58
举报

1. 最简单的类,构造函数

function Person(name, age) {
    this.name = name;
    this.age = age;
};
// 实例化一个方法
var p = new Person('Augus', 18);
console.log(`${p.name}--${p.age}`);
// Augus--18

2. 构造函数和原型链里面增加方法

// 构造函数上面的属性值不会被多个实例共享
function Person(name, age) {
    // 定义属性
    this.name = name;
    this.age = age;
    // 定义方法
    this.say = function () {
        console.log('My name is ' + name);
    }
};

// 原型链上的面的属性和方法会被多个实例共享
Person.prototype.sex = '男';
Person.prototype.run = function () {
    console.log('I am running');
};
// 实例化
var p = new Person('Augus', 20);

console.log(p.name);
// Augus
console.log(p.age);
// 20
p.say();
// My name is Augus

console.log(p.sex);
// 男
p.run();
// I am running

3. 类里面的静态方法

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log('Hello world');
    }
};
Person.sex = '男';
Person.getInfo = function () {
    console.log('我是一个静态方法');
};

// 调用静态方法
console.log(Person.sex);
// 男
Person.getInfo();
// 我是一个静态方法

4. ES5里面的继承,对象冒充实现继承

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log('My name is ' + name);
    }
};
Person.prototype.sex = '男';
Person.prototype.getInfo = function () {
    console.log('这是原型链上的一个方法');
};

// 定义一个新的方法
function Web() {
    // 对象冒充继承
    Person.call(this, 'Augus', 18);
};

// 对象冒充可以继承构造函数里面的属性和方法
var web = new Web();
console.log(web.name);
// Augus
console.log(web.age);
// 18
web.say();
// My name is Augus


// 对象冒充没法继承原型链上的属性和方法。
console.log(web.sex);
// undefined
web.getInfo();
// 报错 web.getInfo is not a function

5. ES5里原型链的继承,既可以实现构造函数的继承又可以实现原型链的继承

function Person() {
    this.name = 'Augus';
    this.age = 20;
    this.say = function () {
        console.log('My name is Augus');
    }
};

Person.prototype.sex = '男';
Person.prototype.getInfo = function () {
    console.log('这是原型链上的一个方法');
};
function Web() {


};
// 原型链实现继承
Web.prototype = new Person();

// 可以继承构造函数里面的属性和方法
// 也可以继承原型链上面的属性和方法。
var web = new Web();

console.log(web.name);
// Augus
console.log(web.age);
// 20
web.say();
// My name is Augus
console.log(web.sex);
// 男
web.getInfo();
// 这是原型链上的一个方法

6. ES5中,原型链继承存在的问题,实例化子类没法给父类传值

function Person(name, age) {
    this.name = name;
    this.age = age
    this.say = function () {
        console.log('My name is ' + name);
    }
};
Person.prototype.sex = '男';
Person.prototype.getInfo = function () {
    console.log('这是原型链上的一个方法');
};

var p = new Person('Augus', 20);

console.log(p.name);
// Augus
console.log(p.age);
// 20
// 可以传参


function Web(name, age) {

};
Web.prototype = new Person();

var web = new Web('Jack', 20);
console.log(web.name);
// undefined
console.log(web.age);
// undefined
// 实例化的子类没法给父类传值

7. 原型链+构造函数的组合继承模式,可以实例化子类向父类传值

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log('My name is ' + name);
    }
};
Person.prototype.sex = '男';
Person.prototype.getInfo = function () {
    console.log(this.name + '这是原型链里的方法');
};
function Web(name, age) {
    // 对象冒充继承,可以继承构造函数里面的属性和方法,实例化子类可以给父类传值
    Person.call(this, name, age);
};
Web.prototype = new Person();
var web = new Web('Augus', 20);

console.log(web.name);
// Augus
console.log(web.age);
// 20
web.say();
// My name is Augus
web.getInfo();
// Augus 这是原型链里的方法

8. 原型链+构造函数的组合继承模式的另一种写法

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log('My name is ' + name);
    }
};
Person.prototype.sex = '男';
Person.prototype.getInfo = function () {
    console.log(this.name + '这是原型链里的方法');
};

function Web(name, age) {
    Person.call(this, name, age);
};
Web.prototype = Person.prototype;
var web = new Web('Augus', 20);

console.log(web.name);
// Augus
console.log(web.age);
// 20
web.say();
// My name is Augus
web.getInfo();
// Augus 这是原型链里的方法
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-09-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档