深入浅析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 相关文章推荐
jquery cookie的用法总结
Nov 18 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
简单理解vue中Props属性
Oct 27 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 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 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
js自带函数备忘 数组
2006/12/29 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python Sleep休眠函数使用简单实例
2015/02/02 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python删除字符串中指定字符的方法
2018/08/13 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
工商管理毕业生推荐信
2013/12/24 职场文书
目标责任书范文
2014/04/14 职场文书
国际贸易系求职信
2014/08/09 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
居安思危观后感
2015/06/11 职场文书
换届选举主持词
2015/07/03 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
使用Redis做预定库存缓存功能
2022/04/02 Redis
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android