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 radio 联动效果
Mar 04 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
js判断是否是手机页面
Mar 17 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
原生JS实现九宫格抽奖
Sep 13 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基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
prototype1.4中文手册
2006/09/22 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
loading动画特效小结
2017/01/22 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python opencv实现运动检测
2018/07/10 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
python小项目之五子棋游戏
2019/12/26 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
SQL Server面试题
2016/10/17 面试题
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
构造方法和其他方法的区别
2016/04/26 面试题
Java基础类库面试题
2013/09/04 面试题
音乐专业应届生教师求职信
2013/11/04 职场文书
自荐信格式简述
2014/01/25 职场文书
材料加工工程求职信
2014/02/19 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书