浅谈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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
javascript 自动填写表单的实现方法
Apr 09 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
JS Object构造函数之Object.freeze
Apr 28 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中一个控制字符串输出的函数
2006/10/09 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP反射机制用法实例
2014/08/28 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
Display SQL Server Version Information
2007/06/21 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
iscroll.js滚动加载实例详解
2017/07/18 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
学习python处理python编码问题
2011/03/13 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python unittest实现api自动化测试
2018/04/04 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python学生信息管理系统实现代码
2019/12/17 Python
python 星号(*)的多种用途
2020/09/21 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
python数据处理之Pandas类型转换
2022/04/28 Python