深入理解JavaScript中Function与Object的相互关系

注：本文涉及的理论较为深入，作者无法保证所有理论阐述绝对无误，但经过多方测试，尚未发现实际代码运行与文中理论相冲突的情况。若存在错误，恳请高手指正！

Function：顶层构造器与自举性

Function

首先回顾函数对象的概念：函数本身即为对象，代表函数的对象称为函数对象。系统中所有的函数对象均由Function这一函数对象构造而成。这意味着，Function是最高层的构造器，它构建了系统中的所有对象，包括用户自定义对象、系统内置对象，甚至包括它自己。这也体现了Function的自举性（即自我构造的能力）。这一特性间接决定了Function的[[call]]和[[constructor]]内部逻辑是相同的。

 
function Foo() {};
var foo = new Foo();
//Foo为foo的构造函数
alert(foo instanceof Foo); // true
//但是Function并不是foo的构造函数
alert(foo instanceof Function); // false
//Function为Foo的构造函数
alert(Foo instanceof Function);//true

上述代码展示了foo、其构造函数Foo以及Foo的构造函数Function之间的关系。（具体原理请参考Function与Object的内存关系图）

Object：最顶层对象及其函数属性

Object

Object是最顶层的对象，所有对象都将继承Object的原型。但需明确的是，Object本身也是一个函数对象，因此它是被Function构造出来的。（关于Object的理论相对较少）

Function与Object的相互关系解析

Function与Object

这是本文的重点，非常重要！

 
alert(Function instanceof Function);//true
alert(Function instanceof Object);//true
alert(Object instanceof Function);//true
function Foo() {};
var foo = new Foo();
alert(foo instanceof Foo); // true
alert(foo instanceof Function); // false
alert(foo instanceof Object); // true
alert(Foo instanceof Function); // true
alert(Foo instanceof Object); // true

你能理解这些答案吗？如果能，恭喜你，你已经理解了JavaScript语言的本质。

那么让我们来看一下Object与Function实际的关系吧：

在查看图片之前，请先阅读函数对象与instanceof原理两篇文章，否则内存图将难以理解。

在此，我对内存图做一点说明：在函数对象一文中提到了函数对象的构造过程，在本文中提到Function为自举性的，所以说函数对象Foo的构造过程和函数对象Function的构造过程是一样的。所以在图中给于高亮显示，我用'|'来分隔来表示它们的构造过程相同。根据instanceof的理论，和内存图，可以将上面的语句都推导出正确的结果。在此我们不一一讲述了，读者自已体会吧。

如果你不能理解这张复杂的内存图的话，可以看下面的说明图来帮助理解：

注：代码的实际执行流程并不完全像这张图上描述的那样，也就是说这张图是有问题的(可以说是错误的),它无法解释为什么Function instanceof Function 为true。 但是它易于理解Function与Object的关系。