你能绑定箭头功能吗？

Question

我已经尝试了一段时间的ES6,我只是遇到了一个小问题.

我真的很喜欢使用箭头功能,只要我能,我就会使用它们.

但是,看起来你无法绑定它们!

这是功能:

var f = () => console.log(this);

这是我想要将函数绑定到的对象:

var o = {'a': 42};

这里是我会怎么绑定f到o:

var fBound = f.bind(o);

然后我可以打电话fBound:

fBound();

哪个会输出这个(o对象):

{'a': 42}

凉!可爱!除了它不起作用.它不输出o对象,而是输出window对象.

所以我想知道:你能绑定箭头功能吗？(如果是这样,怎么样？)

---

我在Google Chrome 48和Firefox 43中测试了上面的代码,结果是一样的.

Answer 1

你不能"重新绑定"箭头功能.它将始终使用定义它的上下文进行调用.只需使用正常功能.

来自ECMAScript 2015规范:

对ArrowFunction中的arguments,super,this或new.target的任何引用都必须解析为词法封闭环境中的绑定.通常,这将是直接封闭函数的函数环境.

Answer 2

要完成,你可以重新绑定箭头功能,你只是无法改变其含义this.

bind 仍然具有函数参数的值:

((a, b, c) => {
  console.info(a, b, c) // 1, 2, 3
}).bind(undefined, 1, 2, 3)()

在这里试试:http: //jsbin.com/motihanopi/edit？js,console

Answer 3

来自MDN:

与函数表达式相比,箭头函数表达式具有更短的语法,并且词汇绑定此值(不绑定它自己的this,arguments,super或new.target).箭头功能始终是匿名的.

这意味着您无法像想要的那样将值绑定到它.

Answer 4

您不能用于bind更改this箭头函数内部的值。但是，您可以创建一个新的常规函数​​，它与旧的箭头函数执行相同的操作，然后像往常一样使用call或bind重新绑定this。

我们eval在这里使用调用来重新创建您作为普通函数传入的箭头函数，然后使用call不同的 调用它this：

var obj = {value: 10};
function arrowBind(context, fn) {
  let arrowFn;
  (function() {
    arrowFn = eval(fn.toString());
    arrowFn();
  }).call(context);
}
arrowBind(obj, () => {console.log(this)});

Answer 5

多年来,js开发人员在上下文绑定方面苦苦挣扎,问为什么thisjavascript发生了变化,多年来由于上下文绑定以及thisjavascript和this大多数其他OOP语言的含义之间的差异而引起的混乱.

这一切都让我问,为什么,为什么!为什么你不想重新加入箭头功能!那些专门创建来解决这一切问题和困惑,并避免使用bind或call或任何其他方式来保护功能的范围.

TL; DR

不,你不能重新绑定箭头功能.

Answer 6

简而言之，您不能绑定箭头函数，但请继续阅读：

想象一下您有以下箭头函数，该函数this在控制台上打印：

const myFunc = ()=> console.log(this);

因此，快速解决此问题的方法是使用普通函数，只需将其更改为：

function myFunc() {console.log(this)};

bind然后你可以使用orcall或将它绑定到任何词法环境apply：

const bindedFunc = myFunc.bind(this);

并在 的情况下调用它bind。

bindedFunc();

还有一些方法可以用来eval()做到这一点，强烈不推荐。