理解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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php去除数组中重复数据
2014/11/18 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Python分类测试代码实例汇总
2020/07/23 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
个人先进材料范文
2014/12/30 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
2019各种承诺书范文
2019/06/24 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
python tkinter实现定时关机
2021/04/21 Python