这个片段中的内容是什么？

Question

我正在阅读你不知道JS:ES6&Beyond,我在Symbol.species部分遇到了这个片段.

class Cool {
    // defer `@@species` to derived constructor
    static get [Symbol.species]() { return this; }

    again() {
        return new this.constructor[Symbol.species]();
    }
}

class Fun extends Cool {}

class Awesome extends Cool {
    // force `@@species` to be parent constructor
    static get [Symbol.species]() { return Cool; }
}

var a = new Fun(),
    b = new Awesome(),
    c = a.again(),
    d = b.again();

c instanceof Fun;           // true
d instanceof Awesome;       // false
d instanceof Cool;          // true

似乎函数Symbol.species {return Something}应该总是返回一个构造函数.但是在第一次出现这个函数时: static get [Symbol.species]() { return this; } 我很困惑因为我总是认为这应该是一个对象而不是构造函数.你能帮我澄清一下事实吗？

而且return new this.constructor[Symbol.species]();,这里的内容是什么？

Answer 1

this 将根据执行的上下文引用方法内部的不同内容.

在类方法中,静态方法this将引用该类.

所以例如

static get [Symbol.species]() { return this; }

由于这是一个类方法,它将在类上执行this并将引用该类

//since this is a getter we don't use trailing `()`
Cool[Symbol.species] === Cool;
//It does not exist on instances
var myCool = new Cool();
console.log( myCool[Symbol.species] );
//will give undefined

现在,例如方法,如again方法,它们只存在于实例上,因此从实例而不是类调用:

console.log( Cool.again );
//will give undefined
var myCool = new Cool();
var newInstance = myCool.again();

在实例中,方法this是指实例,而不是类.

所以给出:

 return new this.constructor[Symbol.species]();

• this是实例(例如new Cool)
• this.constructor是创建实例的构造函数(例如Cool)
• this.constructor[Symbol.species] 是类getter方法 Symbol.species
• new this.constructor[Symbol.species]() 是Symbol.species返回的类的新实例

所以整行返回一个静态getter Symbol.species方法返回的类的新实例.

这允许类具有在不知道其名称的情况下创建类的新实例的方法.

因此,如示例所示,即使Fun从未定义过它自己的again方法again也知道如何创建新的实例Fun.并且如图Awesome所示,您可以覆盖Symbol.species以更改again将创建的实例.