JS Class：ES6 myFunc(){..} 和 ES5 myFunc = function() {...} 在 class 声明中的区别

Question

在下面的代码中，

class PersonClass {
  constructor(fname) {
    this.fname = fname;
  }
  read = function() { console.log('I am reading') }
  speak () { console.log('I am speaking'); }
}

//Instantiate 
let p1 = new PersonClass('Raj')

read = function() { console.log('I am reading') } 成为新创建实例的属性，即

p1.hasOwnProperty('read') 是 true

而不是 speak() { console.log('I am speaking'); } 被分配给 PersonClass.prototype。即

p1.hasOwnProperty('speak') 是 False

p1.__proto__.hasOwnProperty('speak') 是 true

谁能解释一下为什么会这样。

class 中两种方法声明方式的本质区别是什么。

我认为 speak() {...} 只是 speak = function() {...}（在 ES6 中）的较短语法

谢谢

Answer 1

read = function() { console.log('I am reading') }

是新的 class 字段 语法。它实际上与分配给构造函数中实例的 read 属性相同：

class PersonClass {
  constructor(fname) {
    this.read = function() {
      console.log('I am reading')
    }
    this.fname = fname;
  }
  speak() {
    console.log('I am speaking');
  }
}

speak，另一方面，是一个普通的class方法，这意味着它在原型上，PersonClass.prototype，与Object.getPrototypeOf(p1)是一回事，这与 p1.__proto__（不推荐使用的语法）相同。

class PersonClass {
  constructor(fname) {
    this.read = function() {
      console.log('I am reading')
    }
    this.fname = fname;
  }
  speak() {
    console.log('I am speaking');
  }
}
let p1 = new PersonClass('Raj')
console.log(
  PersonClass.prototype.hasOwnProperty('speak'),
  Object.getPrototypeOf(p1) === PersonClass.prototype,
  p1.__proto__ === PersonClass.prototype
);

因此，speak 属性位于实例的 内部原型 上，而不是实例本身。 read 属性是实例的直接属性，就像 fname 属性.

请记住，class 字段语法是 still an experimental proposal（第 3 阶段）。它至少在 Chrome 中实现了，但还没有完全正式化。

JS Class：ES6 myFunc(){..} 和 ES5 myFunc = function() {...} 在 class 声明中的区别

JS Class: Difference between ES6 myFunc(){..} and ES5 myFunc = function() {...} in a class declaration

javascript

function-expression

es6-class

class-fields