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 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
js仿微博动态栏功能
Feb 22 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 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文件上传表单摘自drupal的代码
2011/02/15 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
python实现停车管理系统
2018/11/30 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
python+requests接口自动化框架的实现
2020/08/31 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
入股协议书范本
2014/04/14 职场文书
新文化运动的口号
2014/06/21 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
2016教师节感恩话语
2015/12/09 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
详解Python函数print用法
2021/06/18 Python
详解非极大值抑制算法之Python实现
2021/06/28 Python