新手一张图搞懂原型链
原型链可谓是新手必备,也是js学习中非常重要的一个环节,但很多同学在初学中理不清其中的逻辑关系,所以我就用一张图来帮助大家理解
- 首先,第一步定义一个构造函数
Fn时,内部就会自动生成一个prototype,即显示原型(属性),默认值时一个空Object对象。 new一个实例对象的时候,内部也会自动生成一个隐式原型(属性),叫做__proto__,它的默认值就是构造函数prototype的属性值***(牢记牢记)***- 我们在显示原型,也就是
prototype上定义了一个test方法后,当fn想要使用test方法时,他会现在它的funciton函数中找查,发现没有后就会在隐式原型(__proto__)属性中找查,发现存在,然后调用即可 - 我们能直接操作显示原型,但不能直接操作隐式原型(ES6之前)
好啦,上边能够理解之后接下来就是整个原型链的完整结构啦
接下来可以用
instanceof来验证原型的走向。
instanceof的基础语法是A instanceof B 然后返回一个布尔值,这个属性是用来验证实例对象A是否是构造函数B的对象。
- Object instanceof Function
这里,我们可以知道
Object是一个实例对象,所以实例对象具有__proto__隐式对象,并且应该与Function.prototype相等,所以在Object的这条隐式原型链上能够找到Function的显示对象就说明,Object实例对象就是Function的。结果为true。这里要注意,任何函数都是new Function出来的,所以实际上就是var Object = new Function
- Object instanceof Object
这里,
Object依旧是实例对象,这次他要寻找的是Object.prototype。根据上面得出的,按照隐式链条已经找到了Function.prototype,所以继续寻找,prototype原型对象又为Object构造函数的对象,所以prototype.__proto__ == Object.prototype,所以实际上就是Object.__proto__.__proto__,最终找到了Object的显示原型。结果为true