JavaScript新手关于var关键字赋值class类写法的疑问

核心原理 #

你看到的是JS的**类表达式（Class Expression）**写法，JS中类属于一等值，和数字、字符串、函数一样，可以直接赋值给变量、作为参数传递、作为返回值返回，和你之前了解的new创建实例的逻辑完全不冲突。

常见疑问解答 #

• 你之后创建实例还是用你熟悉的new Level(plan)写法即可，和普通类声明创建的类用法完全一致
• 这种写法和你更熟悉的类声明class Level {}90%的场景下效果一致，区别仅在于类声明会在当前作用域提升，类表达式要等到代码执行到赋值行才会生效
• 代码中class后重复的Level是类的内部名称，仅允许在类的内部代码中访问，类外部只能通过你赋值的变量名Level调用这个类，如果不需要内部访问类名可以直接省略，写成var Level = class {}效果完全相同

辅助理解示例 #

类表达式和你应该见过的函数表达式逻辑完全一致：

// 函数声明写法
function add(a, b) {
  return a + b
}
// 函数表达式写法，和上方效果基本一致
var add = function add(a, b) {
  return a + b
}

// 对应类的写法逻辑完全相同
// 类声明写法
class Level {
  constructor(plan) {
    // 构造逻辑
  }
}
// 类表达式写法，和上方效果基本一致，也就是你在书中看到的写法
var Level = class Level {
  constructor(plan) {
    let rows = plan.trim().split("\n").map(l => [...l]);
    this.height = rows.length;
    this.width = rows[0].length;
    this.startActors = [];
    this.rows = rows.map((row, y) => {
      return row.map((ch, x) => {
        let type = levelChars[ch];
        if (typeof type == "string") return type;
        this.startActors.push(
          type.create(new Vec(x, y), ch));
        return "empty";
      });
    });
  }
}

类表达式的优势是灵活性更高，比如可以根据条件判断给同一个变量赋值不同的类实现，或者把类作为值传递给其他函数，这类场景类声明无法实现。

你看到的完整代码就是用类表达式定义了Level类，构造函数接收关卡布局字符串参数，解析后生成关卡的宽高、角色列表、网格布局数据，是非常常规的类表达式用法。

内容的提问来源于stack exchange，提问作者hai Student