理解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 相关文章推荐
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
搭建vue开发环境
Jul 19 Javascript
vue开发拖拽进度条滑动组件
Sep 21 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php基础知识:类与对象(5) static
2006/12/13 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
python解包用法详解
2021/02/17 Python
CSS3 边框效果
2019/11/04 HTML / CSS
魅力教师事迹材料
2014/01/10 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2015新学期家长寄语
2015/02/26 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
教师教育教学随笔
2015/08/15 职场文书
《社戏》教学反思
2016/02/22 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript