关于class中的函数问题

Question

为什么在class中的普通函数会挂在className.prototype下面，而箭头函数是挂在类的实例下面。举个例子吧

class F {
  handleX() {}
  handleY = () => {}
}

typeof F.prototype.handleX === 'function' // true
typeof F.prototype.handleY === 'function' // false 主要疑问点？？？

let ff = new F
typeof ff.handleY // function

Answer 1

因为语法就是这样设计的呀，为啥要这样设计呢？TC39 的大佬们讨论出来的结果呀。

handleY 这个语法严格意义上还不是 ES 标准呢，现在还只是个处于 stage 3 的提案。https://github.com/tc39/proposal-class-fields 但 Babel 早就支持了所以大家用得都很欢快了，尤其是在 React 中。

这里的迷惑点是箭头函数和普通函数，其实不然啦。你所说的普通函数叫方法定义，这个是 ES6 class 中就有的，而箭头函数那个，这里的定义叫做字段定义。你把箭头函数换成一个其他的值，然后尝试去理解，你看，它是不是看起来就和 handleX 毛关系都没有？

class F {
  handleX() {}
  handleY = 1
}

其实这个等价于：

class F {
  handleX() {}
  constructor() {
    this.handleY = 1;
  }
}

看起来还是很迷惑？为什么并列写一块儿，一个是在 prototype 上，另一个是在实例上？ 这个提案其实吵了很久了，现在基本没有逆转的余地了。所以你就记住就好了，method 定义在 prototype 上，field 定义在实例上。而题目中的 handleY 赋值一个箭头函数它其实是 field 定义，所以不会在原型上啦。