JavaScript ES6的class使用常见问题汇总

ES6的class使用本身并不复杂，但它牵扯的知识点不少。单独看每个点都简单，组合在一起就容易让人犯迷糊。本文帮你理清这条线索。

被低估的ES6的class使用

关于ES6的class使用，本文只讲三件事：它是什么、怎么用、有哪些坑。把这三件事搞清楚，日常开发就足够用了。

ES6的class使用的核心要点

• 记录ES6的class使用使用过程中踩过的坑，形成自己的避坑手册。
• 别在生产环境直接试ES6的class使用的新写法，先在测试环境验证。
• 保持ES6的class使用相关代码的简洁，能用三行写清楚就不要写十行。
• ES6的class使用的默认值要搞清楚，很多 bug 都是「我以为默认是……」造成的。

理论部分就聊到这，下面进入实战环节。

ES6的class使用代码示例

看代码更直观，ES6 class 的使用：

class Animal {
  constructor(name) { this.name = name; }
  eat() { return `${this.name}在吃东西`; }
  static create(name) { return new Animal(name); }  // 静态方法
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);            // 必须先调 super
    this.breed = breed;
  }
  bark() { return `${this.name}汪汪叫`; }
}

const d = new Dog('旺财', '金毛');
console.log(d.eat(), d.bark());

这些细节要注意

• 多人协作时先拉取最新代码再开发，能避免大量无意义的冲突。
• 重要功能上线前，先写好回滚方案，再点开始按钮。
• 注释要解释「为什么」而不是「是什么」，代码本身已经说明了是什么。
• 报错信息要完整阅读，堆栈的第一行和最后一行最有价值。

写在最后

关于ES6的class使用就写到这里。如果文中有讲得不清楚的地方，欢迎指出，我会及时补充完善。

---

遇见问题加 QQ23979811 协助处理