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 处理URL实用技巧
Nov 23 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
canvas实现图像放大镜
Feb 06 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
Vue声明式渲染详解
May 17 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
Vue加载json文件的方法简单示例
Jan 28 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限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python出现segfault错误解决方法
2016/04/16 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python中使用print输出中文的方法
2018/07/16 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Python 里最强的地图绘制神器
2021/03/01 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
演讲稿怎么写
2014/01/07 职场文书
顶碗少年教学反思
2014/02/21 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
离婚协议书范本2014
2014/10/27 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
幸福终点站观后感
2015/06/04 职场文书
二十年同学聚会感言
2015/07/30 职场文书
初一年级组工作总结
2015/08/12 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python