理解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中获取未知对象属性的代码
Apr 27 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
webpack3之loader全解析
Oct 26 Javascript
js动态引入的四种方法
May 05 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 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-timeit估计php函数的执行时间
2015/09/06 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
Python读写docx文件的方法
2018/05/08 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
python config文件的读写操作示例
2019/09/27 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
大学旷课检讨书
2014/01/28 职场文书
岗位职责说明书
2014/05/07 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
2014年电厂工作总结
2014/12/04 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
中学总务处工作总结
2015/08/12 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript