标签: arrow-functions

在CoffeeScript中构建类时,是否应使用=>("胖箭头")运算符定义所有实例方法,并使用->运算符定义所有静态方法？

使用带有词法this绑定的ES6箭头功能非常棒.

但是,我刚刚遇到一个问题,使用它与典型的jQuery点击绑定:

class Game {
  foo() {
    self = this;
    this._pads.on('click', function() {
      if (self.go) { $(this).addClass('active'); }
    });
  }
}

改为使用箭头功能:

class Game {
  foo() {
    this._pads.on('click', () => {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

然后$(this)转换为ES5(self = this)类型闭包.

是一种让Traceur忽略"$(this)"进行词法绑定的方法吗？

我在一个Angular示例中遇到了这个构造,我想知道为什么选择它:

_ => console.log('Not using any parameters');

我理解变量_意味着不关心/不使用但因为它是唯一的变量是有任何理由更喜欢使用_ over:

() => console.log('Not using any parameters');

当然,这不能是一个字符少于键入.()语法在我看来更好地传达了intent,并且更具特定类型,因为否则我认为第一个示例应该是这样的:

(_: any) => console.log('Not using any parameters');

如果重要,这就是使用它的背景:

submit(query: string): void {
    this.router.navigate(['search'], { queryParams: { query: query } })
      .then(_ => this.search());
}

我正在使用我的React app运行lint,我收到此错误:

error    JSX props should not use arrow functions        react/jsx-no-bind

这就是我正在运行箭头功能(内部onClick)的地方:

{this.state.photos.map(tile => (
  <span key={tile.img}>
    <Checkbox
      defaultChecked={tile.checked}
      onCheck={() => this.selectPicture(tile)}
      style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
    />
    <GridTile
      title={tile.title}
      subtitle={<span>by <b>{tile.author}</b></span>}
      actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>}
    >
      <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>
    </GridTile>
  </span>
))}

这是一个应该避免的不良做法吗？什么是最好的方法呢？

下面的export语句给出了语法错误

export default const hello = () => console.log("say hello")

为什么？

我只能导出命名函数

export function hello() {
  console.log("hello")
}

是什么原因？

我想转换这段代码:

var formatQuoteAmount = function (tx) {
    return Currency.toSmallestSubunit(tx.usd, 'USD');
};
var quoteAmounts = res.transactions.map(formatQuoteAmount);

进入匿名箭头功能.我写过:

var quoteAmounts = res.transactions.map(tx => Currency.toSmallestSubunit(tx.usd, 'USD'));

我expression expected在箭头处遇到语法错误.我在这里查找了默认语法,看起来我的代码的语法是正确的.任何想法可能是什么问题？

我有它使用这种语法:

    var quoteAmounts = res.transactions.map(function (tx) {
        return Currency.toSmallestSubunit(tx.usd, 'USD')
    });

但我想把它变成一个单行,带箭头功能.

继续前进 node v5.3.0

我在几个地方读过,关键的区别是" this在箭头函数中是词法绑定的".这一切都很好,但我实际上并不知道这意味着什么.

我知道这意味着它在定义函数体的大括号范围内是独一无二的,但我实际上无法告诉你以下代码的输出,因为我不知道所指的this是什么,除非它指的是胖箭头函数本身....这似乎没用.

var testFunction = () => { console.log(this) };
testFunction();

在我看来,在ES6,下面的两个功能都非常接近相同的:

function () {
  return this;
}.bind(this);

() => {
  return this;
};

最终结果看起来是一样的:箭头函数生成一个JavaScript函数对象,其this上下文绑定到与this创建它们的位置相同的值.

显然,在一般意义上,Function.prototype.bind它比箭头函数更灵活:它可以绑定到本地以外的值this,并且它可以this在任何时间点绑定任何函数,可能在最初创建之后很长时间.不过,我不问如何bind本身就是从箭头的功能不同,我问箭头的功能是如何从立即调用不同bind使用this.

ES6中的两个结构之间是否有任何差异？

我是ES6和React的新手,我一直在看箭头功能.为什么有些箭头函数在胖箭头之后使用花括号而有些使用括号？例如:

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

与

const handleBar = (e) => {
    e.preventDefault();
    dispatch('logout');
};

谢谢你的帮助!

(() => console.log(arguments))(1,2,3);

// Chrome, FF, Node give "1,2,3"
// Babel gives "arguments is not defined" from parent scope

根据Babel(以及我可以告诉TC39的初步建议),这是"无效的",因为箭头函数应该使用其父作用域作为参数.我能找到的唯一信息与此相矛盾的是一条评论说这被TC39拒绝,但我找不到任何支持这一点.

只是在这里寻找官方文档.