JavaScript--我所理解的原型链

一图胜过前言万语, 感觉作图软件实在没有动笔舒服...原谅我的字.

以上是原型链的基本概念, 但很多面试题都不会这么简单的去考这些, 下面贴出一些面试题并写出自己的分析:

例子1:

function Class(){}
Class.prototype.__proto__.prop = 1;

var new_pro = new Class; 
var old_pro = Class.prototype; //old_pro 是保存的 Class 原来的 prototype  

Class.prototype = new_pro; //在这 new_pro 成为了 Class 新的 prototype
var a = new Class;
console.log(a.prop);

上面的题比较绕的是, new_pro 作为构造函数 Class 的一个实例, 却成为了 Class.prototype, 那么问题来了:

  1. a.__prpto__ ==  new_pro ?  a 的原型链的"上一级"是否是 new_pro?

  2. new_pro.__proto__ == Object.prototype ?  new_pro 它本身的 __proto__是 old_pro, 那成为了 Class.prototype 之后, new_pro.__proto__ 是否是 new_pro 自己呢? 或者说 new_pro.__proto__ 是否就是 Object.prototype ?

遇到这些问题, 最好的方法就是自己写写代码研究.

　　

从上图可看出, new_pro 做了 Class.prototype 之后, 它自己的 __proto__ 还是 old_pro, 也就说明, 在语句执行到 Class.prorotype = new_pro 后, 原来的 Class.prorotype 即 old_pro 并没有因此销毁不存在, old_pro 还是 new_pro 的原型链的"上级", 所以并不存在 new_pro == new_pro.__proto__.

即现在情况是

a.__proto__ == Class.prototype == new_pro,

new_pro.__proto__ == old_pro,

old_pro.__proto__ == Object.__proto__

再在控制台显示下 old_pro 和 new_pro 的具体信息:

我们都知道构造函数内部的 prototype 指向 它的原型, 构造函数的原型内部的 constructor 指向对应的构造函数, 从上图看出, 对于 Class.prototype 不再是 old_pro 的情况下, old_pro .constructor 还是 Class, 而且, 已经是 Class.prototype 的 new_pro 它本身并没有因成为构造函数的原型而拥有 constructor 这个属性, 它所表现的 new_pro.constructor == Class 是通过原型链上的 old_pro.constructor 获得的.

 

以上就是这道题的分析, 所以 a.prop 实际上是沿着上图右边的关系查找原型链, 直到发现 Object.prototype.prop == 1.

先写这一道, 以后慢慢补充.