关于原型链的一些浅显理解

原型链的参与者

• 普通对象 普通构造函数 Function Object null

一段普通的代码

function Yona() {}

let oB = new Yona();

Object.prototype.haha = 'Chloe';
console.log(oB.haha, Yona.haha);    Chloe Chloe

prototype

• 在JavaScript中一切皆为对象 包括函数

• prototype是函数特有的属性 所有的函数上都有这个属性

• prototype上的属性和方法可以让函数所构建的所有实例共享

proto

• 隐式原型 这是一个对象特有的属性 当然函数也会有这个属性

• 她总是会指向所构造她的函数上的prototype并且__proto__是只读的 所以她的唯一功能就是使对象可以通过她来查找prototype上的属性方法

• Yona.__proto__ === Function.prototype; true

• Yona.prototype.__proto__ === Object.prototype; true

• 在JS代码中推荐使用Object.getPrototypeOf(obj)的方式代替obj.__proto__

constructor

• prototype上的一个属性 用于查找对象的构造函数 她直接指向构造函数本身

• oB.constructor === Yona.prototype.constructor; true

• Yona.prototype.constructor === Yona; true

• oB.constructor === Yona; true

• 你甚至能用她来构建实例

• let oD = new oB.constructor();

• 构造函数也是对象，她们是由Function构造的，所以她们的constructor指向Function

• Yona.constructor === Function

• 所有的constructor都可以通过不断的.constructor追溯到Function，而Function.constructor则指向自身

• Function.constructor === Function; true

Object

• Ojbect.__proto__ === Function.prototype; true

• Ojbect.prototype.__proto__ === null; true

Function

• Function.__proto__指向一个匿名函数function () {}

• Function.prototype也指向这个匿名函数function () {}

• 所以Function.__proto__ === Function.prototype; true

• 这个匿名函数的__proto__则指向Object.prototype

• 所以Function.__proto__.__proto__ === Object.prototype; true

• Function.prototype.__proto__ === Object.prototype; true

• Function.constructor === Function; true

图片来源于网络，侵删

原型链

• 我们在查找oB上的属性或方法時 顺序如下

• oB → oB.__proto__ → Yona.prototype → Yona.prototype.__proto__ → Object.prototype → Object.prototype.__proto__ → null

常用的一些方法

• Object.getPrototypeOf(obj)

• 相当于obj.__proto__

• obj1.isPrototype(obj2)

• 判断obj1是否在obj2的原型链上

• obj instanceof func

• 判断func函数的prototype是否在obj的原型链上

• Object.create(obj)

• 创建一个新对象，该对象的隐式原型指向obj，参数必须是对象或者null

• 当参数为null时，创建处的对象将没有任何属性甚至是隐式原型

• obj.hasOwnProperty(属性名)

• 判断obj自身是否拥有指定属性，也就是不会向原型链上查找