理解Function和Object的原型关系

源于某道js笔试题

//题目
var foo = {}
var F = function(){}
var f = new F()
Object.prototype.a = function(){}
Function.prototype.b = function(){}

//每次调用以下一个方法,哪些方法会报错
foo.a()
foo.b()
F.a()
F.b()
f.a()
f.b()

答案：

// foo.a(), F.a(), F.b(), f.a()调用成功
// foo.b(), F.b()调用失败
foo.a()    //=> 
foo.b() //=> TypeError: foo.b is not a function
F.a() //=>
F.b() //=>
f.a() //=>
f.b() //=> TypeError: f.b is not a function

关于原型链的思考

JS中，一个 变量 或 方法 的搜索是基于原型链的，如：a.b()，其伪代码：

// 假设a自能调用自身方法，a.b()类似于
while(a !== null) {
  a.hasOwnProperty(b) ? a.b() : a = a.__proto__;
}

为此，有句调侃javascript的话

万物皆源于无（null）

解析

要理解这道题目，最基本的思路在于：弄懂代码执行后，原型链的状态

关键点又有两点

1. 执行前的原型链状态
2. new关键字的作用

执行前的原型状态

es规范：请参考下面代码

Object.__proto__ === Function.prototype; //=>true
Object.__proto__ === Function.__proto__; //=>true
Function.__proto__.__proto__ === Object.prototype; //=>true
Function.__proto__.__proto__.__proto__ === null; //=>true

new关键字所起的作用

• 一般地:

  var a = new A()
  
  //类似于
  var a = {}
  a.__proto__ = A.prototype
  A.prototype.call(a) //该句并不影响原型关系，可暂时忽略

• 对于new Function，则存在一点不同

  var f = function(){}  //或var f = new Function()
      
  //类似于    
  var f = {}
  f.__proto__ = Function.prototype
  f.prototype = {} // 独有
  Function.prototype.call(f）

执行前后的原型链变化

• 执行前（图1）
  
• 执行后（图2）
  

由图，可以很轻易得出

• foo.a()会被调用成功
• foo.b()会报错