【问题标题】:Why does an anonymous function have access to a variable from the function it is defined in?为什么匿名函数可以从定义它的函数访问变量?
【发布时间】:2012-05-26 23:24:51
【问题描述】:

我正试图深入了解 jQuery 和 JavaScript 对象和函数,并掌握 this 的工作原理以及它指向的位置。

请有人解释为什么this 有效。

Cat.prototype.meowLater = function() {
    var self = this;
    window.setTimeout(
        function() {
            self.meow();
        }
        , 1000);
}

我感兴趣和困惑的一点是为什么变量self 实际上可以在计时器调用的匿名函数中访问。我认为因为self 是在另一个函数中声明的,所以它是本地的并且只能由该函数访问。

【问题讨论】:

  • 为什么这不起作用? Self 是一个局部变量,但定时器函数调用也是局部的,在 mewlater 方法中。
  • 我以前从未真正使用过匿名函数,这就是为什么我有点困惑。这是否意味着任何匿名函数都可以访问在加载它的函数中设置的所有变量(以及任何全局变量)?

标签: javascript function object this


【解决方案1】:

内部函数可以使用外部函数可用的变量。

这里,

Cat.prototype.meowLater = function() {
    // I create the variable self that refers to the this (the current object)
    var self = this;

    // I create a timeout that calls the self.meow function within an anonymous function
    /*** NOTE : You don’t always have to create an anonymous function it’s just that in
        this case, it is required ***/
    window.setTimeout(
        function() {
            self.meow();
        }
        , 1000);
}

由于setTimeoutCat.prototype.meowLater 的内部函数,self 可用于setTimeout

另外,
我们在这里没有使用this.meow(),因为this指的是当前对象,因此在setTimeout函数中指的是window

【讨论】:

  • 谢谢。现在一切都变得更有意义了!为什么setTimeout 必须附加到某个东西上,它的作用是什么?
  • setTimeout 在固定时间后调用函数。在此示例中,self.meow(); 将在 1000 micro seconds 之后调用。标记为答案,如果这对您有帮助:)
  • 我明白这一点。我的问题是setTimeout(...)window.setTimeout(...) 之间有区别吗?为什么setTimeout 必须“链接”(我不确定技术词是什么)?
  • 这是一回事,这只是确保调用了 setTimeout() 函数,而不是其他可能与此同名的函数。
  • setTimeout();window 对象的函数。所以,window.setTimeout();。这是正确的方法。但是,由于window 对象在环境中可用,因此无需添加window。它是可选的。
【解决方案2】:

函数从父作用域继承变量(除非被另一个同名且作用域更窄的变量屏蔽)。

由于匿名函数是在 self 作用域的函数内部定义的,因此它可以访问它。

【讨论】:

    【解决方案3】:

    Javascript 有嵌套作用域,因此另一个函数内部的函数会继承外部函数的所有变量(它仍在作用域内)。当您使用异步函数(在这种情况下为setTimeout)时,变量self 将引用作用域自身变量,即this(一个Cat 实例),但this 将是窗口。

    希望这会有所帮助,这需要一些时间来适应。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-02-25
      • 1970-01-01
      • 2020-08-19
      • 1970-01-01
      • 1970-01-01
      • 2012-01-13
      • 2014-03-11
      • 1970-01-01
      相关资源
      最近更新 更多