理解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 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
原生js实现五子棋游戏
May 28 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下载文件的代码示例
2012/06/29 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
JS实现横向轮播图(中级版)
2020/01/18 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
django 自定义用户user模型的三种方法
2014/11/18 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
Python函数基本使用原理详解
2020/03/19 Python
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
类和结构的区别
2012/08/15 面试题
Python如何定义一个函数
2015/09/01 面试题
手术室护士自我鉴定
2013/10/14 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
公司门卫岗位职责
2014/03/15 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
英文辞职信范文
2015/05/13 职场文书
python前后端自定义分页器
2022/04/13 Python