What makes ES6 class syntax better than traditional prototype approach?

Should I replace all my current objects with classes since I don't care about the cross browser stuff?

What makes ES6 class syntax better than traditional prototype approach?

Should I replace all my current objects with classes since I don't care about the cross browser stuff?

• javascript
• class
• ecmascript-6

• 3 Pretty sure it's just syntactical sugar - it's still prototype based under the hood. – Emissary Commented Mar 25, 2015 at 9:08
• There's a difference between "not caring" for browser patibility, and actively breaking your code. – Cerbrus Commented Mar 25, 2015 at 9:14
• Should note that if you want to start writing ES6 while still producing production-usable javascript cross-browser you should take a look at Google's Traceur transpiler. – Emissary Commented Mar 25, 2015 at 9:16
• Yeah, it's very important to understand that the fundamental principles of JS don't really change. The class syntax is just syntactic sugar, just like e.g. arrow functions. – Felix Kling Commented Mar 25, 2015 at 13:17

3 Answers 3

ES6 classes are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.

ES6 class based syntax is much better than traditional prototype approach,

• Compared to constructors and constructor inheritance, classes make it easier for beginners to get started.

• Subclassing is supported within the language.

• Built-in constructors are subclassable.

• No library for inheritance is needed, anymore; code will bee more portable between frameworks.

• They provide a foundation for advanced features in the future (mixins and more).

So if you don't care about cross browser, then go with class based syntax.

Happy coding!!

For the most part classes are just syntactic sugar over the old way. We'll get back to that in a minute, but there is at least one thing classes can do that the old way can't: properly extend built-in constructors like Array and HTMLElement. Additionally, classes will automatically throw when not called with new whereas the old way was to add an instanceof check in the constructor.

Now for the sugar, consider this old-style constructor function:

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 };

That's kinda... ugly. Consider the equivalent class:

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;
  }
}

Much cleaner. Whether or not you should re-write existing code is more of a toss-up, but definitely use classes for the new stuff.