浅谈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 相关文章推荐
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
vue-axios使用详解
May 10 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 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
模仿OSO的论坛(一)
2006/10/09 PHP
请php正则走开
2008/03/15 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
Yii实现简单分页的方法
2016/04/29 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
简单的js分页脚本
2009/05/21 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
python字典多条件排序方法实例
2014/06/30 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
python使用zip将list转为json的方法
2018/12/31 Python
python感知机实现代码
2019/01/18 Python
python3下载抖音视频的完整代码
2019/06/05 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
建筑文秘专业个人求职信范文
2013/12/28 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
学生检讨书怎么写
2014/10/09 职场文书
交通安全月活动总结
2015/05/08 职场文书
出生证明格式
2015/06/15 职场文书
销售会议开幕词
2016/03/04 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript