理解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对象的函数
Dec 22 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
浅谈JS的二进制家族
May 09 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
解析ajax事件的调用顺序
2013/06/17 PHP
php cli换行示例
2014/04/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
php异常处理捕获错误整理
2019/09/23 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python实现装饰器、描述符
2018/02/28 Python
python如何使用unittest测试接口
2018/04/04 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
食品安全承诺书
2014/05/22 职场文书
法定代表人身份证明书
2014/09/10 职场文书
借款协议书
2014/09/16 职场文书
优秀党支部申报材料
2014/12/24 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python