JavaScript中constructor属性一直不是很清楚,今日终于弄清了其中缘由,下面举例说明。

首先是一个典型的JavaScript实例声明:

function Person(){
this.name = name;
}
var p = new Person('Joe');
console.log(p.constructor === Person); //true
console.log(p.__proto__ === Person.prototype); //true

如果此时对Person的prototype中添加属性或函数:

function Person(){
this.name = name;
}
Person.prototype.getName = function(){
return this.name;
}
var p = new Person('Joe');
console.log(p.constructor === Person); //true
console.log(p.__proto__ === Person.prototype); //true

但是如果对Person的prototype重新定义,将会产生如下结果:

function Person(){
this.name = name;
}
Person.prototype = {
getName : function(){
return this.name;
}
}
var p = new Person('Joe');
console.log(p.constructor === Person); //false
console.log(p.__proto__ === Person.prototype); //true

这里面关系到constructor属性的归属问题,本人试着用下面的代码验证:

Person.__proto__.constructor===Person.constructor //true
p.__proto__.constructor === p.constructor; //true

经过上述验证,可以证明constructor其实是__proto__的属性(此处存疑,因为是个人验证,不清楚上面的验证代码是否精准,如果有误,希望各位指出)。

根据new的工作原理(详见http://www.cnblogs.com/ihardcoder/p/3667372.html),我们知道

p.__proto__ = Person.prototype;

所以

p.constructor = p.__proto__.constructor = Person.prototype.constructor

这样就将问题追溯到Person的prototype指向问题。当用Person.prototype = {}的方式重新定义时,同样根据new的工作原理,其实产生如下改变:

Person.prototype.__proto__ = Object.prototype

从而

p.constructor
= Person.prototype.constructor
= Person.prototype.__proto__.constructor
= Object.prototype.constructor

此时

p.constructor === Object; //true

如何避免constructor属性的混乱,归根结底,我们需要做的是保证instance的constructor属性指向Person.prototype.constructor,而不是Person的父类,所以当修改Person.prototype时需要保证Person.prototype.constructor指向自己。

function Person(){
this.name = name;
}
Person.prototype = {
getName : function(){
return this.name;
}
}
Person.prototype.constructor = Person;
var p = new Person('Joe');
console.log(p.constructor === Person); //false
console.log(p.__proto__ === Person.prototype); //true

constructor属性解析的更多相关文章

  1. 【Spring源码深度解析学习系列】复杂标签属性解析(四)

    一.创建用于属性承载的BeanDefinition BeanDefiniton是一个接口,在Spring中存在三种实现:RootBeanDefinition.ChildBeanDefinition.G ...

  2. 揭开js之constructor属性的神秘面纱

    揭开 constructor 在 Javascript 语言中,constructor 属性是专门为 function 而设计的,它存在于每一个 function 的prototype 属性中.这个 ...

  3. CAGradientLayer的一些属性解析

    CAGradientLayer的一些属性解析 iOS中Layer的坐标系统: 效果: - (void)viewDidLoad { [super viewDidLoad]; CAGradientLaye ...

  4. 对象的constructor属性

    对象的constructor属性, 最初是用来标识对象类型的. 比如 ,我们定义一个 Person类,然后实例化两个对象. function Person(name, age, job){this.n ...

  5. JavaScript类型检测, typeof操作符与constructor属性的异同

    *#type.js function Person(name, age) { this.name = name; this.age = age; } var d = {an: 'object'}; v ...

  6. CAGradientLayer的一些属性解析-b

    CAGradientLayer的一些属性解析 iOS中Layer的坐标系统: 效果: - (void)viewDidLoad { [super viewDidLoad]; CAGradientLaye ...

  7. JavaScript 构造函数 prototype属性和_proto_和原型链 constructor属性 apply(),call()和bind() 关键字this

    1.构造函数: 通常构造函数首字母需要大写,主要是为了区别ECMAScript的其它函数.(高程三 P145) 构造函数与其他函数的唯一区别,就在于调用它们的方式不同.只要通过new来调用,任何函数都 ...

  8. Activity设置全屏显示的两种方式及系统自带theme属性解析

    转载说明:原贴地址:http://blog.csdn.net/a_running_wolf/article/details/50480386 设置Activity隐藏标题栏.设置Activity全屏显 ...

  9. constructor 属性,判断是否为数组

    <!--你可以使用 constructor 属性来查看是对象是否为数组 (包含字符串 "Array"):--><p>constructor属性返回变量或对象 ...

随机推荐

  1. 详解js跨域

    什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 对于端口和协议的不同,只能通过后台来解决.URL 说明 是否允许通信 http://www.a.com/a.js http ...

  2. es6数值

    ES6在Number对象上,新提供了Number.isFinite()和Number.isNaN()两个方法,用来检查Infinite和NaN这两个特殊值. Number.isFinite(15); ...

  3. tensorflow学习之(七)使用tensorboard 展示神经网络的graph/histogram/scalar

    # 创建神经网络, 使用tensorboard 展示graph/histogram/scalar import tensorflow as tf import numpy as np import m ...

  4. 02.02.01 第1章 简介及基础操作(Power BI商业智能分析)

    02.02.01.01 powerbi简介 00:10:59 02.02.01.02 query数据导入 00:03:26 具体操作实例如下: 02.02.01.03导入access数据 00:05: ...

  5. ajax相关知识总结

    一.原生AJAX的兼容版本实现 function createXhr(){ var Xhr = null; //浏览器的判断 if(window.XMLHttpRequest){ //ie789 ch ...

  6. widnow 下配置php开发环境

    首先下载Php 和 Nginx php 下载链接 nginx 下载链接 下载完成之后 解压到对应目录 (我这里存放在e盘) 解压之后 进入nginx目录 直接双击nginx.exe(一闪而过); 之后 ...

  7. spring深入学习(一)-----IOC容器

    spring对于java程序员来说,重要性不可言喻,可以想象下如果没有他,我们要多做多少工作,下面一个系列来介绍下spring(5.x版本). spring模块 IOC概念 spring中最重要的两个 ...

  8. centos 下Python独立虚拟环境创建

    virtualenv Python有着庞大的开源社区的支持,很自然就产生这么一个问题:第三方包参差不齐,如果我们想在服务器测试,或者升级某个包,就会导致生产环境产生杂乱,多余的第三方依赖包. virt ...

  9. python-mysql驱动64位

    安装Python-MySQL驱动一直没有成功: https://pypi.python.org/pypi/MySQL-python/1.2.5#downloads 上面网站下的版本安装都不能通过 提示 ...

  10. SLAM

    |__all together ship |__SLAM__ |__Graph SLAM__ |__完成约束 |__完成Graph SLAM__ |                          ...