脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

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

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

let person = new Person('yuyongyu');

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

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

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

简约版

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

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

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

第二步:
  • Person是构造函数,构造函数也是函数,函数除了有原型对象外,也有原型指针。
  • 函数都是由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的学习任重道远。

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过