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 相关文章推荐
jquery 最简单易用的表单验证插件
Feb 27 Javascript
JavaScript中的关键字"VAR"使用详解 分享
Jul 31 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
JavaScript异步操作中串行和并行
Nov 20 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中inlcude()性能对比详解
2012/09/16 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
使用Python实现简单的服务器功能
2017/08/25 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
居委会四风问题个人对照检查材料
2014/09/25 职场文书
依法行政工作汇报
2014/10/28 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
在Docker容器中部署SQL Server
2022/04/11 Servers
Tomcat配置访问日志和线程数
2022/05/06 Servers