Babel 编译的 decorator 代码揭秘

2023-10-27 09:13:04

编译过程详解

为了解开 Babel 如何编译 decorator 代码的谜团，让我们从一个简单的例子入手。考虑如下代码：

// decorator.js
function print() {
  console.log('executing decorator');
  return function(target, key, descriptor) {
    console.log('executing inner decorator');
  };
}

@print()
class Foo {
  constructor() {
    console.log('constructing Foo');
  }

  bar() {
    console.log('executing bar');
  }
}

const foo = new Foo();
foo.bar();

首先，Babel 会将 decorator 函数本身编译成一个 JavaScript 函数，如下所示：

// decorator.js (compiled)
var print = function () {
  console.log('executing decorator');
  return function (target, key, descriptor) {
    console.log('executing inner decorator');
  };
};

接下来，Babel 会将带有 decorator 的类编译成一个 JavaScript 类，如下所示：

// Foo.js (compiled)
var Foo = (function () {
  function Foo() {
    console.log('constructing Foo');
  }

  Foo.prototype.bar = function () {
    console.log('executing bar');
  };

  return Foo;
})();

Foo = print()(Foo) || Foo;

从编译后的代码中，我们可以看到 Babel 在类 Foo 的定义之前添加了一行代码 Foo = print()(Foo) || Foo;。这行代码实际上就是将 decorator 函数的返回值应用于类 Foo。由于 print 函数返回了一个函数，因此这行代码等价于 Foo = print(Foo) || Foo;。

执行过程分析

现在，让我们分析一下编译后的代码是如何执行的。当我们创建 Foo 的实例时，首先会执行构造函数 Foo。在构造函数中，我们打印出 "constructing Foo"。接下来，我们调用方法 foo.bar()。此时，编译后的代码会先执行 Foo.prototype.bar，然后执行 print(Foo)。由于 print 函数返回了一个函数，因此 print(Foo) 等价于 print(Foo)()。在这个内部函数中，我们打印出 "executing inner decorator"。最后，我们打印出 "executing bar"。

从执行过程可以看出，装饰器实际上是在类的定义阶段和方法的调用阶段被执行的。在类的定义阶段，装饰器可以用来修改类的行为或添加新的属性和方法。在方法的调用阶段，装饰器可以用来对方法进行拦截或增强。