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停止输出代码
Jul 20 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 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 批量更新网页内容实现代码
2010/01/05 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
python删除过期文件的方法
2015/05/29 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
python matplotlib拟合直线的实现
2019/11/19 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
会计实习生自我鉴定
2013/12/12 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
商铺门前三包责任书
2014/07/25 职场文书
房屋维修协议书范本
2014/09/25 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
入伍通知书
2015/04/23 职场文书
高三化学教学反思
2016/02/22 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL