Welcome to 16892 Developer Community-Open, Learning,Share
menu search
person

Categories

为什么在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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
338 views
Welcome To Ask or Share your Answers For Others

1 Answer

因为语法就是这样设计的呀,为啥要这样设计呢?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 定义,所以不会在原型上啦。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to 16892 Developer Community-Open, Learning and Share
...