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写的一个链表实现代码
Oct 25 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
js有序数组的连接问题
Oct 01 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
爆炸式的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程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python内置模块collections知识点总结
2019/12/19 Python
超级实用的8个Python列表技巧
2020/08/24 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
平面设计求职信
2014/03/10 职场文书
技术经济专业求职信
2014/09/03 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
工作简历的自我评价
2019/05/16 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers