浅谈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控制iframe滚动的代码
Apr 10 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 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常用代码大全(新手入门必备)
2010/06/29 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
基于jQuery实现表单提交验证
2014/11/24 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
Jquery实现遮罩层的方法
2015/06/08 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
webpack打包js的方法
2018/03/12 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python实现聚类算法原理
2018/02/12 Python
python 接口返回的json字符串实例
2018/03/27 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Python创建字典的八种方式
2019/02/27 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
python爬虫---requests库的用法详解
2020/09/28 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
互联网创业计划书的书写步骤
2014/01/28 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
初中生评语大全
2014/04/24 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript