JS原型和原型链

原型和原型链问题本身而言并不难，主要是考察对JavaScript基本概念的理解，但说明白就比较难了。纠结了很久还是决定转发下文，感觉自己写的那篇不如这篇好理解。

 

原文链接：https://segmentfault.com/a/1190000015642813

 

我印象比较深刻的一次，有个面试官出了一道面试题，大意如下：

function Person(name) {
    this.name = name;
}

let person = new Person('yuyongyu');

请讲讲person和Object的关系，形式不限。

我当时下意识地脱口而出：Object在person的原型链上。当时从面试官复杂的表情可以推断出这不是他真正想要的答案，但我也基本可以断定他真实的意图就是想考察下对原型链的掌握，而且期望看到原型链的全貌。掌握了出题人的意图，那接下来就好办了。

事后整理当时的思路如下：

简约版

第一步：

• person是对象，对象都有原型（也叫原型指针）__proto__，指向构造函数的原型对象prototype。

此处即person的__proto__属性指向Person的prototype。

注：__proto__最初是一个非标准属性，ES6已将其标准化，可以用标准方法Object.getPrototypeOf()替代，本文出于举例的直观性考虑，仍采用此属性。

第二步：

• Person是构造函数，构造函数也是函数，函数除了有__proto__外，也有prototype。
• 函数都是由Function构造出来的，故函数的原型指针指向Function的原型对象。

此处即Person的__proto__属性指向Function的prototype。

第三步：

• Function是内建构造函数，内建构造函数也还是函数，除了有原型对象外，也有原型指针。
• 函数都是由Function构造出来的，Function作为函数，是由其自身构建出来，故Function的原型指针指向其自身的原型对象。

此处即Function的__proto__属性指向Function的prototype。

第四步：

• Function的原型对象，其本身也是对象，故其原型指针指向Object的原型对象

此处即Function.prototype的__proto__属性指向Object的prototype。

为更加直观表示，作示意图如下：

 

以上为推导过程，必须代码验证，结果如下（node环境，ES6版）：

function Person(name) {
    this.name = name;
}

let person = new Person('yuyongyu');

//第一步验证
console.log(person.__proto__ === Person.prototype); // true

//第二步验证
console.log(Person.__proto__ === Function.prototype); // true

//第三步验证
console.log(Function.__proto__ === Function.prototype); // true

//第四步验证
console.log(Function.prototype.__proto__ === Object.prototype); // true

至此基本达到了面试官的要求，但事后思考，整个过程过于简略，还可以进一步扩展，丰富整个过程。事后扩展思路如下：

豪华版

第一步：

• 同上。

第二步：

• Person的原型对象也是对象，同样拥有构造器属性：constructor和原型指针。
• 函数的原型对象的构造器属性指向自身。
• 函数的原型对象的原型指针指向Object的原型对象

此处即Person.prototype的constructor属性指向Person;Person.prototype的__proto__属性指向Object的prototype。

第三步：

• Function的原型对象和Person的原型对象一样，不再赘述。

此处即Function.prototype的constructor属性指向Function;Function.prototype的__proto__属性指向Object的prototype。

第四步：

• Object作为JavaScript中的内建构造函数，同样拥有原型指针和原型对象。
• Object既然是函数，故其原型指针指向Function的原型对象。
• Object的原型对象同样包含构造器属性：constructor和原型指针。
• Object的原型对象的构造器属性指向自身。
• Object的原型对象的原型指针指向null。

此处即Object的__proto__属性指向Function的prototype;Object.prototype的constructor属性指向Object;Object.prototype的__proto__属性指向null.

示意图如下（虚线仅代表不交叉，无特殊含义）：

 

代码验证结果如下：

function Person(name) {
    this.name = name;
}

let person = new Person('yuyongyu');

//第一步验证
console.log(person.__proto__ === Person.prototype); // true
console.log(person.constructor === Person); // true

//第二步验证
console.log(Person.__proto__ === Function.prototype); // true
console.log(Person.prototype.constructor === Person); // true
console.log(Person.prototype.__proto__ === Object.prototype);// true

//第三步验证
console.log(Function.__proto__ === Function.prototype); // true
console.log(Function.prototype.constructor === Function);
console.log(Function.prototype.__proto__ === Object.prototype);

//第四步验证
console.log(Object.__proto__ === Function.prototype); // true
console.log(Object.prototype.constructor === Object); // true
console.log(Object.prototype.__proto__ === null); // true

点睛之笔

注意到上图中那个红色的null了吗？

JavaScript处处皆对象，而原型链的尽头竟然是null，不由到想到一句佛语：万物皆空。

如果从反向来看，是null衍生出了丰富多彩的JavaScript世界，不由得又想到了一句道语：一生二，二生三，三生万物

另外，由上图可知Object.__proto__ === Function.prototype，Function.prototype.__proto__ === Object.prototype，即Object作为内建函数由Function构造出来，Function作为内建构造函数又是对象（函数都是对象），这似乎又进入了“鸡生蛋和蛋生鸡”的哲学范畴。

由此可见JavaScript的设计思想可谓博大精深，不免感慨JavaScript的学习任重道远。

 

··············

如果还想有更深入的理解的话：

https://www.jianshu.com/p/dee9f8b14771

这篇文章写的虽然啰嗦但是很详细，也可用看看。