理解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函数
May 27 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
jQuery中extend函数详解
Jul 13 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
关于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-MySQL教程归纳总结
2008/06/07 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
django中的ajax组件教程详解
2018/10/18 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
python 排列组合之itertools
2013/03/20 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
机电一体化职业规划书
2014/01/07 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
大学同学会活动方案
2014/08/20 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书