Question

我正在读你不懂JS：ES6＆amp;超越，我在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将创建的实例。

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

1 个答案: