浅谈javascript中的constructor


Posted in Javascript onJune 08, 2016

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的面向对象(一)
Nov 09 Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
自己的js工具_Form 封装
Aug 21 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
小程序实现五星点评效果
Nov 03 Javascript
js定义类的几种方法(推荐)
Jun 08 #Javascript
JavaScript必知必会(七)js对象继承
Jun 08 #Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 #Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 #Javascript
webpack中引用jquery的简单实现
Jun 08 #Javascript
js验证框架之RealyEasy验证详解
Jun 08 #Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 #Javascript
You might like
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python 多个参数不为空校验方法
2019/02/14 Python
pytorch之添加BN的实现
2020/01/06 Python
vue常用指令代码实例总结
2020/03/16 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
自习课吵闹检讨书范文
2014/09/26 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
2016年元旦致辞
2015/08/01 职场文书
python标准库ElementTree处理xml
2022/05/20 Python
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS