理解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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
jQuery的三种$()
Dec 30 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
jquery队列函数用法实例
Dec 16 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
Openlayers学习之加载鹰眼控件
Sep 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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php生成随机密码的几种方法
2011/01/17 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
php表单处理操作
2017/11/16 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
python如何使用unittest测试接口
2018/04/04 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
七匹狼男装广告词
2014/03/21 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
教师调动申请报告
2015/05/18 职场文书
反邪教观后感
2015/06/11 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
python实现双向链表原理
2022/05/25 Python