浅谈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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
vue 组件内获取actions的response方式
Nov 08 Javascript
vue 中的 render 函数作用详解
Feb 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对数组内元素进行随机调换的方法
2015/05/12 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python实现计算倒数的方法
2015/07/11 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
python字符串的方法与操作大全
2018/01/30 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
大学学习生活感言
2014/01/18 职场文书
创先争优活动心得体会
2014/09/04 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
计生个人工作总结
2015/02/28 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
python神经网络 使用Keras构建RNN训练
2022/05/04 Python
Win2008系统搭建DHCP服务器
2022/06/25 Servers