深入浅析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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
LayUi数据表格自定义赋值方式
Oct 26 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实现根据字符串生成对应数组的方法
2014/09/22 PHP
php中session与cookie的比较
2015/01/27 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
英文自我鉴定
2013/12/10 职场文书
运动会广播稿60字
2014/01/15 职场文书
《口技》教学反思
2014/02/21 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android