阅读 808

如果再被问到原型和原型链......

求职过程中,经常会被问到关于原型和原型链,就问题本身而言并不难,主要是考察对JavaScript核心概念的理解,但如何能够说明白确实需要认真准备下。

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

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

let person = new Person('yuyongyu');

复制代码

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

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

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

简约版

第一步:person与Person的关系

  • person是对象,对象都有原型(也叫原型指针),指向构造函数的原型对象。

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

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

第二步:Person与Function的关系

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

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

第三步:Function自己构建自己

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

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

第四步:Function与Object的关系

  • 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与Person

  • 同上。

第二步:Person.prototype

  • Person的原型对象(prototype)也是对象,除了有原型指针:proto,还拥有构造器属性:constructor。
  • 函数的原型对象的原型指针(proto)指向Object的原型对象
  • 函数的原型对象的构造器属性(constructor)指向自身。

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

第三步:Function.prototype

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

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

第四步:Object展开

  • 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的学习任重道远。

关注下面的标签,发现更多相似文章
评论