深入浅析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 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 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 输出URL的快捷方式示例代码
2013/09/22 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
Symfony核心类概述
2016/03/17 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
asp 的 分词实现代码
2007/05/24 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
重构Python代码的六个实例
2020/11/25 Python
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
感恩之星事迹材料
2014/05/03 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
2014年学前班工作总结
2014/12/08 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
导游词之桂林
2019/08/20 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL