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 15 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
爆炸式的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的十大要点(上)
2009/02/04 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
HTML的form表单和django的form表单
2019/07/25 Python
使用python绘制二维图形示例
2019/11/22 Python
Python configparser模块常用方法解析
2020/05/22 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
幼儿园园长岗位职责
2013/11/26 职场文书
教师自我评价范文
2013/12/16 职场文书
老人祝寿主持词
2014/03/28 职场文书
差生评语大全
2014/05/04 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
经典毕业生求职信
2014/07/12 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python