深入浅析JavaScript中的constructor


Posted in Javascript onApril 19, 2016

定义和用法

constructor 属性返回对创建此对象的数组函数的引用。

语法

object.constructor

constructor,构造函数,对这个名字,我们都不陌生,constructor始终指向创建当前对象的构造函数。

这里有一点需要注意的是,每个函数都有一个prototype属性,这个prototype的constructor指向这个函数,这个时候我们修改这个函数的prototype时,就发生了意外。如

function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.getAge = function(){
return this.age;
}
Person.prototype.getName = function(){
return this.name;
}
var p = new Person("Nicholas",18);
console.log(p.constructor); //Person(name, age)
console.log(p.getAge()); //18
console.log(p.getName()); //Nicholas

但是如果是这样:

function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
getName:function(){
return this.name;
},
getAge:function(){
return this.age;
}
}
var p = new Person("Nicholas",18);
console.log(p.constructor); //Object()
console.log(p.getAge()); //18
console.log(p.getName()); //Nicholas

结果constructor变了。

原因就是prototype本身也是对象,上面的代码等价于

Person.prototype = new Object({
getName:function(){
return this.name;
},
getAge:function(){
return this.age;
}
});

因为constructor始终指向创建当前对象的构造函数,那么就不难理解上面代码p.constructor输出的是Object了。

对于修改了prototype之后的constructor还想让它指向Person怎么办呢?简单,直接给Person.prototype.constructor赋值就可以了:

Person.prototype = {
constructor:Person,
getName:function(){
return this.name;
},
getAge:function(){
return this.age;
}
}

以上所述是小编给大家介绍的JavaScript中的constructor ,希望对大家有所帮助!

Javascript 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 #Javascript
javascript html5摇一摇功能的实现
Apr 19 #Javascript
一些实用性较高的js方法
Apr 19 #Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 #Javascript
JavaScript中创建对象的模式汇总
Apr 19 #Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 #Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 #Javascript
You might like
php 缓存函数代码
2008/08/27 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
银行职业规划书范文
2013/12/28 职场文书
捐赠仪式主持词
2014/03/19 职场文书
小学运动会开幕词
2015/01/28 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL