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控制输入框内字符串长度
May 21 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
vue 封装面包屑组件教程
Nov 16 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
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
Python 递归函数详解及实例
2016/12/27 Python
浅谈django orm 优化
2018/08/18 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python groupby 函数 as_index详解
2019/12/16 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
ORACLE十问
2015/04/20 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
高考自主招生自荐信
2013/10/20 职场文书
人事档案接收函
2014/01/12 职场文书
20岁生日感言
2014/01/13 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
总经理的岗位职责
2014/02/23 职场文书
卫生主题班会
2015/08/14 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python