深入浅析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、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 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下载文件的详解
2013/06/02 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python中文件的读取和写入操作
2018/04/27 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
python2与python3共存问题的解决方法
2018/09/18 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
python获取整个网页源码的方法
2020/08/03 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
药学职务聘任书
2014/03/29 职场文书
给校长的建议书300字
2014/05/16 职场文书
聚会通知怎么写
2015/04/23 职场文书
八年级语文教学反思
2016/03/03 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
Nginx的基本概念和原理
2022/03/21 Servers