类与原型答案

【问题标题】：Class vs Prototype类与原型
【发布时间】：2015-03-25 09:05:25
【问题描述】：

是什么让 ES6 类语法比传统的原型方法更好？

由于我不关心跨浏览器的东西，我应该用类替换所有当前对象吗？

【问题讨论】：

很确定它只是语法糖——它仍然是基于底层的原型。
"不关心"浏览器兼容性和主动破坏代码是有区别的。
应该注意，如果你想在开始编写 ES6 的同时仍然生产可用于生产的 javascript 跨浏览器，你应该看看Google's Traceur transpiler。
是的，理解 JS 的基本原则并没有真正改变是非常重要的。 class 语法只是语法糖，就像例如箭头函数。

标签： javascript class ecmascript-6

【解决方案1】：

ES6 类是基于原型的 OO 模式的简单糖。拥有一个方便的声明形式使类模式更易于使用，并鼓励互操作性。类支持基于原型的继承、超级调用、实例和静态方法以及构造函数。

【讨论】：

此外，它也不易出错，但不允许在没有new的情况下调用类。

【解决方案2】：

基于 ES6 类的语法比传统的原型方法要好得多，

与构造函数和构造函数继承相比，类使初学者更容易上手。
语言支持子类化。
内置构造函数是可子类化的。
不再需要继承库；代码会变多在框架之间移植。
它们为未来的高级功能奠定了基础（mixins 等）。

因此，如果您不关心跨浏览器，请使用基于类的语法。

编码愉快！！

【讨论】：

【解决方案3】：

在大多数情况下，类只是旧方法的语法糖。我们将在一分钟内回到这一点，但类至少有一件事情可以做到，而旧的方式不能：正确地扩展内置的构造函数，如 Array 和 HTMLElement。此外，当不使用 new 调用类时，类会自动抛出，而旧方法是在构造函数中添加 instanceof 检查。

现在对于糖，考虑这个老式的构造函数：

function Foo(bar) {
  this._bar = bar;
  Object.defineProperty(this, 'bar', {
    get: function() { return this._bar },
    set: function(value) {
      console.log(value);
      this._bar = value;
    }
  });
};

Foo.prototype.someMethod = function() { return this.bar + 5 };
Foo.someStaticMethod = function() { return 3 };

这有点……丑陋。考虑等效类：

class Foo {
  static someStaticMethod () {
    return 3;
  }

  constructor (bar) {
    this._bar = bar;
  }

  get bar () {
    return this._bar;
  }

  set bar (value) {
    console.log(value);
  }

  someMethod () {
    return this.bar + 5;
  }
}

干净多了。是否应该重写现有代码更像是一个折腾，但绝对要为新的东西使用类。

【讨论】：