Javascript - "this"范围问题修复

Question

我一直在尝试使用 Javascript 回调，并了解“this”周围的范围问题以及如何通过使用“call”或“apply”并传入对象引用来消除它。

但是，我发现了一些东西，我想知道以下是否是不好的做法？因为它通过纯粹使用对象名称而不是“this”来消除范围问题。假设我有一个有回调的函数，例如:

function getUserInput(firstName, lastName, callback) {
   callback(firstName, lastName);
}

还有一个像这样的对象:

var clientData = {
  id: 1,
  fullName: "Not Set",
  setUserName: function (firstName, lastName) {
  //this.fullName = firstName + " " + lastName;
  clientData.fullName = firstName + " " + lastName;
  }
}

要执行并查看代码的输出，我执行以下操作:

 getUserInput("Ann", "Other", clientData.setUserName);

 console.log(clientData.fullName);

这给了我“Ann Other”。完美的!然而，如果我取消注释“this.fullName”行并注释掉“clientData.fullName”，我会得到“Not Set”，并且 window.fullName 将包含“Ann Other”(“this”的传统范围问题是附加到全局窗口)。

当然，这是一个原始的例子，但是这是不好的做法吗？现在这意味着我永远不会遇到在回调函数中访问本地属性的问题。我也不需要使用“call”或“apply”函数并传入对象引用，以便我可以在正确的范围下访问“this.propertyName”。任何答案将不胜感激。

Answer 1

是的，这是一种不好的做法。如果有支持，请使用 Function.prototype.bind :

getUserInput("Ann", "Other", clientData.setUserName.bind(clientData));

(当您有原型(prototype)可以使用时，这就不那么多余了。)

或者，万无一失但不太漂亮的解决方案:

getUserInput("Ann", "Other", function(firstName, lastName) {
    clientData.setUserName(firstName, lastName);
});

额外的 ES6 模式(但如果你有 ES6，为什么不使用 bind？)

getUserInput("Ann", "Other", (...args) => clientData.setUserName(...args));