js对象（二）—— 函数与对象的关系（认识原型链）

- 日理万妓 2022-02-27 06:36 375阅读 0赞

首先，结合之前的一篇博客[js对象(一)——创建对象][js]开头，为了理解对象，抛出了一系列比较绕的概念，即对象和函数的关系，搞清楚了这个问题，可能才算真正理解了什么是对象，什么是函数。  
还是先看一些说法和描述：

> JavaScript中，一切都是对象，函数也是对象，数组也是对象，但是数组是对象的子集。  
> 函数实际上是对象，而且与其他引用类型一样具有属性和方法，由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。
> 
> 对象都是由函数创建的。  
> 所有的对象都是由Object继承而来，而Object对象却是一个函数。
> 
> 每一个函数实际上都是Function类型的实例

（在这里看来，函数与对象之间有着说不清道不明的关系，函数是对象，对象又是又函数创建的，所以到底是先有的函数还是先有的对象，他们的原型或者说底层又有什么关系呢?？）

借助 **prototype,\_\_proto\_\_,constructor**这三个属性，先从最简单的开始说起?：

## 图一 ##

通过原型模式创建对象，我们接触到了对象创建的机制，如图：

var o1 = new Object()
    var o2 = new Object()

![图片描述][684645282-5b02b2376aa83_articlex]

## 图二 ##

接下来，再看另一种构造函数创造机制：

function foo() {}
    var f1 = new foo()
    var f2 = new foo()

![图片描述][3026658621-5b02b264d4700_articlex]

由于一切对象（除Object.prototype）都继承自Object,所以不难理解这里最大的boss是Object.prototype,而构造它的原型对象是null，这不是证明了它就是最大的boss吗？然而，并没有那么简单，那么，function()又是怎么回事呢？继续看：

## 图三 ##

![图片描述][1943014880-5b02b28ccec70_articlex]

我们知道，一切函数都是Function的实例，而参考[MDN-function][] ，我们发现：

> Function 构造函数 创建一个新的Function对象。 在 JavaScript 中,  
> 每个函数实际上都是一个Function对象。
> 
> 全局的Function对象没有自己的属性和方法, 但是, 因为它本身也是函数，所以它也会通过原型链从Function.prototype上继承部分属性和方法。

这句话“Function从Function.prototype上继承部分属性和方法”，可以解释

Function.__proto__==Function.prototype

即可以说函数是由Function创建的，那么Function由自身创建，所以Function.\_\_proto\_\_就指向了创建它的函数（也就是自己）的prototype。

## 总图 ##

最后，再来一张总的图：

![图片描述][3080079431-5b02b2e259a19_articlex]

通过这张图我们就可以轻松知道：

![图片描述][3712429093-5b02b3098930f_articlex]

![图片描述][2928975319-5b02b325bd688_articlex]

![图片描述][846520675-5b02b34cb40f2_articlex]

再总结一下，函数与对象的关系，看来，最大的boss还是Object.prototype，因为从箭头的进出来看，Object.prototype是没有被谁创造出来的，而其他对象均可以找到创建它的原型对象。

而上面所说的

> 对象都是由函数创建的。
> 
> 一切都是对象，函数也是对象

可能要上升到一个哲学的高度去理解了。但我们却要理解其底层的运行机制，也就是上面的总图。掌握了那张图，对接下来理解原型链，继承非常有帮助（简直就是必须?）。

最后，欢迎大家围观指正！  
参考：[深入理解javascript原型和闭包系列][javascript]

[js]: https://segmentfault.com/a/1190000014958715
[684645282-5b02b2376aa83_articlex]: /images/20220227/64e66a61381840a0ac85a19a7cdde0b9.png
[3026658621-5b02b264d4700_articlex]: /images/20220227/122b6eb40cd245689cf979429fe30b0f.png
[1943014880-5b02b28ccec70_articlex]: /images/20220227/1ab1e76ed9f640eca19879bf46e9d39e.png
[MDN-function]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function
[3080079431-5b02b2e259a19_articlex]: /images/20220227/a0a4c0610b7b4c52ba72dfb20406a411.png
[3712429093-5b02b3098930f_articlex]: /images/20220227/8c778d4f32dc465da211baa45e240701.png
[2928975319-5b02b325bd688_articlex]: /images/20220227/2b290fe6500f4eeb8d2afaadb53c29ac.png
[846520675-5b02b34cb40f2_articlex]: /images/20220227/b81cff6ee97d44029d43387cf24c8523.png
[javascript]: http://www.cnblogs.com/wangfupeng1988/p/4001284.html