其实呢，“函数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之一切皆为对象2的更多相关文章

  1. javascript之一切皆为对象3

    在前面两个章节“Javascript之一切皆为对象1”和“Javascript之一切皆为对象2”中,曾提到: 1.“一切(引用类型)皆为对象” 2. “每个函数都有一个prototype” 3. “每 ...

  2. Javascript之一切皆为对象1

    在javascript的世界里,有这么一句话,一切皆为对象. 但是这个对象,应该怎么理解呢? OMG,难道值类型也是对象?!! 当然,不是. 准确地讲是对于“引用类型”而言. 那,在JavaScrip ...

  3. JavaScript系列----一切皆是对象

    1.判断对象类型 1.1.typeof 运算符 首先要认识到,typepof是一个运算符,其运算需要一个参数,返回值是参数的类型. typeof使用方法 typeof parameter //使用方法 ...

  4. JavaScript进阶知识点——函数和对象详解

    JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...

  5. JavaScript“并非”一切皆对象

    上一篇:<函数声明和函数表达式--函数声明和函数表达式的异同> p{font-size:14px; } 写在前面 网上非常多都在说"JavaScript一切皆对象",那 ...

  6. javascript 核心语言笔记 6 - 对象

    对象是 JavaScript 的基本数据类型.是一种复合值:将很多值聚合在一起.对象可以看做是无序集合,每个属性都是一个名/值对.这种基本数据结构还有很多叫法,比如「散列」(hash).「散列表」(h ...

  7. （转载）JavaScript中的原型和对象机制

    (转载)http://www.cnblogs.com/FlyingCat/archive/2009/09/21/1570656.html 1 对象相关的一些语言特性 1.1 一切皆为对象JavaScr ...

  8. 03.JavaScript 面向对象精要--理解对象

    JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...

  9. JavaScript中的原型和对象机制

    1.对象相关的一些语言特性 JavaScript里所有的东西都是对象, 对象是属性的集合.要知道,函数也是对象, 能够作为变量的值. 返回值. 参数或者属性的值. 函数对象特殊的地方是能通过" ...

随机推荐

  1. github for windows 安装 使用

    遇到无数的未知问题.光是安装就搞了好久. 安装程序显示安装了.NET Framework4.5,然后提示重启.重启后,自动开始下载文件,最多到2%就走不动了. 后来请求了下面这个链接,才开始下载了(虽 ...

  2. Jsonp原理就是这么简单

    原理就是:包裹数据的js数据文件,自动执行,找到目标函数,通过传参,把数据注入进去. 当你打开本篇博文,证明你已经大体知道了Jsonp的作用了. 但如果需要我介绍一下,我也可以简单介绍: 简单说,就是 ...

  3. @Autowired

    1. Spring框架中进行注入式,使用@Autowired. @Autowired可以对成员变量.方法和构造函数进行标注,来完成自动装配的工作,这里必须明确:@Autowired是根据类型进行自动装 ...

  4. sql查询重复数据

    select *from Awhere id in (select id from A group by id having count(1) >= 2) 注释:id 为重复的关键字(更换成所需 ...

  5. 【转】stopPropagation, preventDefault 和 return false 的区别

    因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是  stopPropagat ...

  6. 浏览器兼容性-JS篇

    总结一下平时遇到的浏览器兼容性问题,本篇关于JS. 1.事件绑定 兼容写法: function add(obj,event){ if (obj.addEventListener) { obj.addE ...

  7. 利用闭包实现多次ajax请求只执行最后一次

    点一个按钮,则向服务器请求资源,不作处理时,多次点击后会有很多个请求在等待.我们知道一般我们用ajax是异步请求,那么我们快速重复点击一个按钮得到的结果其实我们并不知道是哪次点击的结果可能是第一次可能 ...

  8. Windows下搭建Spark+Hadoop开发环境

    Windows下搭建Spark+Hadoop开发环境需要一些工具支持. 只需要确保您的电脑已装好Java环境,那么就可以开始了. 一. 准备工作 1. 下载Hadoop2.7.1版本(写Spark和H ...

  9. Unity自动寻路入门指南

    所有用于成为NavMesh的网格都必须被指定为 Navigation Static . 方法如下,选中GameObject,然后在菜单栏的[Window]-[Navigation]-[Object]- ...

  10. Unity自动寻路Navmesh之入门

    实例 我们要实现一个功能:点击场景中的一个位置,角色可以自动寻路过去.角色会绕过各种复杂的障碍,找到一条理论上”最短路径“. 步骤 1.创建地形 2.添加角色 3.创建多个障碍物,尽量摆的复杂一点,来 ...