在调用构造函数之前是否可以知道“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 实例化。

目前禁止调用函数类。这样做是为了为未来保留选项，最终添加一种通过类处理函数调用的方法。 [来源：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 {};
  }
}

组件可以从其构造函数创建子组件。然后，子组件可以查询框架以从自己的构造函数中获取其父组件

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

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

一个方便的方法是 ECMAScript Next/TypeScript 装饰器。下面是一个例子，说明装饰器允许动态拦截子构造函数并增加子原型：

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 { ... }
);