浅谈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 相关文章推荐
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 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
linux下 C语言对 php 扩展
2008/12/14 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python中嵌套函数的实操步骤
2019/02/27 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
Python爬虫开发与项目实战
2020/12/16 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
简历的自我评价范文
2014/02/04 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
婚宴主持词
2015/06/30 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server