javascript 原型链怎么实现继承

JavaScript中的原型链实现继承主要依赖于原型和构造函数的概念。具体来说，JavaScript 的原型继承是通过给对象的原型属性 __proto__ 赋值或者使用函数的 prototype 属性来实现的、通过这种机制子类型的实例可以访问到父类型原型上的属性和方法。原型链继承的核心在于利用原型让一个引用类型继承另一个引用类型的属性和方法。

一、理解原型和原型链

在JavaScript中，每个函数在创建后自动获得一个prototype属性，指向一个对象，而这个对象包含可以由特定类型的所有实例共享的属性和方法。当我们创建一个函数实例时，该实例内部将包含一个指向构造函数原型对象的内部指针。

当尝试访问对象的属性时，如果在该对象上找不到，则会沿着原型链向上搜索。这种连接各个原型的链就称作原型链。原型链的终点是Object.prototype。当原型链中任何对象都没有找到相应的属性，则返回undefined。

二、实现原型链继承的方法

为了实现原型链继承，可以通过将子类型的原型赋值为父类型的一个实例。这样，子类型的实例既是子类型的实例，也是父类型的实例，因此可以访问父类型原型上的属性和方法。

为了实现继承，首先定义一个构造函数，然后定义该构造函数的原型和方法。子构造函数的原型将被赋值为父构造函数的实例。

function Parent() {
    this.parentProperty = true;
}
Parent.prototype.getParentValue = function() {
    return this.parentProperty;
};
function Child() {
    this.childProperty = false;
}
// 继承自Parent
Child.prototype = new Parent();
Child.prototype.getChildValue = function() {
    return this.childProperty;
};
var childInstance = new Child();
console.log(childInstance.getParentValue()); // 输出 true

在这个示例中，Child的原型被设置为Parent的一个实例。这意味着所有由Child创建的实例都会继承Parent的属性和方法。

三、原型链继承的问题

尽管原型链是实现继承的基础，但它并非没有问题。一个主要问题是原型中包含的引用值会被所有实例共享，这意味着一个实例更改了原型上的引用类型，其他所有实例都会受到影响。

四、使用寄生组合式继承优化

为了解决原型链继承的问题，可以使用寄生组合式继承。这是一种更高效和推荐的继承模式，因为它只调用了一次父构造函数，并且因此避免了在子类型的原型上创建不必要、多余的属性。

function inheritPrototype(child, parent){
    var prototype = Object.create(parent.prototype); // 创建对象
    prototype.constructor = child;                  // 增强对象
    child.prototype = prototype;                    // 指定对象
}
function Parent(name){
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.sayName = function() {
    console.log(this.name);
};
function Child(name, age){
    Parent.call(this, name); // 继承实例属性，第一次调用Parent()
    this.age = age;
}
inheritPrototype(Child, Parent); // 继承父类方法
Child.prototype.sayAge = function() {
    console.log(this.age);
};
var child1 = new Child("Nicholas", 18);
child1.colors.push('black');
console.log(child1.colors); // "red,blue,green,black"
child1.sayName(); // "Nicholas"
child1.sayAge(); // 18
var child2 = new Child("Greg", 22);
console.log(child2.colors); // "red,blue,green"
child2.sayName(); // "Greg"
child2.sayAge(); // 22

五、类（ES6）的实现继承

ECMAScript 6引入了类（Class）语法使得继承在写法上更接近于传统面向对象语言。class关键字简化了继承的实现，背后仍然是原型链的工作机制。

class Parent {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name); // 调用父类的constructor(name)
        this.age = age;
    }
    sayAge() {
        console.log(this.age);
    }
}
const child = new Child('John', 25);
child.sayName(); // John
child.sayAge(); // 25