Javascript之一切皆为对象1全屏模式 2016-02-21 11:09 by 猴子猿, 1318 阅读, 2 评论, 收藏, 编辑在javascript的世界里，有这么一句话，一切皆为对象。

来源：互联网发布：李银桥和权延赤知乎编辑：程序博客网时间：2024/06/08 18:36

Javascript之一切皆为对象1全屏模式

2016-02-21 11:09 by 猴子猿, 1318 阅读, 2 评论, 收藏, 编辑

在javascript的世界里，有这么一句话，一切皆为对象。

但是这个对象，应该怎么理解呢？

OMG，难道值类型也是对象？！！

当然，不是。

准确地讲是对于“引用类型”而言。

那，在JavaScript的世界里，怎么区分“值类型”和“引用类型”呢？

哟呼，答案：typeof。

让我们一起写个demo，猜猜看typeofShow()会输出哪些结果。

<!DOCTYPE html>    <head>        <title>javascript</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    </head>    <body>        <script>            function typeofShow(){                console.log( typeof x );                console.log( typeof 1 );                console.log( typeof '' );                console.log( typeof true );                console.log( typeof function(){} );                console.log( typeof [] );                console.log( typeof {} );                console.log( typeof null );                console.log( typeof new Number(1) );            }            typeofShow();        </script>    </body></html>

运行上面代码，打开chrome调试，得下效果图，你猜对了么？

从上图，可以看出，除开“值类型”，typeof输出的其他都是function和object，即“引用类型”。

但是刚才不是说到，引用类型都是对象么。。那typeof function(){} 输出的怎么是function，而不是object呢？

function到底是不是对象呢？

答案：function也是对象的，不信，我们利用instanceof来检验检验。

<!DOCTYPE html>    <head>        <title>javascript</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    </head>    <body>        <script>            function test(){};            console.log( test instanceof Object);        </script>       </body></html>

下面是运行结果图

或者还记得函数function还有一种写法么,如下

var fn = new Function(“x”, “y”, “return x+ y ”);

嘿嘿，这会信了吧。

通常的对象，一般是利用键值对表示的，例如下面这样：

var obj = {    one:[],    two:'',    three: function(){},    four:{        four1:''    }}

你会问，那数组和函数不也是对象吗，他们也可以这样表示咯？

当然不可以，但它们可以采用另一种形式。如函数，可以这样：

function fn(){}fn.a=[];fn.b=function(){}

总之，在javascript的世界里，对象就是属性的集合。

咦，我勒个去，前面好像，有哪里不对？！！

既然function是对象，那为什么typeof function(){}要输出function，而不是object呢？

详情且听下回“Javascript之一切皆为对象2”。

如果喜欢本文，请点击右下角的推荐哦，谢谢~

javascript之一切皆为对象2全屏模式

2016-02-21 17:14 by 猴子猿, 724 阅读, 9 评论, 收藏, 编辑

其实呢，“函数function”和“对象object”之间还有这么一句话：对象是通过函数来创建的，而函数却又是一种对象。

这个函数是一种对象，上节中“Javascript之一切皆为对象1”也清楚的阐述了。

但这个对象又是通过函数来创建的，咳咳，似乎在平时代码中也是哈。

请看下面代码

function Fn(){}var fn =new Fn();

你可能会说，哥们，不对吧，不是我们也曾写过如下代码吗！！

var obj = {};

哈，是的哈。

但是，还记得么？

以上代码，其本质是这样的：

var obj = new Object();

咦，好吧，我承认是这样的，但是它为什么会这么设置呢？

prototype。

prototype?

对，还记得大明湖畔的原型链么。。。

每个函数都有一个prototype属性，且prototype是一个对象。

当我们通过函数function，(new)创建一个对象时，创建的对象的隐指针__proto__，就指向这个函数的prototype对象。

?!!在说什么。见下图：

上图中，中间是函数Fn，函数Fn有一个prototype对象，prototype对象中，又必须有，且自带一个constructor属性，它又是指向函数Fn本身的，“其他属性”的意思是你自己可以通过prototype对象扩展属性，当函数Fn构建好后，你可以通过new这个函数Fn，创建对象，如上图中左边的fn、fn1，创建的对象，自带一个隐指针__proto__，它是指向函数Fn中的prototype，所以创建的所有对象的__proto__，是同时指向创建它的函数Fn的prototype对象啦。

有点没看懂？

么关系，我们一起来写个demo，一步步理解。

首先，我们一起编写一个函数Fn，并给这个函数Fn的prototype分配两个属性name和age，具体代码如下：

