JS原型链、prototype、__proto__、原型链继承详解

prototype和__proto__的区别：

Javascript中所有的对象都是Object的实例，并继承Object.prototype的属性和方法，也就是说，Object.prototype是所有对象的父级。

在对象创建时，就会有一些预定义的属性，其中定义函数的时候，这个预定义属性就是prototype，这个prototype是一个普通的对象。 而定义普通的对象的时候，就会生成一个__proto__，这个__proto__指向的是这个对象的构造函数的prototype.

function A () {}

let a = new A()
复制代码

当我们声明一个函数A时就自动创建了prototype对象。而a是构造函数A的实例，这时候a是一个实例对象，因为实例对象只有__proto__属性, 所以a只有__proto__属性，此属性指向A.prototype。

所以：

// 每个实例对象（object）都有一个私有属性（称之为__proto__）指向它的原型对象（prototype）
a.__proto__ === A.prototype // true 
复制代码

这就是prototype和__proto__的区别。

原型链：

我们都知道对象都有一个toString方法。上述的实例化对象a也可以toString。而实例化对象a本身并没有toString的方法，那他就会沿着它的__proto__向他的构造函数A的prototype对象去找，而这里也没有，那他就会继续沿着A.prototype.__proto__向上找。而A.prototype.__proto__指向的就是Object.prototype。(这也同时也解释了为什么所有的javascript对象都具有Object的基本方法。)

a.toString() === Object.prototype.toString() // true
复制代码

这一层一层的链接关系就是原型链，层层向上直到一个对象的原型对象为 null（Object.prototype.__proto__ === null）。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

用代码表示就是：

a.__proto__ === A.prototype // true 
A.prototype.__proto__ === Object.prototype // true

==>
a.__proto__.__proto__ === Object.prototype // true
复制代码

原型链继承

有了上面的理论支持，再理解原型链继承就十分简单了

function Parent(){
    this.name = 'mike';
}

function Child(){
    this.age = 12;
}
Child.prototype = new Parent(); // Child继承Parent，通过原型，形成链条
复制代码

这个时候Child.prototype已经是{ name: 'mike' }了

let childA = new Child() // 创建实例

console.log(childA) // { age: 12 }
复制代码

childA中并没有name属性，但是根据我们在上面讨论的，原型链会一层层向上找，所以：

childA.name === childA.__proto__.name === Child.prototype.name // true

console.log(childA.name) // mike
复制代码

参考链接：

1、继承与原型链

2、彻底理解什么是原型链，prototype和__proto__的区别。

转载于:https://juejin.im/post/5c74e25f6fb9a049db73c910