前端开发JavaScript

关于原型链的一道面试题的思考

JavaScript, 前端, 面试题

去年今日此门中，人面桃花相映红
这道题考了原型链，不好用文字描述，所以就画了一些图来帮助理解

试写出程序运行结果

1
2
3
4
5
6
7
8
9
10
11
12
function A(){};
function B(){
    return new A();
}
A.prototype = B();
B.prototype = new B();
var a = new A();
var b = new B();
console.log(a._proto_==b._proto_);
console.log(a instanceof A);
console.log(a instanceof B);
console.log(b instanceof A);

分析：

  1. 程序执行到第5行，B()实际上返回一个A的实例，所以A.prototype 指向了一个A的实例，我们暂且称这个A的实例为实例A1。注意，此时A.prototype不再指向原生的A.prototype。但原生的A.prototype还存在，并不会被垃圾回收机制回收，因为它还被实例A1._proto_指向着。示意图如下：
    图1

  2. 程序执行到第6行，new B()同样返回一个A的实例，我们成为实例A2，此时B.prototype 指向了实例A2，然后实例A2的_proto_指向了谁呢，指向了实例A1！因为在第一步我们已经说过，构造函数A.prototype指向了实例A1。示例图如下：
    图2

  3. 再看第7行，new A()再次生成一个A的实例，这个实例为a。第8行，再次返回一个A的实例（前面已经说过，new B()其实就是new A()） 。最后的示例图如下：
    图3

  4. 所以由图3可以看出：console.log(a instanceof A)为true。

  5. 要判断最后三条语句，我们要明白instanecof 的判断队则是什么，可以参考王福明的
    深入理解javascript原型和闭包（5）——instanceof，这里直接给出答案：
    1
    2
    3
    console.log(a instanceof A);  //true 
    console.log(a instanceof B);  //false
    console.log(b instanceof A);  //true
分享到