zoukankan      html  css  js  c++  java
  • constructor属性解析

    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
  • 相关阅读:
    Delphi 消息窗口 Application.messagebox
    delphi绑定ComboBox数据
    delphi ComboBox AddObject 组合框下拉取值正确使用方法
    属性分类及其实现
    Delphi 在dbgrideh中表格输入数据时有效性的检查(转)
    XE下显示托盘图标(TrayIcon)
    delphi trayIcon控件,如何实现窗口最小化的时候到系统托盘?
    一步步开发自己的博客 番外篇(7、异步记录日志 和 文章阅读量统计)
    一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)
    一步步开发自己的博客 .NET版(5、Lucenne.Net 和 必应站内搜索)
  • 原文地址:https://www.cnblogs.com/ihardcoder/p/3667739.html
Copyright © 2011-2022 走看看