浅谈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 面向对象编程基础:封装
Aug 21 Javascript
JS解析XML的实现代码
Nov 12 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
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/06/18 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
JavaScript定时器使用方法详解
2020/03/26 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
毕业生自我鉴定
2013/11/05 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
节约电力资源的建议书
2014/03/12 职场文书
学校搬迁方案
2014/06/15 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
购房意向书
2014/08/30 职场文书
2014年团委工作总结
2014/11/13 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技