javascript之一切皆为对象2
其实呢，“函数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之一切皆为对象2的更多相关文章
- javascript之一切皆为对象3
在前面两个章节“Javascript之一切皆为对象1”和“Javascript之一切皆为对象2”中,曾提到: 1.“一切(引用类型)皆为对象” 2. “每个函数都有一个prototype” 3. “每 ...
- Javascript之一切皆为对象1
在javascript的世界里,有这么一句话,一切皆为对象. 但是这个对象,应该怎么理解呢? OMG,难道值类型也是对象?!! 当然,不是. 准确地讲是对于“引用类型”而言. 那,在JavaScrip ...
- JavaScript系列----一切皆是对象
1.判断对象类型 1.1.typeof 运算符 首先要认识到,typepof是一个运算符,其运算需要一个参数,返回值是参数的类型. typeof使用方法 typeof parameter //使用方法 ...
- JavaScript进阶知识点——函数和对象详解
JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...
- JavaScript“并非”一切皆对象
上一篇:<函数声明和函数表达式--函数声明和函数表达式的异同> p{font-size:14px; } 写在前面 网上非常多都在说"JavaScript一切皆对象",那 ...
- javascript 核心语言笔记 6 - 对象
对象是 JavaScript 的基本数据类型.是一种复合值:将很多值聚合在一起.对象可以看做是无序集合,每个属性都是一个名/值对.这种基本数据结构还有很多叫法,比如「散列」(hash).「散列表」(h ...
- （转载）JavaScript中的原型和对象机制
(转载)http://www.cnblogs.com/FlyingCat/archive/2009/09/21/1570656.html 1 对象相关的一些语言特性 1.1 一切皆为对象JavaScr ...
- 03.JavaScript 面向对象精要--理解对象
JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...
- JavaScript中的原型和对象机制
1.对象相关的一些语言特性 JavaScript里所有的东西都是对象, 对象是属性的集合.要知道,函数也是对象, 能够作为变量的值. 返回值. 参数或者属性的值. 函数对象特殊的地方是能通过" ...
随机推荐
- java 测试：iterator foreach for 三种迭代方式哪种更快？
代码: public class main { public static void main(String[] p_args){ ArrayList<String> _l_string ...
- ubuntu 16.04 Dockerfile 安装mysql
默认上MariaDB的包并没有在Ubuntu仓库中.要安装MariaDB,我们首先要设置MariaDB仓库. 配置MariaDB 仓库 # apt-get install software-prope ...
- HTML元素基础学习
HTML元素 HTML文档是由HTML元素定义的.HTML元素是指从start tag(opening tag)到end tag(closing tag)的所有代码,即start tag + cont ...
- Erlang error handling
Erlang error handling Contents Preface try-catch Process link Erlang-way error handling OTP supervis ...
- Nodejs Promise的一点记录
项目需要,看了点nodejs,其中比较难理解的就是Promise了,记录一下学习bluebird提供的Promise实现. Promise.promisifyAll(obj)方法 作用:把对象的方法属 ...
- Ubuntu14.04或16.04下安装JDK1.8+Scala+Hadoop2.7.3+Spark2.0.2
为了将Hadoop和Spark的安装简单化,今日写下此帖. 首先,要看手头有多少机器,要安装伪分布式的Hadoop+Spark还是完全分布式的,这里分别记录. 1. 伪分布式安装 伪分布式的Hadoo ...
- CSS3总结
1.圆角效果 border-radius: 1px 1px 1px 1px; /* 四个半径值分别是左上角.右上角.右下角和左下角.顺时针 */ 右边半圆 div.right-circle{ hei ...
- *HDU 1757 矩阵乘法
A Simple Math Problem Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- Altium Designer之AD16在Win10系统下无法切换走线/布线模式的解决办法
有些童鞋会在Win10下使用AD16的时候发现,走线模式/布线模式(切换直角,45°,弧形等)不能切换. 问题出在输入法上,一般是切换到英文输入法即可解决,但是有一种情况是win10系统自带输入法有时 ...
- java面向对象_构造器
构造器(构造方法):是类中定义的方法. 1)常常用于给成员变量赋值: 2)与类同名,没有返回值类型,也不能写void: 3)在创建对象时被自动调用.所以构造方法的访问修饰符要用public,才能被自动 ...