其实呢,“函数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. Golang之chan/goroutine(转)

    原文地址:http://tchen.me/posts/2014-01-27-golang-chatroom.html?utm_source=tuicool&utm_medium=referra ...

  2. Tomcat7安装配置 for Ubuntu

    一.环境说明: 操作系统:Ubuntu 12.04.2 LTS Tomcat:apache-tomcat-7.0.52 二.下载 下载地址:http://tomcat.apache.org/ 这里下载 ...

  3. Java Hashtable的实现

    先附源码: package java.util; import java.io.*; /** * This class implements a hash table, which maps keys ...

  4. perl 切换 dnspod 域名记录

    提供域名,dnspod 账户密码(毕竟dns密码比较重要 不能谁 cat一下都可以看到 需要base64加密),原IP,切换目标IP, #!/bin/perl use warnings; use MI ...

  5. 字符串混淆技术应用 设计一个字符串混淆程序 可混淆.NET程序集中的字符串

    关于字符串的研究,目前已经有两篇. 原理篇:字符串混淆技术在.NET程序保护中的应用及如何解密被混淆的字符串  实践篇:字符串反混淆实战 Dotfuscator 4.9 字符串加密技术应对策略 今天来 ...

  6. Why MVC is Better?(翻译)

    (本文翻译自CodeProject上的一篇关于ASP.NET MVC的文章,原文地址:http://www.codeproject.com/Articles/821275/Webforms-vs-MV ...

  7. [.net 面向对象程序设计进阶] (24) 团队开发利器(三)使用SVN多分支并行开发(下)

    [.net 面向对象程序设计进阶] (24) 团队开发利器(三)使用SVN多分支并行开发(下) 本篇导读: 接上篇继续介绍SVN的高级功能,即使用分支并行开发.随着需求的不断变更,新功能的增加.特别是 ...

  8. java中文乱码解决之道(二)-----字符编码详解:基础知识 + ASCII + GB**

    在上篇博文(java中文乱码解决之道(一)-----认识字符集)中,LZ简单介绍了主流的字符编码,对各种编码都是点到为止,以下LZ将详细阐述字符集.字符编码等基础知识和ASCII.GB的详情. 一.基 ...

  9. iOS block种类和切换

    block 分为三种 NSGlobalBlock,NSStackBlock, NSMallocBlock. NSGlobalBlock:类似函数,位于text段: NSStackBlock:位于栈内存 ...

  10. Sharing A Powerful Tool For Application Auto Monitor

    本文分享的这个应用监控小工具,本来是我在五年多以前开发实现的windows服务监控的一个windows服务.听上去比较拗口吧,是的,这个应用一开始就是个监控windows服务的windows服务. 记 ...