原型

By yesmore on 2021-12-13
阅读时间 2 分钟
文章共 502
阅读量

同系列文章请查看:Github:pre-interview

原型链

1
2
3
4
5
6
7
8
// 要有顺着原型链找东西的技巧 
// 甭管是 常规的 找方法、找属性
// 还是面试中可能问的找构造函数 找Function Object的显式原型
/*(比如写一个 Function.prototype.func = function(){...}
  要知道这个func方法 哪些实例对象可以调用(顺着原型链的隐式原型那条路线要能抵达Function的显式原型 那就能用那上面的方法!) */
var Foo = function(){...};
var foo = new Foo();                      
console.log(foo.__proto__.__proto__ === Object.prototype;)//true

经典图:

proto

可以看到实例对象 顺着原型链可以找到Object的原型对象

Object的原型对象上有很多定义好的方法

另外Object的原型对象与Function的原型对象也有联系 即——Function.prototype.__proto__ = Object.prototype

Fn.proto = Function.prototype;
Function.prototype.proto = Object.prototype;

这样Fn(构造函数)就可以访问Object上定义的方法fn(Object.prototype.fn = function(){...})了!

面试题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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】实例对象f 顺着原型链(的__proto__属性)

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

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

【2】同理 顺着原型链找

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

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

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

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

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

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


Tips: Please indicate the source and original author when reprinting or quoting this article.