JavaScript类和继承：constructor属性

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  
  
  
   
  
  
  // 将上面两段代码合起来，就得到下面的结论  
  
  
  console.log(obj.constructor.constructor === Function); // true

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

我们知道每个函数都有一个默认的属性prototype，而这个prototype的constructor默认指向这个函数。如下例所示：

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

当时当我们重新定义函数的prototype时（注意：和上例的区别，这里不是修改而是覆盖），constructor属性的行为就有点奇怪了，如下示例：

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

为什么呢？

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

 
 
 
  
  
  Person.prototype = new Object({  
  
  
      getName: function() {  
  
  
          return this.name;  
  
  
      }  
  
  
  });

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

 
 
 
  
  
  function Person(name) {  
  
  
      this.name = name;  
  
  
  };  
  
  
  Person.prototype = {  
  
  
      getName: function() {  
  
  
          return this.name;  
  
  
      }  
  
  
  };  
  
  
  var p = new Person("ZhangSan");  
  
  
  console.log(p.constructor === Object);  // true  
  
  
  console.log(Person.prototype.constructor === Object); // true  
  
  
  console.log(p.constructor.prototype.constructor === Object); // true

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

 
 
 
  
  
  function Person(name) {  
  
  
      this.name = name;  
  
  
  };  
  
  
  Person.prototype = new Object({  
  
  
      getName: function() {  
  
  
          return this.name;  
  
  
      }  
  
  
  });  
  
  
  Person.prototype.constructor = Person;  
  
  
  var p = new Person("ZhangSan");  
  
  
  console.log(p.constructor === Person);  // true  
  
  
  console.log(Person.prototype.constructor === Person); // true  
  
  
  console.log(p.constructor.prototype.constructor === Person); // true

【编辑推荐】

JavaScript类和继承：prototype属性
JavaScript类和继承：this属性
ExtJS Grid Tooltip的3+1种实现方式总结
JavaScript异步调用框架的链式实现
JavaScript异步调用框架的jQuery风格链式调用

分享标题：JavaScript类和继承：constructor属性
分享路径：http://www.shufengxianlan.com/qtweb/news37/523387.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容