记得有一次面试, 就考到了原型链. 面试官在批改我的笔试题时, 他突然说你这题是做对了, 那你把它完整的原型链画出来吧! 难受😣, 当时我也是一知半解的做对了, 我只能瞎操作一顿了.

今天就好好整理下关于原型链的知识

要理解原型链是什么, 就要知道什么是__proto__、什么是prototype、还有constrtctor, 以及他们之间的关系

1、__proto__ js的Function其实就是一个对象, 那js中的对象有个一特殊[[prototype]]内置属性, 几乎搜索对象在创建时候 [[prototype]] 都会赋予一个非空的值. 注: [[prototype]] 也就是 __proto__, 一些书籍上就标记为[[prototype]], 浏览器中为__proto__. 常说的原型链条就是 [[prototype]]链 或者 __proto__链.

2、prototype

每个Function都会有一个prototype属性, 叫做原型.

3、constructor

构造函数的prototype属性的constructor属性指向其本身(如构造函数Foo, 它的原型上的construstor(即Foo.prototype.construstor === Foo)指向它本身; 实例的constructor指向构造函数本身(即foo.constructor === Foo)

先来一个图热身

是不是经常在网上看到一个类似这样的关系图, 各种箭头指来指去的, 感觉好难.

其实, 还有更难的

上图你可以先忽略其他的, 先看原型链部分

你可以将箭头理解为一个指向或者理解为它是一个等号, 那就很容易总结出一个规律了. 写了一个构造函数Foo, 实例化出来一个foo, foo上就会有一个__proto__属性, 指向它的构造函数爸爸的原型Foo.prototype, Foo.prototype上又有一个__proto__, 指向Foo的爸爸Object的原型上Object.prototype, 可怜的是Object已经没有爸爸了, 最终Object.prototype.__proto__指向null, 原型链寻找属性的过程到了null就结束了

简单一点总结就是: 儿子(foo)的__proto__ 指向 爸爸(Foo)的prototype, 爸爸的prototype.__proto__ 指向爷爷(Object)的 prototype, ... 最终指向到null结束

最终出现只样的调用链

foo.__proto__ === Foo.prototype // true

Foo.prototype.__proto__ === Object.prototype // true

Object.prototype.__proto__ === null // true

// 根据上面的关系, 能够得出以下链式
foo.__proto__.__proto__.__proto__ === null // true

当我们去调用一个foo没有的属性时候, 它会沿着这条链往上去寻找, 找到为止或者找到null才停止

代码验证

// 构造函数
function Foo () {
    console.log('Foo构造函数')
}
// foo实例
const foo = new Foo()

console.log('1、',foo.__proto__ === Foo.prototype) // true

console.log('2、', Foo.prototype.constructor === Foo) // true

console.log('3、', Foo.prototype.__proto__ === Object.prototype) // true

console.log('4、', Object.prototype.__proto__ === null) // true

console.log('5、', foo.__proto__.__proto__.__proto__ === null) // true

console.log('6、', foo.constructor === Foo.prototype.constructor) // true

console.log('7、', foo.constructor === foo.__proto__.constructor) // true

console.log('8、', foo.constructor === Foo) // true

console.log('9、', Foo.constructor === Object.constructor) // true

console.log('10、', Foo.__proto__ === Function.prototype) // true

console.log('11、', Function.prototype.__proto__ === Object.prototype) // true

console.log('12、', Function.__proto__ === Function.prototype) // true

console.log('13、', Function.constructor === Function) // true

console.log('14、', Object.constructor === Function) // true

console.log('15、', Foo.constructor === Function) // true

console.log('16、', Object.__proto__ === Function.prototype) // true

其他文章：

Javascript实现简单的冒泡排序、插入排序

一个非常简单的-发布订阅模式