深入分析js中的constructor 和prototype
在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要。
我们在定义函数的时候,函数定义的时候函数本身就会默认有一个prototype的属性,而我们如果用new 运算符来生成一个对象的时候就没有prototype属性。我们来看一个例子,来说明这个

function a(c){
this.b = c;
this.d =function(){
alert(this.b);
}
}
var obj = new a('test');
alert(typeof obj.prototype);//undefine
alert(typeof a.prototype);//object

从上面的例子可以看出函数的prototype 属性又指向了一个对象,这个对象就是prototype对象,请看下图

a.prototype 包含了2个属性,一个是constructor ,另外一个是__proto__
这个constructor 就是我们的构造函数a,这个也很容易理解。
那么__proto__ 是什么呢?
这个就涉及到了原型链的概念:
每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去。
请看mozzlia 对它对它的描述
When an object is created, its __proto__ property is set to constructing function's prototype property. For example var fred = new Employee(); will cause fred.__proto__ = Employee.prototype;.
This is used at runtime to look up properties which are not declared in the object directly. E.g. when fred.doSomething() is executed and fred does not contain adoSomething, fred.__proto__ is checked, which points to Employee.prototype, which contains a doSomething, i.e. fred.__proto__.doSomething() is invoked.
Note that __proto__ is a property of the instances, whereas prototype is a property of their constructor functions.
不管你信不信,我们来看图
在后面如果加上 alert(obj.__proto__ === a.prototype) //true
同理,在这里我们来分析出new 运算符做了那些事情
- var obj={}; 也就是说,初始化一个对象obj。
- obj.__proto__=a.prototype;
- a.call(obj);也就是说构造obj,也可以称之为初始化obj。
我们将这个例子改造一些,变得复杂一点。

function a(c){
this.b = c;
this.d =function(){
alert(this.b);
}
}
a.prototype.test = function(){
alert(this.b);
}
var obj = function (){}
obj.prototype = new a('test');
obj.prototype.test1 =function(){
alert(22222);
}
var t = new obj('test');
t.test();//alert('test');

我们来分析下这个过程
由 var t = new obj('test'); 我们可以得到 t.__proto__ = obj.prototype,但是上面指定obj.prototype =new a('test'); 可以这样来看下
obj.prototype = p, p = new a('test'); p.__proto__ = a.prototype;
那么obj.prototype.__proto__ = a.prototype,由 t.__proto__ = obj.prototype 可以得出 t.__proto__.__proto__ = a.prototype,
所以对象t先去找本身是的prototype 是否有test函数,发现没有,结果再往上级找,即 t.__proto__ ,亦即obj.prototype 寻找test函数 ,但是obj.prototype 也没有这个函数,然后再往上找。即
t.__proto__.__proto__ 找,由于t.__proto__.__proto__ = a.prototype 在 a.prototype 中找到了这个方法,输出了alert('test')
从这里可以分析得出一个结论,js中原形链的本质在于 __proto__
再看看一个列子

function a(c){
this.b = c;
this.d =function(){
alert(this.b);
}
}
var obj = new a('test');
alert(obj.constructor);//function a(){}
alert(a.prototype.constructor);//function a(){}

根据上面讲到的__proto__ 我们来分析下,首先obj是没有constructor 这个属性的,但是 obj.__proto__ = a.prototype;就从
a.prototype中寻找,而 a.prototype.constructor 是就a,所有两者的结果是一一样的.
转自:http://www.cnblogs.com/yupeng/archive/2012/04/06/2435386.html
深入分析js中的constructor 和prototype的更多相关文章
- 分析js中的constructor 和prototype
在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...
- 【JavaScript】关于JS中的constructor与prototype
最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...
- 【推荐】关于JS中的constructor与prototype【转】
最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...
- JS中的constructor与prototype
http://www.cnblogs.com/qiantuwuliang/archive/2011/01/08/1930548.html 在学习JS的面向对象过程中,一直对constructor与pr ...
- 关于JS中的constructor与prototype
======================================================================== 在学习JS的面向对象过程中,一直对constructo ...
- JS中的constructor 和 prototype
object.constructor :对象的constructor 属性引用了该对象的构造函数. //例如,用Array()构造函数创建了一个数组,那么a.constructor 引用的就是Arra ...
- js中的constructor 和prototype
参考 http://www.cnblogs.com/yupeng/archive/2012/04/06/2435386.html function a(c){ this.b = c; this.d = ...
- js中关于constructor与prototype的理解
1.①__proto__和constructor属性是对象所独有的:② prototype属性是函数所独有的,因为函数也是一种对象,所以函数也拥有__proto__和constructor属性. 2. ...
- 关于JS中的constructor与prototype{转}
http://www.cnblogs.com/qiantuwuliang/archive/2011/01/08/1930548.html http://www.cnblogs.com/yupeng/a ...
随机推荐
- file_get_contents微信头像等待时间过长的原因
UPDATE 2016/05/13 stackoverflow上的解决方法:http://stackoverflow.com/questions/3629504/php-file-get-conten ...
- centos7 gradle
cd /usr/local wget https://downloads.gradle.org/distributions/gradle-2.13-bin.zip unzip gradle-2.13- ...
- Tomcat 配置 默认应用 (去掉项目名称、移除项目名称)
Tomcat 配置默认应用,即只输入域名或ip,不用输入项目名称: <Host name="localhost" appBase="webapps" un ...
- MySQL数据库一个字段对应多个值得模糊查询
当一个字段想模糊查询出多个字段的时候,正常情况下一般会这么作 select * from a where name like 'a%' or name like 'b%' ....or ...; 但是 ...
- 关于web2py外网访问,图形界面不显示等问题的解决办法
首先系统版本是ubuntu 15.04,系统默认安装了两个版本的python, sudo python web2py.py 默认会调用python2.7版本来执行 会提示 pydo@planpls:/ ...
- <开心一笑> 前端工程师你们伤不起!
前端工程师你们伤不起!! 来自: 刻铭 2011-03-11 14:09:53 前端工程师伤不起 老子几年前进了互联网圈!!!!!!!成了前端工程师,名字是不是很拉风,有木有!!!!!!!! 尼玛 ...
- STM32学习笔记(六) SysTick系统时钟滴答实验(stm32中断入门)
系统时钟滴答实验很不难,我就在面简单说下,但其中涉及到了STM32最复杂也是以后用途最广的外设-NVIC,如果说RCC是实时性所必须考虑的部分,那么NVIC就是stm32功能性实现的基础,NVIC的难 ...
- 如何myEclipse修改工程项目的运行环境和编译环境
修改工程运行环境(开发环境)JRE 右击工程名-----选择properties----选择对话框左侧的java build path----查看使用的JRE 选择Library选项卡中的,选中使用中 ...
- thinkphp下载远程图片到本地
$url="http://www.test.com/test.jpg";//图片远程地址 $local="./Upload/test/test.jpg";//下 ...
- Java 并发和多线程(二) 多线程的优点 [转]
原文:http://tutorials.jenkov.com/java-concurrency/benefits.html 作者:Jakob Jenkov 翻译:古圣昌 ...