constructor属性始终指向创建当前对象的构造函数。

比如下面的例子:

 // 等价于 var foo = new Array(1, 56, 34, 12);
var arr = [1, 56, 34, 12];
console.log(arr.constructor === Array); // true
// 等价于 var foo = new Function();
var Foo = function() { };
console.log(Foo.constructor === Function); // true
// 由构造函数实例化一个obj对象
var obj = new Foo();
console.log(obj.constructor === Foo); // true // 将上面两段代码(第6,9行)合起来,就得到下面的结论
console.log(obj.constructor.constructor === Function); // true

但是当constructor遇到prototype时,有趣的事情就发生了。

我们知道每个函数都有一个默认的属性prototype,而这个prototype的constructor(prototype.constructor)默认指向这个函数。

如下例所示:

  1.  function Person(name) {
    this.name = name;
    };
    Person.prototype.getName = function() {
    return this.name;
    };
    var p = new Person("TT"); console.log(p.constructor === Person); // true
    console.log(Person.prototype.constructor === Person); // true
    // 将上两行代码合并就得到如下结果
    console.log(p.constructor.prototype.constructor === Person); // true

当我们重新定义函数的prototype时(注意:和上例的区别,这里不是修改而是覆盖,下面的是字面量方式),constructor属性的行为就有点奇怪了,

如下示例:

  1.  function Person(name) {
    this.name = name;
    };
    Person.prototype = {
    getName: function() {
    return this.name;
    }
    };
    var p = new Person("TT");
    console.log(p.constructor === Person); // false
    console.log(Person.prototype.constructor === Person); // false
    console.log(p.constructor.prototype.constructor === Person); // false

为什么呢?

原来是因为覆盖Person.prototype时,等价于进行如下代码操作:

  1.  Person.prototype = new Object({  //Object的实例
    getName: function() {
    return this.name;
    }
    });

而constructor属性始终指向创建自身的构造函数,所以此时Person.prototype.constructor === Object,即是:

  1.  function Person(name) {
    this.name = name;
    };
    Person.prototype = { //注意是字面量方式
    getName: function() {
    return this.name;
    }
    };
    var p = new Person("TT");
    console.log(p.constructor === Object); // true
    console.log(Person.prototype.constructor === Object); // true
    console.log(p.constructor.prototype.constructor === Object); // true

怎么修正这种问题呢?方法也很简单,重新覆盖Person.prototype.constructor即可:

  1.  function Person(name) {
    this.name = name;
    };
    Person.prototype = new Object({
    getName: function() {
    return this.name;
    }
    });
    Person.prototype.constructor = Person; //重新指向Person
    var p = new Person("TT");
    console.log(p.constructor === Person); // true
    console.log(Person.prototype.constructor === Person); // true
    console.log(p.constructor.prototype.constructor === Person); // true

JavaScript对象中的constructor属性的更多相关文章

  1. JavaScript对象中的this属性

    this属性表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用appl ...

  2. JavaScript对象中的属性(可写,可配置,可枚举,value,getter,setter)

    JavaScript中,对象包括3个特性,分别为,可扩展性,class标识符,属性. 如果对象的可扩展性为false,则不可为对象动态的添加属性.   对象包含分为存取器属性和值属性.存取属性为 {g ...

  3. JavaScript的事件对象中的特殊属性和方法(鼠标,键盘)

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

  4. js对象中动态读取属性值 动态属性值 js正则表达式全局替换

    $(document).ready(function(){ var exceptionMsg = '${exception.message }'; var exceptionstr = ''; //j ...

  5. [记录] javascript 对象中使用setTimeout

    参考:Javascript对象中关于setTimeout和setInterval的this介绍 使用最后一个方法终于弄好了,简直了,在对象中使用setTimeout原来是这样的 做的是分钟倒计时,倒数 ...

  6. 在实体对象中访问导航属性里的属性值出现异常“There is already an open DataReader associated with this Command which must be closed first”

    在实体对象中访问导航属性里的属性值出现异常“There is already an open DataReader associated with this Command which must be ...

  7. 删除JavaScript对象中的元素

    参考http://stackoverflow.com/questions/208105/how-to-remove-a-property-from-a-javascript-object 通过dojo ...

  8. Javascript 对象的创建和属性的判定

    1. 创建对象的方法: 直接使用new 对Object对象进行操作,即对Object 对象进行实例化 <!DOCTYPE html> <html lang="en" ...

  9. Stream流用于按照对象中某一属性来对集合去重+简单数据类型集合的去重

    上次对Stream流来进行分组的文章很多人看,想看的可以来这: Stream流来进行集合分组 这次小编又带来Stream的去重,话不多数,直接上代码: 这是对简单数据类型的去重 //字符串集合进行简单 ...

随机推荐

  1. UWP平台Taglib编译(2)

    此文已由作者郑博授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验 #endif  // _WIN32 } class FileStream::FileStreamPrivate ...

  2. 《Beginning Java 7》 - 1 - Initializer 初始化器

    Initializer 分两类:class initializer 类初始化器   instance initializer 实例初始化器 1. class initializer,在编译时运行,通过 ...

  3. softmax,softmax loss和cross entropy的讲解

    1 softmax 我们知道卷积神经网络(CNN)在图像领域的应用已经非常广泛了,一般一个CNN网络主要包含卷积层,池化层(pooling),全连接层,损失层等.这一篇主要介绍全连接层和损失层的内容, ...

  4. img标签中onerror用法

    <img src="/statics/bazi/images/150x100.jpg" alt="#" onerror="this.style. ...

  5. “全栈2019”Java第五十三章:向上转型和向下转型详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. [BZOJ 4890][TJOI2017]城市

    传送门 $ \color{green} {solution : }$ 我们可以暴力枚举断边,然后 $ O(n) $ 的跑一次换根 $ dp $,然后复杂度是 $ O(n * n) $ 的 #inclu ...

  7. 在使用Vue搭建前端服务器时,路由出现#号的解决办法

    路由模式解析 这里要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置.如果有进行过服务器开发或者对http协议有所了解就会知道 ...

  8. 微信内置浏览器H5 弹出键盘 遮盖文本框解决办法 Fixed失效

    if(/Android [4-6]/.test(navigator.appVersion)) { window.addEventListener("resize", functio ...

  9. vue项目element-ui框架中的弹窗中的表单验证清除问题

    问题回顾: 1.vue项目的在弹窗上的form表单验证,第一次点击新增时正常,第二次新增打开弹窗后由于表单内容为空,出现验证这种情况 2.为了解决上面的情况,在执行点击新增事件加上this.$refs ...

  10. $bzoj1019-SHOI2008$ 汉诺塔 $dp$

    题面描述 汉诺塔由三根柱子(分别用\(A\ B\ C\)表示)和\(n\)个大小互不相同的空心盘子组成.一开始\(n\)个盘子都摞在柱子\(A\)上,大的在下面,小的在上面,形成了一个塔状的锥形体. ...