深入浅析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 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
js中的数组对象排序分析
Dec 11 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
js实现抽奖功能
Nov 24 Javascript
Javascript之datagrid查询详解
Sep 15 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生成Flash动画的实现代码
2010/03/12 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
深入了解python列表(LIST)
2020/06/08 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
配置管理计划的主要内容有哪些
2014/06/20 面试题
商务英语专业求职信
2014/06/26 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
庆元旦主持词
2015/07/06 职场文书