嵌套函数中的Javascript“this”指针难题

在Web开发场景中，嵌套函数中“this”指针的行为可能会令人费解。考虑以下代码：

var std_obj = {
  options: {rows: 0, cols: 0},
  activeEffect: "none",
  displayMe: function() {
    // this refers to std_obj
    if (this.activeEffect == "fade") {}

    var doSomeEffects = function() {
      // this surprisingly refers to window object
      if (this.activeEffect == "fade") {}
    }

    doSomeEffects();
  }
};

std_obj.displayMe();

上面的代码中，嵌套函数“doSomeEffects()”内的“this”指针意外指向“window”对象。此行为与嵌套函数继承外部函数作用域的预期相矛盾，其中“this”指的是“std_obj”。

理解 Javascript 函数调用和作用域

Javascript 函数中“this”的行为取决于函数的调用方式。一般有以下三种方式：

1. 方法调用： someThing.someFunction(arg1, arg2, argN)
2. Function.call 调用： someFunction.call(someThing, arg1, arg2, argN)
3. Function.apply 调用: someFunction.apply(someThing, [arg1, arg2, argN])

在所有这些调用中，“this”对象将是“someThing”。但是，调用没有前导父对象的函数（例如示例中的 doSomeEffects()）通常会导致“this”对象被设置为全局对象，在大多数浏览器中是“window”对象。

在示例代码中，嵌套函数“doSomeEffects()”在没有父对象的情况下被调用，因此它继承了全局作用域，并且它的“this”指针指向“window”对象。这就是您观察到意外行为的原因。

为了确保嵌套函数可以访问“std_obj”范围，您可以使用 Function.call() 方法调用它，并将“std_obj”对象作为第一个参数：

var doSomeEffects = function() {
  // this now refers to std_obj
  if (this.activeEffect == "fade") {}
}

doSomeEffects.call(std_obj);

理解 Javascript 中“this”指针行为的细微差别对于构建健壮且可维护的应用程序至关重要。