JavaScript高级程序设计 阅读笔记（十四） js继承机制的实现

JavaScript高级程序设计 阅读笔记（十四）讲解了JavaScript中的继承机制以及其实现方式。下面是我总结的一个完整攻略：

继承机制的本质

JavaScript采用原型（prototype）继承机制。当访问一个对象的属性时，JavaScript引擎会首先查找该对象自身是否有这个属性。如果存在，则直接返回该属性值；如果不存在，则继续查找该对象的原型对象（即__proto__属性指向的对象）是否有该属性。如果原型对象中不存在该属性，则继续查找其原型对象的原型对象，直到达到原型链的顶端为止。

因此，通过将属性或方法定义在原型对象中，可以让子对象共享这些属性或方法。而通过在子类的构造函数中调用父类的构造函数，可以实现继承父类的实例属性。

继承的实现方式

JavaScript实现继承的方式有很多，以下是其中几种：

类式继承

通过定义一个父类（通常称为超类或基类）的构造函数，再定义一个子类（通常称为派生类或子类）的构造函数，使子类的原型对象指向父类的实例，从而实现继承。

// 定义父类
function SuperClass() {
    this.superValue = true;
}

// 父类原型中定义方法
SuperClass.prototype.getSuperValue = function() {
    return this.superValue;
}

// 定义子类
function SubClass() {
    this.subValue = false;
}

// 将子类的原型对象指向父类的实例
SubClass.prototype = new SuperClass();

// 子类原型中定义方法
SubClass.prototype.getSubValue = function() {
    return this.subValue;
}

// 创建子类实例
var subObj = new SubClass();
console.log(subObj.getSuperValue()); // true
console.log(subObj.getSubValue()); // false

构造函数继承

通过在子类的构造函数中调用父类的构造函数，实现继承父类的实例属性。

// 定义父类
function SuperClass(name) {
    this.name = name;
}

// 定义子类
function SubClass(name, age) {
    // 调用父类的构造函数，继承父类的实例属性
    SuperClass.call(this, name);
    this.age = age;
}

// 创建子类实例
var subObj = new SubClass('Alice', 18);
console.log(subObj.name); // 'Alice'
console.log(subObj.age); // 18

组合继承

通过将类式继承和构造函数继承结合起来，既继承了父类的实例属性，又继承了父类原型中的属性和方法。

// 定义父类
function SuperClass(name) {
    this.name = name;
}

// 父类原型中定义方法
SuperClass.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
}

// 定义子类
function SubClass(name, age) {
    // 调用父类的构造函数，继承父类的实例属性
    SuperClass.call(this, name);
    this.age = age;
}

// 将子类的原型对象指向父类的实例，继承父类原型中的属性和方法
SubClass.prototype = new SuperClass();

// 子类原型中定义方法
SubClass.prototype.sayAge = function() {
    console.log('I am ' + this.age + ' years old');
}

// 创建子类实例
var subObj = new SubClass('Alice', 18);
subObj.sayHello(); // 'Hello, Alice'
subObj.sayAge(); // 'I am 18 years old'

以上是三种常见的继承实现方式，它们各有优缺点，在实际应用中应该根据具体情况选择合适的继承方式。