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 07 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
基于Vue中的父子传值问题解决
Jul 27 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学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php日历制作代码分享
2014/01/20 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
Python中标准模块importlib详解
2017/04/16 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python中的heapq模块源码详析
2019/01/08 Python
Python实现DDos攻击实例详解
2019/02/02 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
工作总结与自我评价
2014/09/18 职场文书
党建工作汇报材料
2014/12/24 职场文书
机器人总动员观后感
2015/06/09 职场文书
少年雷锋观后感
2015/06/10 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android