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

734 阅读2分钟

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__的区别。