理解Javascript_11_constructor实现原理


Posted in Javascript onOctober 18, 2010

constructor是什么

简单的理解,constructor指的就是对象的构造函数。请看如下示例:

function Foo(){}; 
var foo = new Foo(); 
alert(foo.constructor);//Foo 
alert(Foo.constructor);//Function 
alert(Object.constructor);//Function 
alert(Function.constructor);//Function

对于foo.constructor为Foo,我想应该很好理解,因为foo的构造函数为Foo。对于Foo、Object、Function的构造函数为Function,我想也没什么好争议的。(因为Foo,Object,Function都是函数对象,又因为所有的函数对象都是Function这个函数对象构造出来,所以它们的constructor为Function,详细请参考《js_函数对象》)

Prototype与Constructor的关系

function Dog(){} 
alert(Dog === Dog.prototype.constructor);//true

在 JavaScript 中,每个函数都有名为“prototype”的属性,用于引用原型对象。此原型对象又有名为“constructor”的属性,它反过来引用函数本身。这是一种循环引用,如图:
理解Javascript_11_constructor实现原理
constructor属性来自何方
我们来看一下Function构造String的构造过程:
理解Javascript_11_constructor实现原理
注:Function构造任何函数对象的过程都是一样的,所以说不管是String,Boolean,Number等内置对象,还是用户自定义对象,其构造过程都和上图一样。这里String只是一个代表而矣!
图中可以看出constructor是Function在创建函数对象时产生的,也正如'prototype与constructor的关系'中讲的那样,constructor是函数对象prototype链中的一个属性。即String=== String.prototype.constructor。

我还想用一段代码来证明一下,理论是正确的:

function Person(){} 
var p = new Person(); 
alert(p.constructor);//Person 
alert(Person.prototype.constructor);//Person 
alert(Person.prototype.hasOwnProperty('constructor'));//true 
alert(Person.prototype.isPrototypeOf(p));//true 
alert(Object.prototype.isPrototypeOf(p));//true 
alert(Person.prototype == Object.prototype);//false

到现在,你会发现这和前面《原型链的实现原理》中的默认prototype指向Object.prototype有冲突,显然当时的理论不是很全面。

特别的Object
用心的读者可能会提出这样一问题,你这一套理论并不能适用于Object。因为以下的代码和你上面的理论是冲突的:

alert(Object.prototype.hasOwnProperty('constructor'));//true 
alert(Object.prototype.hasOwnProperty('isPrototypeOf'));//true,如果按上面的理论,这里应该返回false

真的是这样吗?不是!那我们来看一下特殊的Object是如何处理的:
理解Javascript_11_constructor实现原理
你会发现,这图的原理和上面一张图的原理是一样的。这就能正确解释Object.prototype.hasOwnProperty('isPrototypeOf')为true!

constructor探究

function Animal(){} 
function Person(){} 
var person = new Person(); 
alert(person.constructor); //Person

根据上一节的内容,你能正确的理解这段代码的结果吗?思考后,看一下其内存表示:
理解Javascript_11_constructor实现原理
这张图明确有表明了Function构造Animal和Person的过程。同时也显示了实例person与Person的关系。

再深入一点,代码如下:

function Animal(){} 
function Person(){} 
Person.prototype = new Animal(); 
var person = new Person(); 
alert(person.constructor); //Animal

这个时候,person的构造函数成了Animal,怎么解释?
理解Javascript_11_constructor实现原理
注:图中的虚线表示Person默认的prototype指向(只作参考的作用)。但是我们将Person.prototype指向了new Animal。
此时,Person的prototype指向的是Animal的实例,所以person的constructor为Animal这个构造函数。

结论:constructor的原理非常简单,就是在对象的原型链上寻找constructor属性。

注:如果你无法正确理解本文内容,请回顾前面章节的内容。

Javascript 相关文章推荐
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
用原生js做单页应用
Jan 17 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
js中作用域的实例解析
Mar 16 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
基于JSON数据格式详解
Aug 31 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 #Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 #Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 #Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 #Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
Oct 17 #Javascript
Javascript读取cookie函数代码
Oct 16 #Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 #Javascript
You might like
smarty模板局部缓存方法使用示例
2014/06/17 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
javascript轮播图算法
2016/10/21 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python实现代理服务功能实例
2013/11/15 Python
Python生成验证码实例
2014/08/21 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
竞职演讲稿范文
2014/01/11 职场文书
个人务虚会发言材料
2014/10/20 职场文书
旷课检讨书范文
2015/01/27 职场文书
教师师德工作总结2015
2015/07/22 职场文书
《所见》教学反思
2016/02/23 职场文书