浅谈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 相关文章推荐
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
react native 获取地理位置的方法示例
Aug 28 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 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网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python判断某个用户对某个文件的权限
2016/10/13 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
在Python中表示一个对象的方法
2019/06/25 Python
python异常处理和日志处理方式
2019/12/24 Python
python中JWT用户认证的实现
2020/05/18 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
重阳节登山活动方案
2014/02/03 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书