javascript中带有箭头函数的回调答案

【问题标题】：Callback with arrow function in javascriptjavascript中带有箭头函数的回调
【发布时间】：2017-11-04 00:28:28
【问题描述】：

假设有两个函数。

function foo(callback) {
...
}

function bar() {
...
}

假设 bar 不需要参数，我调用 foo(bar) 和 foo(() => bar()) 有什么区别？

我最近前一个发生了关于this 上下文的错误，而第二个工作正常。我知道箭头函数将this 上下文绑定到函数中，我不知道有什么区别。

仅供参考，这是有问题的代码。

socket.disconnect(socket.connect); // line 1

socket.disconnect(() => socket.connect()); // line 2

socket.disconnect(function() { socket.connect(); }); // line 3

我刚刚发现问题可能与上下文无关。它可能是应用或绑定的东西。因为第 2 行和第 3 行工作正常，而只有第 1 行显示错误。

【问题讨论】：

你研究过this的主题吗？有很多关于 SO 的信息，您可以通过简单的搜索找到...
“我知道箭头函数绑定了这个上下文”，不，它不绑定任何上下文，this 将是它在外部范围内的任何内容。
"箭头函数是匿名的并且改变 this 在函数中的绑定方式。"我在文档中读过。
是的，因为它们首先不绑定任何东西："箭头函数没有自己的this；使用封闭执行上下文的this值" MDN doc
@PatrickEvans 我只是发现这不是胖箭头问题......但我仍然很好奇有什么区别

标签： javascript ecmascript-6 callback

【解决方案1】：

首先，您所描述的与箭头函数无关。

this 的值取决于函数的调用方式。当函数是对象的属性并以foo.bar() 调用时，foo.bar 中的this 将引用foo。

所以在最后两个示例中，this 将引用 socket 而不是 socket.connect。

在您的第一个示例中，this 将引用另一个值，因为该函数不会作为socket 的方法执行。但socket.connect 可能预计将this 引用到socket。

简化示例：

function foo(callback) {
  callback();
}

var socket = {
  connect() {
    "use strict";
    console.log(this);
  },
};

foo(socket.connect);                  // undefined
foo(() => socket.connect());          // socket object
foo(function() { socket.connect()});  // socket object

【讨论】：