Babel 编译 ES6 类中静态属性的问题及解决方案

在 ES6 中，我们可以使用 class 关键字来定义类，同时还可以使用 static 关键字来定义静态属性。静态属性是指属于类本身而不是类的实例的属性。例如：

class Person {
  static species = 'human';
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

在上面的代码中，species 是 Person 类的静态属性，而 name 和 age 是 Person 类的实例属性。然而，当我们使用 Babel 将 ES6 代码编译成 ES5 代码时，就会遇到一个问题：Babel 无法正确地编译 ES6 类中的静态属性。

问题描述

在 Babel 编译 ES6 类中的静态属性时，Babel 会将静态属性转换成类的原型属性。例如，上面的 Person 类在被 Babel 编译后会变成以下代码：

var Person = function Person(name, age) {
  _classCallCheck(this, Person);
  this.name = name;
  this.age = age;
};

Person.prototype.species = 'human';

在上面的代码中，species 属性被转换成了 Person.prototype.species 属性，而不是 Person.species 属性。这会导致以下问题：

1. 无法直接访问静态属性。因为静态属性被转换成了原型属性，所以我们需要先创建 Person 的实例才能访问 species 属性：

   var john = new Person('John', 30);
   console.log(john.species); // "human"

   如果我们直接访问 Person.species 属性，会得到 undefined。

2. 静态属性会被继承。因为静态属性被转换成了原型属性，所以子类会继承父类的静态属性。例如：

   // www.javascriptcn.com code example
   class Student extends Person {
     constructor(name, age, major) {
       super(name, age);
       this.major = major;
     }
   }
   
   var jane = new Student('Jane', 20, 'Computer Science');
   console.log(jane.species); // "human"

   在上面的代码中，Student 类继承了 Person 类的 species 属性。这可能不是我们想要的行为。

解决方案

为了解决上述问题，我们可以使用 Babel 插件 @babel/plugin-proposal-class-properties 来编译 ES6 类中的静态属性。这个插件可以将静态属性正确地转换成类的静态属性，而不是原型属性。例如，我们可以将上面的 Person 类改写成以下代码：

class Person {
  static species = 'human';
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

使用 @babel/plugin-proposal-class-properties 插件编译后，上面的代码会变成以下代码：

var Person = function Person() {
  _classCallCheck(this, Person);
};

_defineProperty(Person, "species", 'human');

var _class = Person;

在上面的代码中，species 属性被正确地转换成了类的静态属性。我们可以直接访问 Person.species 属性，而不需要创建 Person 的实例。同时，静态属性也不会被子类继承。

示例代码

以下是一个完整的示例代码：

// www.javascriptcn.com code example
class Person {
  static species = 'human';
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

class Student extends Person {
  constructor(name, age, major) {
    super(name, age);
    this.major = major;
  }
}

console.log(Person.species); // "human"
console.log(Student.species); // "human"

在上面的代码中，我们定义了 Person 类和 Student 类，并使用 @babel/plugin-proposal-class-properties 插件编译了这些类。我们可以直接访问 Person.species 属性，而不需要创建 Person 的实例。同时，Student 类不会继承 Person 类的静态属性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d18917a941bf7134337f40