深入浅析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的代码显示区域自动拉长效果
Dec 07 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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脚本的10个技巧(2)
2006/10/09 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
pyenv命令管理多个Python版本
2017/03/26 Python
Python微信库:itchat的用法详解
2017/08/14 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
python中添加模块导入路径的方法
2021/02/03 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
两年的个人工作自我评价
2014/01/10 职场文书
论文诚信承诺书
2014/05/23 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
小学班级口号大全
2015/12/25 职场文书
2019大学生实习报告
2019/06/21 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书