非箭头函数的单行缩写？答案

【问题标题】：Single line shortform for non-arrow function?非箭头函数的单行缩写？
【发布时间】：2017-07-27 23:18:50
【问题描述】：

有时，主要是在课堂上，我需要做一个单行函数。

例如：

class Blah {
    getVisibilityAnimValue() { return this.state.isVisible ? 100 : 0 }
}

在 ES6 中有什么友好的方式吗？我试图省略周围的卷曲并省略返回，但它不起作用。

【问题讨论】：

非箭头函数？为什么？
相关：ES6 getter/method without curly braces
ES6 方法定义语法已经比 ES5 Blah.prototype.getVisibilityAnimValue = function() { … }; 友好得多
@Kinduser 只是为了简短的缘故做一个=> 会导致一个无用的.bind 正确（如果我不需要访问this）？
我不认为箭头函数真的做了“无用的绑定”。我认为这是解释器内置的一个功能，每个箭头函数都有一个 this 值与它在其范围上下文的定义中相关联。是的，我认为他们可以使用.bind()，但我怀疑它的级别低于此。它没有将this 值与它的调用方式相关联（就像解释器对普通函数所做的那样），它使用与其词法范围上下文相关联的this 值。基本上，解释器将分配一个 this 值 - 只是哪个值的问题。

标签： javascript ecmascript-6

【解决方案1】：

在 ES6 中有什么友好的方式吗？

不，没有。我想你已经知道，为了使用this 来引用调用实例，你不能使用箭头函数（根据它的调用方式，它使用词汇this 而不是this）。因此，您必须使用传统的 ES6 方法定义。因此，您需要大括号{} 并且需要return。

ES6 类语法至少为您节省了 ES5 方案：

Blah.prototype.getVisibilityAnimValue = function() {...}

我试图省略周围的卷曲并省略返回，但它不起作用。

是的，这些仍然是必需的。

如果您有很多类似这样工作的方法并使用相同的逻辑，您可以将逻辑分解为共享函数。

// define this once and then use it many places
function zVal(val) {
     return val ? 0 : 100;
}

getVisibilityAnimValue() { return zVal(this.state.isVisible) }

但是，对于这么简单的事情，这是否“更好”是有争议的，因为它现在涉及一个额外的函数调用，并且使它更难（一目了然）看到它的作用。

【讨论】：

感谢 jfriend 的深入解答。

【解决方案2】：

没有。这就是创建箭头函数的确切原因之一。

【讨论】：

然而，箭头函数不能在这里使用，因为 OP 需要访问this。
谢谢@4castle 是的，我需要这个。我想我可以在构造函数中重新绑定它。箭头函数在 babel 等中进行绑定不会有额外的开销吗？