深入浅析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下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
js替代copy(示例代码)
Nov 27 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
JS实现瀑布流布局
Oct 21 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批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
JavaScript 指导方针
2007/04/05 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python如何查看系统网络流量的信息
2016/09/12 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
优秀三好学生事迹材料
2014/08/31 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python