JavaScript constructor 属性详解

我就是我 2021-09-02 10:55 469阅读 0赞

对象的constructor属性用于返回创建该对象的函数，也就是我们常说的构造函数。

在JavaScript中，每个具有原型的对象都会自动获得constructor属性。除了arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression等一些特殊对象之外，其他所有的JavaScript内置对象都具备constructor属性。例如：Array、Boolean、Date、Function、Number、Object、String等。

**语法**

Object.constructor

**返回值**

对象的constructor属性返回创建该对象的函数的引用。

### 示例&说明 ###

以下代码中的\[native code\]，表示这是JavaScript的底层内部代码实现，无法显示代码细节。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 </td> 
 <td> <code>// 字符串：String()</code> <code>var</code> <code>str = </code><code>"张三"</code><code>;</code> <code>alert(str.constructor); </code><code>// function String() { [native code] }</code> <code>alert(str.constructor === String); </code><code>// true</code> &nbsp; <code>// 数组：Array()</code> <code>var</code> <code>arr = [1, 2, 3];</code> <code>alert(arr.constructor); </code><code>// function Array() { [native code] }</code> <code>alert(arr.constructor === Array); </code><code>// true</code> &nbsp; <code>// 数字：Number()</code> <code>var</code> <code>num = 5;</code> <code>alert(num.constructor); </code><code>// function Number() { [native code] }</code> <code>alert(num.constructor === Number); </code><code>// true</code> &nbsp; <code>// 自定义对象：Person()</code> <code>function Person(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.name = </code><code>"CodePlayer"</code><code>;</code> <code>}</code> <code>var</code> <code>p = </code><code>new</code> <code>Person();</code> <code>alert(p.constructor); </code><code>// function Person(){ this.name = "CodePlayer"; }</code> <code>alert(p.constructor === Person); </code><code>// true</code> &nbsp; <code>// JSON对象：Object()</code> <code>var</code> <code>o = { </code><code>"name"</code> <code>: </code><code>"张三"</code><code>};</code> <code>alert(o.constructor); </code><code>// function Object() { [native code] }</code> <code>alert(o.constructor === Object); </code><code>// true</code> &nbsp; <code>// 自定义函数：Function()</code> <code>function foo(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"CodePlayer"</code><code>);</code> <code>}</code> <code>alert(foo.constructor); </code><code>// function Function() { [native code] }</code> <code>alert(foo.constructor === Function); </code><code>// true</code> &nbsp; <code>// 函数的原型：bar()</code> <code>function bar(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"CodePlayer"</code><code>);</code> <code>}</code> <code>alert(bar.prototype.constructor); </code><code>// function bar(){ alert("CodePlayer"); }</code> <code>alert(bar.prototype.constructor === bar); </code><code>// true</code> </td> 
 </tr> 
 </tbody> 
</table>

为了将实例的构造器的原型对象暴露出来, 比如你写了一个插件,别人得到的都是你实例化后的对象, 如果别人想扩展下对象,就可以用 instance.constructor.prototype 去修改或扩展原型对象

链接：https://www.zhihu.com/question/19951896/answer/67551712  
  
引用 [javascript 对象中的 constructor属性的作用？][javascript _ constructor]的回答:

var a,b;
    (function(){
      function A (arg1,arg2) {
        this.a = 1;
        this.b=2; 
      }
    
      A.prototype.log = function () {
        console.log(this.a);
      }
      a = new A();
      b = new A();
    })()
    a.log();
    // 1
    b.log();
    // 1

通过以上代码我们可以得到两个对象，a,b，他们同为类A的实例。因为A在闭包里，所以现在我们是不能直接访问A的，那如果我想给类A增加新方法怎么办？

// a.constructor.prototype 在chrome,firefox中可以通过 a.__proto__ 直接访问
    a.constructor.prototype.log2 = function () {
      console.log(this.b)
    }
    
    a.log2();
    // 2
    b.log2();
    // 2

通过访问constructor就可以了。  
或者我想知道a的构造函数有几个参数？

a.constructor.length

或者再复杂点，我想知道a的构造函数的参数名是什么(angular的依赖注入就是通过此方法实现的*据说*)

a.constructor
     .toString()
     .match(/\(.*\)/)
     .pop().slice(1,-1)
     .split(',');
    // ["arg1", "arg2"]

[javascript _ constructor]: https://link.zhihu.com/?target=http%3A//segmentfault.com/q/1010000000347868