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

javascript function this nested

2022-08-30 05:24:54

我有一个关于如何在嵌套函数场景中处理“this”指针的问题。

假设我将以下示例代码插入到网页中。当我调用嵌套函数“doSomeEffects（）”时，我收到一个错误。我在Firebug中检查了一下，它表明当我处于嵌套函数中时，“this”指针实际上指向全局“window”对象 - 这是我没想到的。我一定没有正确理解某些东西，因为我认为既然我在对象的函数中声明了嵌套函数，那么它应该具有与函数相关的“本地”范围（即“this”指针将引用对象本身，就像我在第一个“if”语句中一样）。

任何指针（没有双关语）将不胜感激。

var std_obj = {
  options : { rows: 0, cols: 0 },
  activeEffect : "none",
  displayMe : function() {

    // the 'this' pointer is referring to the std_obj
    if (this.activeEffect=="fade") { }

    var doSomeEffects = function() {

      // the 'this' pointer is referring to the window obj, why?
      if (this.activeEffect=="fade") { }

    }

    doSomeEffects();   
  }
};

std_obj.displayMe();

答案 1

在JavaScript中，对象实际上是基于你如何进行函数调用。this

通常，有三种方法可以设置对象：this

someThing.someFunction(arg1, arg2, argN)
someFunction.call(someThing, arg1, arg2, argN)
someFunction.apply(someThing, [arg1, arg2, argN])

在上述所有示例中，对象将为。调用没有前导父对象的函数通常会获得全局对象，在大多数浏览器中，全局对象是指该对象。thissomeThingwindow

答案 2

由于这似乎是同类中投票率最高的问题之一，因此让我添加一下，经过这么多年，使用箭头函数的ES6解决方案：

var std_obj = {
  ...
  displayMe() {
    ...
    var doSomeEffects = () => {
                        ^^^^^^^    ARROW FUNCTION    
      // In an arrow function, the 'this' pointer is interpreted lexically,
      // so it will refer to the object as desired.
      if (this.activeEffect=="fade") { }
    };
    ...    
  }
};