顺着原型链来找方法 深入了解原型链

334 阅读1分钟

来看道原型链的面试题~

21/12/22 更新原型链高清大图 image.png

function F(){}
Object.prototype.a = function(){
    // Object的原型对象上增添了一个a方法
    console.log('a()')
}
Function.prototype.b = function(){
    console.log('b()')
}
var f = new F()
f.a()//【1】
f.b()//【2】
F.a()//【3】
F.b()//【4】

先想想【1】 - 【4】的答案分别是啥~(答案在文末)

接下来分析下这四部分

【1】实例对象f 顺着原型链(的__proto__属性)

->实例对象F()->空Object对象->Object对象的显式原型

可以在Object的显示原型上找到a方法

在这里插入图片描述

【2】同理 顺着原型链找

->实例对象F()->空Object对象->Object对象的显式原型->null

Object对象的显式原型就是原型链的尽头了!没法再找到Function的原型对象了!

在这里插入图片描述

【3】从函数对象 通过隐式原型属性 顺着原型链找

这里需要注意 直接打印F 是没有办法获得它的 __proto__ 属性的

可以通过其原型对象的constructor来获取(见下图)

->Function对象的显式原型->Object对象的显式原型

在这里插入图片描述

另外注意 函数F()的隐式原型属性是由Function创建的~

【4】同理

画图出来就很清楚了!

这个图要记在脑子里!

->Function对象的显式原型

在这里插入图片描述

答案很清楚辣~

f.a()//【1】可以找到
f.b()//【2】报错 b不是一个函数
F.a()//【3】可以找到
F.b()//【4】可以找到