浅谈JavaScript原型、原型链的概念与继承的实现原理

一. 构造函数

说到原型，就不得不提到构造函数。什么是构造函数呢，简单来讲，它是一种用来创建对象的函数。在典型的 OOP 的语言中（如 Java），都存在类的概念，类是对象的模板，对象是类的实例，但在 ES6之前， JS中并没用引入类的概念。因此对象也不是由类来创建的，而是用一种称为构造函数的特殊函数来定义对象和它们的特征。构造函数一般首字母大写，且要和 new 关键字一起使用才有意义，下面是一个简单例子

function Person(name,age){
    this.name = name
    this.age = age
    this.say = function(){
        console.log('my name is ' + this.name)
    }
}
 const p1 = new Person('张三',18)
 p1.say() // my name is 张三

可以看到，构造函数与普通函数并无差异，而new关键字让其变得与众不同，使它可以创建实例。那么new关键字到底做了什么呢？简单来讲有以下四点

1.在内存中创建一个新的空对象。
2.将新对象的对象原型指向构造函数的原型对象。
3.让 this 指向新对象并执行构造函数里面的代码，给这个新对象添加属性和方法。
4.判断构造函数的返回值，如果是对象类型则返回该对象，否则返回自己创建的对象。

关于new关键字的具体代码实现后面会继续讨论，这里不做深入探讨

二. 原型对象

既然构造函数可以作为模板创建多个实例对象，那么为什么还要引入原型（原型对象）这一概念呢。这里就要提到构造函数存在的问题，那就是浪费内存的问题。如上面例子中，构造函数内部声明了一个say方法。我如果用这个构造函数创建了多个实例对象，则意味着这多个对象中都有一个say方法，且都做了同样一件事。上面提到new关键字会为对象开辟内存空间，也就意味这些say方法虽然实现的功能是一样的，但是由于分别属于不同的实例，因此不得为其分配内存空间。这便是构造函数存在的浪费内存的问题。因此就有了原型这一概念。

什么是原型？

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数所拥有。这样一来，我们可以把那些不变的方法，直接定义在 prototype 对象上，这样构造函数所创建所有实例就可以共享这些方法。因此也可以将原型的作用归结为一句话，那就是共享方法。
还是上面的例子，我们试着将say方法挂载到Person的原型对象上

function Person(name,age){
    this.name = name
    this.age = age
}
Person.prototype.say = function(name){
    console.log('my name is' + name)
}
 const p1 = new Person('张三',18)
 const p2 = new Person('李四',20)
 p1.say(p1.name) //my name is 张三
 p2.say(p2.name) // my name is 李四

可以看到 Person创建出的实例均可调用say方法,因此一般情况下，对象公共的方法我们放到原型对象身上。基于这个特点，可以引出原型对象的一大应用，即扩展内置对象方法。比如给数组增加自定义求偶数和的功能。Array.prototype.xxx = function(){} 这里不做过多阐述。

说到这里可能产生一个疑问，say方法是定义在Person的原型对象上的，那为什么用Person创建出的实例对象可以访问到呢，或者说是如何访问到的呢，这里就又涉及到另一个概念，对象原型。

三. 对象原型

使用构造函数创建出的对象都会有一个属性_proto_ ，它指向构造函数的 prototype 原型对象。这便是为什么我们用构造函数创建出的对象可以访问构造函数的原型对象上的属性和方法。实际上，通过上述也表明，_proto_ 对象原型和构造函数的原型对象 prototype 是等价的。

console.log(Person.prototype === p1.__proto__) // true

前面说到，构造函数的prototype指向原型对象，同样地，原型对象里面也有一个 constructor 属性，它指回构造函数本身。constructor 属性的意义主要在于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。这有什么用呢？

一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会**覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了，而是会指向Object。**此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。下面以一个例子加以说明：

function Person(name,age){
    this.name = name
    this.age = age
}
Person.prototype = {
    constructor:Person,//如果我们以对象的形式给原型对象赋值，则必须手动的利用constructor指回原来的构造函数
    say:function(){
        console.log('我会唱歌');
    }
}
 const p1 = new Person('张三',18)
 p1.say()

