JavaScript六种继承方式总结大全

javascript

// 父类
function Parent() {
    this.name = 'Parent';
    this.colors = ['red', 'blue'];
}
Parent.prototype.sayName = function() {
    console.log(this.name);
};

// 子类
function Child() {
    this.type = 'Child';
}

// 关键！将Child的原型指向Parent的实例，建立原型链
Child.prototype = new Parent();

var child1 = new Child();
child1.sayName(); // 'Parent' (来自原型链)
console.log(child1.colors); // ['red', 'blue'] (来自原型链)

var child2 = new Child();
child1.colors.push('green'); // 修改child1的colors
console.log(child2.colors); // ['red', 'blue', 'green'] (问题出现了！)

javascript

// 父类
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
}
// 注意：父类原型上的方法子类访问不到
Parent.prototype.sayName = function() {
    console.log(this.name);
};

// 子类
function Child(name, type) {
    // 关键！“借用”父类的构造函数来初始化属性
    Parent.call(this, name); // 相当于执行了 this.name = name; this.colors = ['red', 'blue'];
    this.type = type;
}

var child1 = new Child('小明', 'Child');
var child2 = new Child('小红', 'Child');

child1.colors.push('green');
console.log(child1.colors); // ['red', 'blue', 'green']
console.log(child2.colors); // ['red', 'blue'] (互不影响了！)
console.log(child1.sayName); // undefined (无法继承父类原型的方法)

javascript

// 父类
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
}
Parent.prototype.sayName = function() {
    console.log(this.name);
};

// 子类
function Child(name, type) {
    // 1. 继承属性
    Parent.call(this, name); // 第二次调用 Parent()
    this.type = type;
}

// 2. 继承方法
Child.prototype = new Parent(); // 第一次调用 Parent()
// 修复构造函数指向，否则Child实例的constructor会指向Parent
Child.prototype.constructor = Child;
// 子类自己的方法
Child.prototype.sayType = function() {
    console.log(this.type);
};

var child1 = new Child('小明', 'Child1');
child1.colors.push('green');
console.log(child1.colors); // ['red', 'blue', 'green']
child1.sayName(); // '小明'
child1.sayType(); // 'Child1'

var child2 = new Child('小红', 'Child2');
console.log(child2.colors); // ['red', 'blue'] (属性不共享)
child2.sayName(); // '小红' (方法可复用)

javascript

// object() 就是 ES5 中 Object.create() 的模拟实现
function object(o) {
    function F() {} // 创建一个临时构造函数
    F.prototype = o; // 将其原型指向传入的对象o
    return new F(); // 返回这个临时构造函数的实例
}

var person = {
    name: 'Nicholas',
    friends: ['Shelby', 'Court']
};

var person1 = object(person);
person1.name = 'Greg';
person1.friends.push('Rob');

var person2 = object(person);
person2.name = 'Linda';
person2.friends.push('Barbie');

console.log(person.friends); // ['Shelby', 'Court', 'Rob', 'Barbie'] (共享问题依然存在)

javascript

function createAnother(original) {
    var clone = object(original); // 1. 通过调用函数（如object）创建一个新对象（原型式继承）
    clone.sayHi = function() {    // 2. 以某种方式来增强这个对象
        console.log('hi');
    };
    return clone; // 3. 返回这个对象
}

var person = {
    name: 'Nicholas',
    friends: ['Shelby', 'Court']
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // 'hi'

javascript

function inheritPrototype(child, parent) {
    // 1. 创建父类原型的一个副本（原型式继承）
    var prototype = Object.create(parent.prototype);
    // 2. 修复副本的constructor指针
    prototype.constructor = child;
    // 3. 将子类的原型指向这个副本
    child.prototype = prototype;
}

// 父类
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
}
Parent.prototype.sayName = function() {
    console.log(this.name);
};

// 子类
function Child(name, type) {
    // 只调用一次父类构造函数（继承属性）
    Parent.call(this, name);
    this.type = type;
}

// 关键！替换掉组合继承中的 `Child.prototype = new Parent()`
inheritPrototype(Child, Parent);

// 添加子类自己的方法
Child.prototype.sayType = function() {
    console.log(this.type);
};

var child1 = new Child('小明', 'Child1');
// 实例的 __proto__ 指向 Child.prototype
// Child.prototype 的 __proto__ 指向 Parent.prototype
// 完美！

javascript

function inheritPrototype(child, parent) {
    // 第一步：创建原型副本（核心）
    var prototype = Object.create(parent.prototype);
    // 第二步：修复constructor指向
    prototype.constructor = child;
    // 第三步：将子类的原型指向这个新创建的对象
    child.prototype = prototype;
}

javascript

// ES6 的写法，底层是寄生组合式继承
class Parent {
    constructor(name) {
        this.name = name;
        this.colors = ['red', 'blue'];
    }
    sayName() {
        console.log(this.name);
    }
}

class Child extends Parent {
    constructor(name, type) {
        super(name); // 相当于 Parent.call(this, name)
        this.type = type;
    }
    sayType() {
        console.log(this.type);
    }
}