JavaScript原型链：探寻对象之间的继承秘密

原型

构造函数

什么是构造函数呢？简单来说，当函数用于创建实例对象（new）时，这个函数便称之为构造函数。

`prototype`

在JavaScript中，每一个非箭头函数都有一个prototype属性（也是一个对象），里面存放着通过该函数创建的实例对象会继承共享的一些属性和方法，也就是我们所说的原型对象。

不好理解？举个栗子：

javascript 复制代码

function Test() {}
Test.prototype.a = 1 // Test对象原型上面的属性
// 创建了两个实例对象
const test1 = new Test();
const test2 = new Test();
// 这两个实例对象都可以访问
console.log(test1.a); // 1
console.log(test2.a); // 1

Test函数中有一个prototype属性，我们在其身上添加一个属性a，值为1，显然这个函数创建的示例对象test1和test2都能够访问这个属性，所以称函数原型对象里面的属性和方法是通过该函数创建的实例对象共享的属性和方法。

`constructor`

在函数的原型对象中有这么一个属性--constructor，它会指向该函数。先来看看下面的代码

javascript 复制代码

function Test() {}
const test = new Test();
console.log(Test.prototype.constructor); // ƒ Test() {}
console.log(test.constructor) // ƒ Test() {}

我们发现这两个打印结果都相同，第一个打印Test构造函数我们都能理解，因为上面我们也说了，Test函数的原型对象上的constructor会指向该函数，即Test。那么第二个打印结果为什么也是这个呢？我们说过，构造函数创建的实例对象会继承和共享原型对象上的属性和方法，那么constructor自然也就被test继承了。

原型链

`proto`

在JavaScript中，对象都有一个__proto__属性，它也是一个对象。有了这个之后呢，我们还得知道这么一个关系，对象的__proto__保存着该对象构造函数的prototype。

csharp 复制代码

function Test() {}
const test = new Test()

我们知道，test对象的__proto__保存着构造函数Test的prototype

ini 复制代码

console.log(test.__proto__ === Test.prototype) // true

我们又知道prototype也是一个对象，那么它也会有自己的__proto__属性, 那么Test.prototype.__proto__会等于什么呢，Test.prototype是一个对象，对象的构造函数自然是Object。也可以通过constructor来获取该对象构造函数是什么

javascript 复制代码

console.log(Test.prototype.constructor) // Object
console.log(Test.prototype.__proto__ === Object.prototype) // true

那么Object.prototype.__proto__又会是什么呢。我们来看一下

javascript 复制代码

console.log(Object.prototype.__proto__) // null

是null，相信到了这里，大家对于原型链都有了一个概念，其实就是以__proto__为连接点,以prototype为节点形成的链状结构，而原型链的顶端便是null。

Funnction 和 Object

Function

我们知道，在JavaScript中函数也是一个对象，那么上面实例中的构造函数Test也是一个对象，那么它是由谁构造出来的呢，答案是Function。

vbnet 复制代码

// function Test() {} 相当于 const Test = new Function(

既然如此的话，那么Test也会由自己的__proto__咯，它会等于什么呢，相信大家心里已经有了答案，没错，它就等于Function.prototype

javascript 复制代码

console.log(Test.__proto__ === Function.prototype) // true

更有意思的来了，我们知道Function是一个函数，显然也是一个对象，那么它的__proto__会是什么呢？

javascript 复制代码

console.log(Function.__proto__ === Function.prototype) // true

为什么呢？没有为什么，这就是底层规定的。

Object

Object实际上也是一个构造函数，那么它应该也是由Function构造而来对吧，那么我们可以得出什么呢？

javascript 复制代码

console.log(Object.__proto__ === Function.prototype)

综上：

Function.__proto__ === Function.prototype
Object.__proto__ === Function.prototype

推论：Object.__proto__ === Function.__proto__