What is the difference between prototype-based class syntax and class syntax in Javascript?

Question

Are these interchangeable syntaxes for creating a JS class? I use the syntax classbut do not understand the differences between them.

function User(name) {
  this.name = name;
}

User.prototype.sayHi = function() {
  alert(this.name);
}

let user = new User("John");
user.sayHi();

against.

class User {

 constructor(name) {
   this.name = name;
 }

 sayHi() {
   alert(this.name);
 }

}

let user = new User("John");
user.sayHi();

Answer 1

The main differences between classes and constructor functions:

• Classes cannot be called without new, but functions intended as constructors may (and thiswill be erroneous)

  'use strict';
  
  function Foo() {
      console.log(this);
  }
  
  class Bar {
      constructor() {
          console.log(this);
      }
  }
  
  Foo();
  Bar();

  Run codeHide result

• Classes can extend more types than constructors can (e.g. functions and arrays)

  'use strict';
  
  function Foo(body) {
      Function.call(this, body);
  }
  
  Object.setPrototypeOf(Foo, Function);
  Foo.prototype = Object.create(Function.prototype);
  
  class Bar extends Function {}
  
  (new Bar('console.log(1)'))();
  (new Foo('console.log(1)'))();

  Run codeHide result

• Class prototypes are their parents (they inherit static properties); authors of design functions usually don’t worry about it

• can not ( - . )

  'use strict';
  
  class Bar extends Function {}
  
  function Foo() {
      Bar.call(this);
  }
  
  Object.setPrototypeOf(Foo, Bar);
  Foo.prototype = Object.create(Bar.prototype);
  
  void new Foo();

  Hide result

let/const ( , , ), var ( , ) ( ).

, sayHi , , , Object.defineProperty, , sayHi , .

function UserA(name) {
    this.name = name;
}

UserA.prototype.sayHi = function () {
    alert(this.name);
};

class UserB {
    constructor(name) {
        this.name = name;
    }

    sayHi() {
        alert(this.name);
    }
}

let a = [];
let b = [];

for (let key in new UserA()) a.push(key);
for (let key in new UserB()) b.push(key);

console.log(a, b);

Hide result

Answer 2

MDN:

JavaScript-, ECMAScript 2015, JavaScript. JavaScript - .

, Babel REPL, , ES6, , ES5, :

ES6

class User {

 constructor(name) {
   this.name = name;
 }

 sayHi() {
   alert(this.name);
 }

}

let user = new User("John");
user.sayHi();

ES5

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var User = function () {
  function User(name) {
    _classCallCheck(this, User);

    this.name = name;
  }

  _createClass(User, [{
    key: "sayHi",
    value: function sayHi() {
      alert(this.name);
    }
  }]);

  return User;
}();

var user = new User("John");
user.sayHi();

ES6 + ES5 - , , . " " ES5. , , " JavaScript".