理解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语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
node.js中watch机制详解
Nov 17 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
JS实现图片切换特效
Dec 23 Javascript
vue实现分页的三种效果
Jun 23 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中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
php fread读取文件注意事项
2016/09/24 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
基于Python的接口测试框架实例
2016/11/04 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
python logging模块的使用
2020/09/07 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
不假外出检讨书
2014/01/27 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
文明演讲稿范文
2014/05/12 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
廉洁教育学习材料
2014/05/19 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python