四. 原型链

理解了原型，原型链的概念也就不难理解了首先我们要探讨一下js的成员查找机制。

1.当访问一个对象的成员时，首先查找这个对象自身有没有该成员。
2.如果没有就查找它的原型对象
3.如果还没有就查找原型对象的原型（Object的原型对象）。
4.依此类推一直找到 Object 为止（null）。

`proto`对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线，而这条路线就是原型链。

五.继承

理解了原型和原型链的概念，终于可以说说继承了。ES6之前由于没有类的概念，因此继承的实现方式是构造函数+原型对象的组合继承方式。

为什么是这种继承机制呢？前面已经讲到，一般情况下我们将对象的公共属性在构造函数中声明，将对象的公共方法在原型对象中声明。由此，继承的思路就有了，我们可以利用构造函数来继承父类的属性，使用原型链来继承父类的方法。下面做具体说明

1.借用构造函数继承父类属性

这一步很好理解，我们就把父级构造函数中的操作在子级的构造函数中重现一遍即可。但这里有一个问题，前面讲到，构造函数中的this指向造函数的对象实例。因此我们直接在子类的构造函数中调用父类的构造函数是不行的，因为这时的this并不会指向子构造函数的对象实例。 因此我们要借助call方法来改变this的指向。

 function Father(name,age){
      this.name = name;
      this.age = age;
      this.run = function(){
          console.log('我会跑步')
      }
  }
  function Son(name,age){
      Father(name,age)
  }
  const p1 = new Son('小明',18)
  console.log(p1.name) // undefined

可以看到子类中直接调用父类的构造函数是不行的

function Son(name,age){
    Father.call(this,name,age)
}
 const p1 = new Son('小明',18)
console.log(p1.name) // 小明

至此属性的继承已经完成，接下来讨论方法的继承

2.借用原型对象继承父类方法

我们已经知道，构造函数的公共方法都定义在原型对象中，那我们可不可以这样做呢，直接让子类的构造函数的prototype属性指向父类构造函数的原型对象?

这样做确实可以达到继承父类方法的目的，但这样会存在隐患，因为一旦修改了子原型对象,父原型对象也会跟着一起变化。因此不推荐这样做。那正确的做法是什么呢？

我们已经知道，原型对象的方法是所有实例对象所共享的。因此父类构造函数所创建出的实例对象必然拥有其对象原型上的所有方法。因此可以将此实例对象作为子类构造函数的原型对象，由此原型链就产生了。同时也实现了方法的继承。

同时，由于子类原型对象等于是对父类的实例化，而父类实例化之后另外开辟空间，因此就不会影响原来父类原型对象。这里要注意的是，由于我们修改了子类构造函数的原型对象，因此要利用constructor 指回原来的子类构造函数。

下面是具体实现

Son.prototype = new Father();
Son.prototype.constructor = Son;
Son.prototype.say = function() { // 这是子类的独有方法
    console.log('我是小孩');
}
const p1 = new Son('李四',10)
p1.run() // 我会跑步
p1.say() // 我是小孩

此时便实现了对父类所有成员的继承。由此可见继承的实现实质上是在原型链上添加了一个端点。其实这就是JavaScript最常见的继承方式，即组合继承。

不过，通过观察组合式继承的实现过程可以发现，组合继承无论在什么情况下都会调用两次构造函数：一次是在子类构造函数内部调用，一次是在创建子类原型时调用。其实，不必为了指定子类原型而单独调用一次父类的构造函数，我们可以使用Object.create方法创建一个父类原型的副本，让其作为子类的原型。

let protoType = Object.create(Father);
Son.protoType = protoType;
protoType.constructor = Son;

上述继承方式称为寄生组合式继承，它只调用一次父类构造函数，其余操作与组合式继承一致，实现效果也与组合式继承相同。事实上，ES6类的继承（extends）就是基于寄生组合继承来实现的。