javascript - 进行属性查找时，javascript 如何处理 `this`？

Question

我正在编写一个函数，它需要接受一个对象并调用该对象的方法。在调用函数时，我无法理解 this 是如何设置的。

假设我有这个对象:

myObj = {
  x: 2,
  get: function() {
    return this.x;
  }
};

如果我只是这样做:

callbackEval = function(fn) {
  return fn();
};

然后调用它

callbackEval(myObj.get)

这将返回 undefined，因为 this 未绑定(bind)。显然，如果我把它写成

callbackEval(function() {
  return myObj.get() 
});

然后它返回 2，如我所料。

但是，如果我不传递回调，而是传递一个属性名称，查找该属性，然后调用该函数，我会得到混合结果。

假设我编写了这些变体:

propEval = function(obj, fnName) {
  const fn = obj[fnName];
  return fn();
}

propEval2 = function(obj, fnName) {
  return obj[fnName]();
}

propEval3 = function(obj, fnName) {
  return (obj[fnName])()
}

propEval4 = function(obj, fnName) {
  return (obj[fnName] || true)()
}

然后这样调用它们:

propEval(myObj, "get");
propEval2(myObj, "get");
propEval3(myObj, "get");
propEval4(myObj, "get");

然后，按顺序，我得到:

undefined
2
2
undefined

JavaScript 处理这 4 种变体的方式有何区别？为什么当我们在 propEval2 和 propEval3 中调用时 this 被绑定(bind)，但在 propEval4 中却没有？

Answer 1

部分答案:this 坦率地说，是一个函数的参数。它是第 0 个参数，隐藏并以特殊方式传递给它(或以显式方式 - 使用 call 和 apply)。顺便说一句，也没有方法，只有恰好是对象属性的函数。如果您以这种方式调用函数:foo.bar() (=== foo['bar']())，您将隐式传递给它 foo 作为它的 this 绑定(bind)。当您以这种方式调用它时:bar()，您不会。

因此:propEval - 没有对象，没有 this 绑定(bind)。

propEval2 - 调用所谓“方法”的经典示例。

propEval3 - () 在这里无关紧要。无论有没有它们，表达式的计算都是一样的，成员访问运算符和函数调用运算符具有相同的优先级。

propEval4 - 它看起来像上面那个，不是吗？哈!它实际上做的是首先计算表达式 (obj[fnName] || true)，然后调用结果。还不如

const someTemporaryVariable = obj[fnName] || true;
return someTemporaryVariable();

我觉得。