第 7 期：ES5/ES6 的继承除了写法以外还有什么区别？

Question

第 7 期：ES5/ES6 的继承除了写法以外还有什么区别？

alanchanzm opened this issue 6 years ago · 77 comments

class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。

const bar = new Bar(); // it's ok
function Bar() {
  this.bar = 42;
}

const foo = new Foo(); // ReferenceError: Foo is not defined
class Foo {
  constructor() {
    this.foo = 42;
  }
}

class 声明内部会启用严格模式。

// 引用一个未声明的变量
function Bar() {
  baz = 42; // it's ok
}
const bar = new Bar();

class Foo {
  constructor() {
    fol = 42; // ReferenceError: fol is not defined
  }
}
const foo = new Foo();

class 的所有方法（包括静态方法和实例方法）都是不可枚举的。

// 引用一个未声明的变量
function Bar() {
  this.bar = 42;
}
Bar.answer = function() {
  return 42;
};
Bar.prototype.print = function() {
  console.log(this.bar);
};
const barKeys = Object.keys(Bar); // ['answer']
const barProtoKeys = Object.keys(Bar.prototype); // ['print']

class Foo {
  constructor() {
    this.foo = 42;
  }
  static answer() {
    return 42;
  }
  print() {
    console.log(this.foo);
  }
}
const fooKeys = Object.keys(Foo); // []
const fooProtoKeys = Object.keys(Foo.prototype); // []

class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有[[construct]]，不能使用 new 来调用。

function Bar() {
  this.bar = 42;
}
Bar.prototype.print = function() {
  console.log(this.bar);
};

const bar = new Bar();
const barPrint = new bar.print(); // it's ok

class Foo {
  constructor() {
    this.foo = 42;
  }
  print() {
    console.log(this.foo);
  }
}
const foo = new Foo();
const fooPrint = new foo.print(); // TypeError: foo.print is not a constructor

必须使用 new 调用 class。

function Bar() {
  this.bar = 42;
}
const bar = Bar(); // it's ok

class Foo {
  constructor() {
    this.foo = 42;
  }
}
const foo = Foo(); // TypeError: Class constructor Foo cannot be invoked without 'new'

class 内部无法重写类名。

function Bar() {
  Bar = 'Baz'; // it's ok
  this.bar = 42;
}
const bar = new Bar();
// Bar: 'Baz'
// bar: Bar {bar: 42}  

class Foo {
  constructor() {
    this.foo = 42;
    Foo = 'Fol'; // TypeError: Assignment to constant variable
  }
}
const foo = new Foo();
Foo = 'Fol'; // it's ok

Answer 1 · 2019-02-22T09:21:13.000Z

@alanchanzm 1. class 声明会提升 . 是不是写错了?
原文: Class declarations, unlike function declarations, are not hoisted.

Answer 2 · 2019-02-22T13:26:42.000Z

@alanchanzm 1. class 声明会提升 . 是不是写错了?
原文: Class declarations, unlike function declarations, are not hoisted.

@labike
原文有问题，class 是会提升的，其表现与let、const类似，变量名会进入TDZ。
看下例：如果没有提升，foo 会是块作用域外的Foo实例。但是由于提升的关系，块作用域内的Foo遮蔽了外层的同名函数。

var Foo = function() {
  this.foo = 21;
};

{
  const foo = new Foo(); // ReferenceError: Foo is not defined
  class Foo {
    constructor() {
      this.foo = 37;
    }
  }
}

Answer 3 · 2019-02-23T04:07:11.000Z

@alanchanzm 我觉得不对吧

{
  const foo = new Foo(); // ReferenceError: Foo is not defined
  class Foo {
    constructor() {
      this.foo = 37;
    }
  }
}

class会提升这段代码就说不过去!
class

Answer 4 · 2019-02-23T05:10:44.000Z

@labike
可能是我们对「提升」的理解不同吧？我理解的「提升」和「赋值」是两个过程。
我拆解一下那个例子：

var Foo = function() { /** pass */ };

{
  // 「块作用域」内可以访问全局变量 Foo
  const foo = new Foo();
}

var Foo = function() { /** pass */ };

{
  // 「块作用域」内无法访问全局变量 Foo，因为它被本作用域内的 Foo 遮蔽了
  // 如果 class 不会提升的话，new Foo() 应该成功调用
  const foo = new Foo(); // ReferenceError: Foo is not defined
  class Foo{ /** pass */ }
}

类似于以下代码（但不等于）：

var Foo = function() { /** pass */ };

{
  let Foo; // 区别在于此处 Foo 已经初始化为 undefined
  // 「块作用域」内无法访问全局变量 Foo，因为它被本作用域内的 Foo 遮蔽了
  const foo = new Foo(); 
  Foo = class { /** pass */}
}

Answer 5 · 2019-02-23T08:23:26.000Z

@alanchanzm 答了很多，而且很有帮助，但是离题了。

问题是继承的差异。

class Super {}
class Sub extends Super {}

const sub = new Sub();

Sub.__proto__ === Super;

子类可以直接通过 __proto__ 寻址到父类。

function Super() {}
function Sub() {}

Sub.prototype = new Super();
Sub.prototype.constructor = Sub;

var sub = new Sub();

Sub.__proto__ === Function.prototype;

而通过 ES5 的方式，Sub.__proto__ === Function.prototype

Answer 6 · 2019-02-23T13:09:56.000Z

@XueSeason 哈哈哈，审题不清，这轮面试要挂了。
再补充一点：
ES5 和 ES6 子类 this 生成顺序不同。ES5 的继承先生成了子类实例，再调用父类的构造函数修饰子类实例，ES6 的继承先生成父类实例，再调用子类的构造函数修饰父类实例。这个差别使得 ES6 可以继承内置对象。

function MyES5Array() {
  Array.call(this, arguments);
}

// it's useless
const arrayES5 = new MyES5Array(3); // arrayES5: MyES5Array {}

class MyES6Array extends Array {}

// it's ok
const arrayES6 = new MyES6Array(3); // arrayES6: MyES6Array(3) []

Answer 7 · 2019-02-27T01:01:05.000Z