javascript - 为什么 "this"在通过逻辑运算符调用的函数中未定义？

Question

以下代码 ( codepen ) 不起作用。

"use strict"; //without strict "this" works, but it refers to window object

let person = {
  name : "Shimon",
  logName : function(){
    //console.log("test") //this works
    console.log(this.name); //doesn't work
  }
};

//person.logName(); //works
(false || person.logName)(); //doesn't work. Uncaught TypeError: Cannot read property 'name' of undefined

我想知道为什么。
当我调用 (false || person.logName)(); 我想调用 person.logName()，它确实调用了。
那么为什么我不能在这个方法中使用 this 呢？

Answer 1

JavaScript 引擎有 4 条规则来确定 this 引用。

1. New Bound:当前函数是否使用 new 关键字调用
2. 显式绑定(bind):函数是使用 Function#call 还是 Function#apply 调用的。
3. 隐式绑定(bind):函数是直接在它拥有的对象上吗？
4. 默认:如果在严格模式下 undefined 否则 global

在您的情况下，person.logName() 属于第三类，因此 this 引用设置为 person 的值。< br/>但在另一种情况下，行 (false || person.logName)() 等同于 var x = false || person.logName; x();。那是因为您正在使用表达式来获取函数，因此上下文丢失了。
所以你要么需要使用 person.logName() 要么 (false || person.logName).call(person)

这是一个更复杂的例子:

var actionMap = {
  0: function() {
    console.log(this === actionMap ? "actionMap" : "global");
  },
  1: function() {
    console.log(this === actionMap ? "actionMap" : "global");
  },
};

function other() {
  console.log(this === actionMap ? "actionMap" : "global");
}

actionMap[0](); // works
(actionMap[0])(); // works, brackets get ignored
(actionMap[0] || actionMap[1])(); // context is lost in the expression
(actionMap[2] || actionMap[1])(); // context is lost in the expression
(actionMap[2] || actionMap[1]).call(actionMap); // works, context is called explicitly

var boundOther = other.bind(actionMap);
(boundOther || actionMap[1])(); // function is bound

正如您在此示例中所见，即使两个函数都属于同一个对象，上下文也会丢失。由于被调用的函数是由表达式派生的，不会立即在其拥有的对象上调用。