深入浅析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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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在linux上执行外部命令的方法
2017/02/06 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
PHP 实现链式操作
2021/03/09 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
js实现继承的5种方式
2015/12/01 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
使用PDB简单调试Python程序简明指南
2015/04/25 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
社区八一活动方案
2014/02/03 职场文书
项目经理任命书
2014/06/04 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL