浅谈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实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
ztree实现权限横向显示功能
May 20 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
angular实现input输入监听的示例
Aug 31 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
小程序实现单选多选功能
Nov 04 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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使用base64加密解密图片示例分享
2014/01/20 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
php集成开发环境详解
2019/09/24 PHP
jQuery 表格工具集
2010/04/25 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
如何基于python操作excel并获取内容
2019/12/24 Python
外贸英语毕业生自荐信
2013/11/14 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
Golang 字符串的常见操作
2022/04/19 Golang