JavaScript中constructor属性

- 日理万妓 2022-01-17 05:55 280阅读 0赞

**1.引言**

我们先看两段代码：

function Ninja(){ }; 
    const ninja = new Ninja();
    
    //1.
    ninja.constructor === Ninja;   //true
    Ninja.prototype.constructor === Ninja; //true
    
    上面可以看出，ninja = Ninja.propertype，因为ninja的原型是Ninja.propertype
    
    //2.
    const ninja2 = new ninja.constructor();
    ninja2 instanceof Ninja;   //true

第一段代码：  
所有实例对象都可以访问constructor属性，constructor属性是创建实例对象的函数的引用。我们可以使用constructor属性验证实例的原始类型（与操作符instanceof非常类似）。

第二段代码：  
由于constructor属性仅仅是原始构造函数的引用，因此我们可以使用该属性创建新的Ninja对象。

**2.constructor属性**

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

**3.constructor属性是在原型里**

看了上面的代码示例，也许你会觉得constructor属性在对象里，但其实constructor属性是在原型里。

function test() {}
    var obj = new test();
    console.log(obj.hasOwnProperty('constructor')); //false
    console.log(obj.__proto__.hasOwnProperty('constructor')); //true

hasOwnProperty方法是来判定对象是否包含指定名称的属性，不会向原型链搜索。要想搜索原型链可以用in关键字（’constructor’ in obj）。

既然是constructor属性时从属于构造函数的prototype,那么为什么实例也有constructor属性呢？

function Foo() {}
    var foo = new Foo()
    foo.constructor === Foo // true，这是为什么

原因如下：  
1.Foo.prototype本身还是实例foo的原型。  
2.由于原型链机制，当在foo中查找属性constructor时，如果没有找到，则往原型上找。而Foo.prototype刚好有属性constructor。  
3.foo.constructor的值就是Foo.prototype.constructor的值，也就是Foo。(所以new ninja.constructor()就是new Ninja())。

**4.constructor属性是不可靠的**

function Foo() {}
    Foo.prototype = {}
    var foo = new Foo()
    foo.constructor === Object  // true，可以看出不是Foo了

1.foo没有constructor属性，还是往原型Foo.prototype上找  
2.Foo.prototype本来是有constructor属性的，但是在这里它已经被重新定义变成\{\}  
3.找不到constructor，接着往原型链上查找。（\{\}是由Object构造函数生成的，它的原型是Object.prototype）找到了Object.prototype，含有属性constructor，值为Object

**5.用处**

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

参考文章：  
[https://segmentfault.com/a/1190000013245739][https_segmentfault.com_a_1190000013245739]

[https_segmentfault.com_a_1190000013245739]: https://segmentfault.com/a/1190000013245739