javascript - 基于原型(prototype)的类语法和 JavaScript 中的类语法有什么区别？

Question

这些可互换的语法是用来创建 JS 类的吗？我习惯了 class 语法，但不完全理解它们之间的区别。

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

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

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

对比

class User {

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

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

}

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

Answer 1

类和构造函数之间的主要区别是:

• 类不能在没有 `new` 的情况下被调用，但是作为构造函数的函数可以(并且它们的 `this` 是错误的)

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

• 类可以扩展比构造函数更多的类型(比如函数和数组)

  '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)'))();

• 类的原型(prototype)是它们的父类(它们继承静态属性)；构造函数的编写者通常不会为此烦恼
• 非类不能扩展类(因为它们不能调用父构造函数——见第一点)

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

  (尽管您可以通过使用 Reflect.construct 创建一个对象，使用它代替 this 并返回它来破解一个近似等价物——但我不确定您为什么会这样做，因为 Reflect.construct 不能被 polyfill)

类的作用域也像 let/const( block 作用域、临时死区、不可重新声明)而不是像 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);