浅谈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 String 对象
Apr 25 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
Openlayers实现地图全屏显示
Sep 28 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使用第三方即时获取物流动态实例详解
2017/04/27 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
js 函数调用模式小结
2011/12/26 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
网络技术专业求职信
2014/02/18 职场文书
学生会竞聘书范文
2014/03/31 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
上课说话检讨书500字
2014/11/01 职场文书
租车协议书
2015/01/27 职场文书
病危通知书样本
2015/04/17 职场文书
特此通知格式
2015/04/27 职场文书
百家讲坛观后感
2015/06/12 职场文书
初中语文教师研修日志
2015/11/13 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
vue3获取当前路由地址
2022/02/18 Vue.js