Question

我正在将一些代码转换为ES6，在一部分我试图理解胖箭头绑定。我有这样的代码：

function callApi(api, payload, header) {
    $http.post(api, payload, header)
    .success(function(data) {...})
    .error(function (data, status) { handleError(data, status) })
}

function handleError(data, status) {...}

我已经改变了这个，这有效：

callApi(api, payload, header) {
    this.$http.post(api, payload, header)
    .success((data) => {...})
    .error((data, status) => this.handleError(data, status))
}

handleError(data, status) {...}

当我尝试调用handleError时，什么不起作用：

.error((data, status) => this.handleError)

我认为可能会将错误处理委托给handleError函数，但它并没有。有人可以帮助我理解我对箭头绑定的误解，它不能像（）=＆gt; myFunction一样使用，有没有办法像这样进行包含绑定this的委托？

Answer 1

我已将其更改为有效的(data, status) => this.handleError(…)

如果handleError和this.handleError都有效，我很担心。这可能表明您已将它们放在全局范围内并且在没有接收器的情况下调用您的函数。我建议调用直接引用（仅handleError(…)）并使用strict mode（无论如何都会成为ES6的默认值）。

当我尝试调用handleError时，什么不起作用：(data, status) => this.handleError

嗯，简单：你不是在这里调用，你已经编写了一个返回handleError函数的箭头函数。

你应该能够通过完全不使用箭头功能来简化你的代码：

callApi(api, payload, header) {
    this.$http.post(api, payload, header)
    .success((data) => {...})
    .error(handleError)
}

或者如果handleError是this的方法但依赖于在实例上调用，则使用.bind()：

….error(this.handleError.bind(this));

在这种情况下，您原来的ES5不应该有效吗？！

Answer 2

箭头函数的this值是包含函数的this。它不会创建自己的this。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this

胖箭代表团

2 个答案: