Open felix-cao opened 6 years ago
在上一节我们聊了 JavaScript原型、原型对象、隐式原型,我们知道
__proto__
本节我们来聊一聊原型链。
原型链是一个机制,用于对象的属性查找,当访问一个对象的属性时,JavaScript的搜索顺序是:先去该对象上搜索,再去该对象的原型,再到该对象原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的终点(即Object.prototype)。如果最终没有找到指定的属性,就会返回undefined。
Object.prototype.name = 'TOP of prototype'; function Person() { } var p1 = new Person(); console.log('p1对象:', p1); console.log('p1的name属性:', p1.name);
注意: 在实际应用中,不要直接在Object.prototype中添加任何属性和方法,本文是为了方便理解原型链的属性查找才这么写的。 上面的代码执行结果如下:
当我们查找p1对象的name属性时,先去p1对象自身去搜索一通,发现没有,再去p1的原型对象Person.prototype上搜索,如果没有再去Person.prototype的原型对象Object.protptype上去搜,找到name属性,赋给p1.name;
我们把上面的代码改一下:
Object.prototype.name = 'TOP of prototype'; function Person() { } Person.prototype.name = 'Person原型上的name'; var p1 = new Person(); console.log('p1对象:', p1); console.log('p1的name属性:', p1.name);
上面的代码执行结果如下:
从这个结构我们可以看出,从开始的p1对象,到众多原型对象组成的链,发挥这种原型链作用靠的是对象的__proto__属性。
var A = function(){}; var a = new A(); console.log(a.__proto__); //A {}(即构造器function A 的原型对象) console.log(a.__proto__.__proto__); //Object {}(即构造器function Object 的原型对象) console.log(a.__proto__.__proto__.__proto__); //null
在上一节我们聊了 JavaScript原型、原型对象、隐式原型,我们知道
__proto__
,而__proto__
并不是语言本身的特性,是各大厂商具体实现时添加的私有属性,虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性,但依旧不建议在生产中使用该属性,避免对环境产生依赖。本节我们来聊一聊原型链。
原型链的属性查找机制
原型链是一个机制,用于对象的属性查找,当访问一个对象的属性时,JavaScript的搜索顺序是:先去该对象上搜索,再去该对象的原型,再到该对象原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的终点(即Object.prototype)。如果最终没有找到指定的属性,就会返回undefined。
注意: 在实际应用中,不要直接在Object.prototype中添加任何属性和方法,本文是为了方便理解原型链的属性查找才这么写的。 上面的代码执行结果如下:
当我们查找p1对象的name属性时,先去p1对象自身去搜索一通,发现没有,再去p1的原型对象Person.prototype上搜索,如果没有再去Person.prototype的原型对象Object.protptype上去搜,找到name属性,赋给p1.name;
我们把上面的代码改一下:
上面的代码执行结果如下:
从这个结构我们可以看出,从开始的p1对象,到众多原型对象组成的链,发挥这种原型链作用靠的是对象的__proto__属性。
原型链简单图解
Reference