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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
告诉大家什么是JSON
Jun 10 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
原生JS实现留言板功能
Feb 08 Javascript
JavaScript实现贪吃蛇游戏
Jun 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学习之PHP运算符
2006/10/09 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
js给selected添加options的方法
2015/05/06 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
简单了解python单例模式的几种写法
2019/07/01 Python
用python实现学生管理系统
2020/07/24 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
环保建议书200字
2014/05/14 职场文书
服务口号大全
2014/06/11 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
公司委托书格式
2014/08/01 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang