理解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 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
js匿名函数使用&传参(实例)
Sep 08 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
PHP连接操作access数据库实例
2015/03/30 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
利用js对象弹出一个层
2008/03/26 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
Python实现抢购IPhone手机
2018/02/07 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
九年级历史教学反思
2014/01/27 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
科学育儿宣传标语
2014/10/08 职场文书
欢迎词范文
2015/01/27 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
对学校的意见和建议
2015/06/04 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL
volatile保证可见性及重排序方法
2022/08/05 Java/Android