理解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 相关文章推荐
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
jquery操作angularjs对象
Jun 26 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
Vue 打包后相对路径的引用问题
Jun 05 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
Express的路由详解
2015/12/10 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python3音乐播放器简单实现代码
2020/04/20 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python读取csv文件实例解析
2019/12/30 Python
python 如何停止一个死循环的线程
2020/11/24 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
大学生年度自我鉴定
2013/10/31 职场文书
2014年市场部工作总结
2014/11/25 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
nginx实现动静分离的方法示例
2021/11/07 Servers
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers