深入浅析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 24 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
js和jquery中获取非行间样式
May 05 jQuery
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
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的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
PHP时间类完整代码实例
2021/02/26 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
python实现对一个完整url进行分割的方法
2015/04/29 Python
python实现获取Ip归属地等信息
2016/08/27 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
简短证婚人证婚词
2014/01/09 职场文书
春风行动实施方案
2014/03/28 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
党委班子对照检查材料
2014/08/19 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
父亲去世追悼词
2015/06/23 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang