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

发布时间:2019-08-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了如果再被问到原型和原型链......脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前段时间求职过程中,经常会被问到关于原型和原型链,就问题本身而言并不难,主要是考察对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:384754419,请注明来意。