<!DOCTYPE html>    <head>        <title>ttt</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    </head>    <body>        <script>            function Fn(){ }            Fn.prototype.name = 'monkey';            Fn.prototype.age = 24;            console.log(Fn.prototype);        </script>    </body></html>

通过chrome调试器，可得下结果图

大家可以看见我利用console.log(Fn.prototype)，是输出了age和name，但还有constructor和__proto__，我代码中是没有写的，所以是prototype自带的。

constructor倒好理解了，但它怎么会有个__proto__呢？

你上面不是说每个对象才有__proto__吗？

是的，这个prototype也是对象哦，不要忘啦。

prototype的__proto__从上图可知，是指向Object，修改上面的流程图，可得下图

接下来，我们再通过函数Fn，来创建两个对象fn和fn1，代码如下

<!DOCTYPE html>    <head>        <title>ttt</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    </head>    <body>        <script>            function Fn(){ }            Fn.prototype.name = 'monkey';            Fn.prototype.age = 24;            var fn = new Fn();            var fn1 = new Fn();            console.log( fn.prototype );            console.log( fn1.prototype );        </script>    </body></html>

通过chrome调试器，效果图如下

咦，怎么是undefined呢？！！

哈哈哈，仔细看我上面的代码，我console的是对象fn和fn1的prototype哦！只有函数才有prototype，对象只有隐指针__proto__哦，它是指向函数Fn的prototype的哈。

修改代码，通过chrome调试器的效果图如下:

它们的__proto__都是指向创建它们的Fn的prototype的哈，且是同一个。这也就好理解了，为什么它们是共享Fn的prototype了哈。

Javascript之一切皆为对象3

如果喜欢本文，请点击右下角的推荐哦，谢谢~

javascript之一切皆为对象3全屏模式

2016-02-21 23:18 by 猴子猿, 914 阅读, 11 评论, 收藏, 编辑

在前面两个章节“Javascript之一切皆为对象1”和“Javascript之一切皆为对象2”中，曾提到：

1、“一切（引用类型）皆为对象”

2、 “每个函数都有一个prototype”

3、 “每个对象都有一个__proto__”

那么，问题来了，在随笔“Javascript之一切皆为对象2”中，不是有下图么

那，根据“一切（引用类型）皆为对象”，图中的函数Fn不也是对象吗？

那它也有__proto__，那么它是指向谁的呢？！！

答案：Function.prototype

为什么这么说呢？

因为函数Fn不是通过Function创建的么

所以Fn.__proto__指向的是Function.prototype。

不信？

我们一起写个demo并运行代码，证实下。打开chrome调试器截图如下。

 View Code

我靠，这是什么鬼！！

我只想说，应该是浏览器(我的chrome浏览器版本是48)还不支持Function.prototype吧。

那，怎么证明你上面所说的Fn.__proto__指向的是Function.prototype呢？

这样，我们知道prototype有个属性constructor吧，它是指向函数本身的，所以呢，倘若Fn.__proto__指向的是Function.prototype，那么Fn.__proto__.constructor就是指向的Function咯。

所以只要我们验证Fn.__proto__.constructor指向的是Function，那么就可以得出Fn.__proto__指向的是Function.prototype了哈。

demo和chrome截图如下

 View Code

哈哈，从上面的截图可以看出Fn.__proto__.constructor的确指向的是Function，所以这会信了吧，Fn.__proto__指向的是Function.prototype。

所以修改上面的流程图，得下（为了结构更加清晰，我们将上图中的fn1对象删除，只留一个fn对象）：

咦，看了改造后的流程图，有个疑问，Function不也是个对象么，那它的__proto__指向谁呢？

答案：它自己的prototype。

何出此言？

因为Function也是个函数，所以它一定是被Function创建的，即它自身，因此，它的__proto__指向的是Function.prototype。

在上面，我们知道了Fn.__proto__.constructor是指向的Function的，那么倘若要证实Function.__proto__是指向的Function.prototype，只要Function.__proto__.constructor指向的是Function就欧克啦，即Fn.__proto__.constructor.__proto__.constructor指向的是Function。

代码和截图如下：

 View Code

看来Function.__proto__的确是指向的Function.prototype。

根据Javascript 之一切皆为对象2中，提到prototype也是对象，所以Function.prototype也有__proto__，且指向的是Object.prototype。

从上面，我们知道Fn.__proto__指向的是Function.prototype，所以我们检查Function.prototype.__proto__是不是指向的Object.prototype，也就是看看Fn.__proto__.__proto__是不是指向的Object.prototype咯。

验证代码和截图如下：