JavaScript类和继承 constructor属性


Posted in Javascript onMarch 04, 2010

constructor属性始终指向创建当前对象的构造函数。比如下面例子:比如下面例子:

// 等价于 var foo = new Array(1, 56, 34, 12); 
var arr = [1, 56, 34, 12]; 
console.log(arr.constructor === Array); // true 
// 等价于 var foo = new Function(); 
var Foo = function() { }; 
console.log(Foo.constructor === Function); // true 
// 由构造函数实例化一个obj对象 
var obj = new Foo(); 
console.log(obj.constructor === Foo); // true 
// 将上面两段代码合起来,就得到下面的结论 
console.log(obj.constructor.constructor === Function); // true

但是当constructor遇到prototype时,有趣的事情就发生了。
我们知道每个函数都有一个默认的属性prototype,而这个prototype的constructor默认指向这个函数。如下例所示:
function Person(name) { 
this.name = name; 
}; 
Person.prototype.getName = function() { 
return this.name; 
}; 
var p = new Person("ZhangSan"); 
console.log(p.constructor === Person); // true 
console.log(Person.prototype.constructor === Person); // true 
// 将上两行代码合并就得到如下结果 
console.log(p.constructor.prototype.constructor === Person); // true

当时当我们重新定义函数的prototype时(注意:和上例的区别,这里不是修改而是覆盖),constructor属性的行为就有点奇怪了,如下示例:
function Person(name) { 
this.name = name; 
}; 
Person.prototype = { 
getName: function() { 
return this.name; 
} 
}; 
var p = new Person("ZhangSan"); 
console.log(p.constructor === Person); // false 
console.log(Person.prototype.constructor === Person); // false 
console.log(p.constructor.prototype.constructor === Person); // false

为什么呢?
原来是因为覆盖Person.prototype时,等价于进行如下代码操作:
Person.prototype = new Object({ 
getName: function() { 
return this.name; 
} 
});

而constructor属性始终指向创建自身的构造函数,所以此时Person.prototype.constructor === Object,即是:
function Person(name) { 
this.name = name; 
}; 
Person.prototype = { 
getName: function() { 
return this.name; 
} 
}; 
var p = new Person("ZhangSan"); 
console.log(p.constructor === Object); // true 
console.log(Person.prototype.constructor === Object); // true 
console.log(p.constructor.prototype.constructor === Object); // true

怎么修正这种问题呢?方法也很简单,重新覆盖Person.prototype.constructor即可:
function Person(name) { 
this.name = name; 
}; 
Person.prototype = new Object({ 
getName: function() { 
return this.name; 
} 
}); 
Person.prototype.constructor = Person; 
var p = new Person("ZhangSan"); 
console.log(p.constructor === Person); // true 
console.log(Person.prototype.constructor === Person); // true 
console.log(p.constructor.prototype.constructor === Person); // true
Javascript 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
JS前端笔试题分析
Dec 19 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 #Javascript
js 编写规范
Mar 03 #Javascript
jquery validation插件表单验证的一个例子
Mar 03 #Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 #Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 #Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 #Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 #Javascript
You might like
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
Vue指令指令大全
2019/02/09 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
Python 文件读写操作实例详解
2014/03/12 Python
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python读取excel表格生成erlang数据
2017/08/26 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
新年联欢会主持词
2014/03/27 职场文书
大学生党员承诺书
2014/05/20 职场文书
演讲比赛策划方案
2014/06/11 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
北京天坛导游词
2015/02/12 职场文书
培训计划通知
2015/07/15 职场文书
升职自荐书
2019/05/09 职场文书
详解Python常用的魔法方法
2021/06/03 Python
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
SQLServer常见数学函数梳理总结
2022/08/05 MySQL