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调试工具(下载)
Jan 09 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
php微信开发之谷歌测距
2018/06/14 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
JS跨域总结
2012/08/30 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
canvas知识总结
2017/01/25 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
思想作风建设心得体会
2014/10/22 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
理想国读书笔记
2015/06/25 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python