浅谈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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php array_intersect()函数使用代码
2009/01/14 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
详解angular element()方法使用
2017/04/08 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
python 连接各类主流数据库的实例代码
2018/01/30 Python
python如何为创建大量实例节省内存
2018/03/20 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
new修饰符是起什么作用
2015/06/28 面试题
拓展策划方案
2014/06/03 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
教师三严三实心得体会
2014/10/11 职场文书
第一军规观后感
2015/06/12 职场文书