javascript - 有没有可能在调用构造函数之前就知道 'this'这个对象呢？

Question

在 ES6 类之前，函数可以用作构造函数:

function MyClass(a, b) {
}

那么，下面的代码就相当于一个经典的实例化(比如let thisObj = new MyClass("A", "B")):

let thisObj = Object.create(MyClass.prototype)
// Here we know the `this` object before to call the constructor.
// Then, the constructor is called manually:
MyClass.call(thisObj, "A", "B")

... 这种技术是一种在调用构造函数之前了解 this 对象的方法。但是 Function.prototype.call() 不适用于 ES6 类构造函数。

对于 ES6，我们有 Reflect.construct():

let thisObj = Reflect.construct(MyClass, "A", "B");

但它没有提供在创建this 对象后调用构造函数的方法。

ES6 类是否仍然可以做到这一点？

我的用例

对于框架，我需要将此功能从 ES5 保留到 ES6。框架负责实例化组件(ES6 类)。组件可以从其构造函数创建子组件(在组件树中，这里没有继承)。然后，子组件可以查询框架以从其自己的构造函数中获取其父组件。在这种情况下，我们有一个技术限制，因为框架仍然没有父组件构造函数的返回值。与(转换为)ES5 相比，这是一种回归。

Answer 1

用 ES6 类不可能做到这一点。 ES6 类应该只用 new 或 Reflect.construct 实例化。

Function-calling classes is currently forbidden. That was done to keep options open for the future, to eventually add a way to handle function calls via classes. [source: exploringjs]

另见:

• Is it possible to inherit old-style class from ECMAScript 6 class in JavaScript?
• are es6 classes just syntactic sugar for the prototypal pattern in javascript?

为什么这种模式不可行

类实例不是必须出现在构造函数中的this对象，因为ES6类可以从构造函数返回一个值，该值被认为是类实例:

class Foo {
  constructor {
    // `this` is never used
    return {};
  }
}

A component can create sub-components from its constructor. Then, a sub-component can query the framework to get its parent from its own constructor

这种模式在 ES6 类中不可行。该限制限制 this 出现在 super 之前。

为了到达层次结构中的特定类，装饰器模式 可用于在类定义时对其进行装饰。这允许在定义时修改它的原型(prototype)，或者在父类和子类之间放置一个中间类。这种方法解决了许多特定于框架的任务，如依赖注入(inject)，并用于现代框架(Angular 等)。

一个方便的方法是使用 ECMAScript Next/TypeScript 装饰器。这是一个示例，显示装饰器允许动态拦截子构造函数并扩充子原型(prototype):

let BAZ;

class Foo {
  constructor(foo) {
    console.log(foo);    
  }
}

function bazDecorator(Class) {
  return class extends Class {
    constructor(foo) {
      super(BAZ || foo);
    }

    get bar() {
      return BAZ || super.bar;
    }
  }
}

@bazDecorator
class Bar extends Foo {
  constructor(foo) {
    super(foo);

    console.log(this.bar);
  }

  get bar() {
    return 'bar';
  }
}

// original behaviour
new Bar('foo'); // outputs 'foo', 'bar'

// decorated behaviour
BAZ = 'baz';
new Bar('foo'); outputs 'baz', 'baz'

ES.next 装饰器基本上是一个辅助函数。即使没有语法糖，它仍然适用于 ES6，语法略有不同:

const Bar = bazDecorator(
    class Bar extends Foo { ... }
);