浅谈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获取单选框或复选框值及操作
Dec 18 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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验证码(支持中文)
2007/02/14 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
node.js中的console用法总结
2014/12/15 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
React 组件间的通信示例
2018/06/14 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
Python和php通信乱码问题解决方法
2014/04/15 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
会计毕业生自荐信
2013/11/21 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
活动总结模板
2014/05/09 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
岗位工作说明书
2014/07/29 职场文书
单位接收函格式
2015/01/30 职场文书
华清池导游词
2015/02/02 职场文书
黄石寨导游词
2015/02/05 职场文书
2015年班干部工作总结
2015/04/29 职场文书
八年级语文教学反思
2016/03/03 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
详解Vue router路由
2021/11/20 Vue.js
Hive导入csv文件示例
2022/06/25 数据库
Spring Boot实现文件上传下载
2022/08/14 Java/Android