浅谈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 08 Javascript
由document.body和document.documentElement想到的
Apr 13 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 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
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
降低PHP Redis内存占用
2017/03/23 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
删除重复数据的算法
2006/11/23 Javascript
对象的类型:本地对象(1)
2006/12/29 Javascript
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
用python实现批量重命名文件的代码
2012/05/25 Python
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Python星号*与**用法分析
2018/02/02 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
关于毕业的中学校园广播稿
2014/01/26 职场文书
一份创业计划书范文
2014/02/08 职场文书
网络编辑职责
2014/03/01 职场文书
计算机专业自荐信
2014/05/24 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
2016年元旦寄语
2015/08/17 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
Golang二维数组的使用方式
2021/05/28 Golang
Python基于百度API识别并提取图片中文字
2021/06/27 Python
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js