深入浅析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 相关文章推荐
Javascript Math对象
Aug 13 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
vue.js开发环境搭建教程
May 04 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP生成压缩文件实例
2015/02/07 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
extjs之去除s.gif的影响
2010/12/25 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python发送Email方法实例
2014/08/21 Python
python任务调度实例分析
2015/05/19 Python
python数据结构之图的实现方法
2015/07/08 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
护理实习自我鉴定
2013/12/14 职场文书
酒店办公室文员岗位职责
2013/12/18 职场文书
股东协议书范本
2014/04/14 职场文书
教师师德演讲稿
2014/05/06 职场文书
中学生运动会口号
2014/06/07 职场文书
2014年学生会工作总结
2014/11/07 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
python flask开发的简单基金查询工具
2021/06/02 Python
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL