JavaScript setInterval未正确绑定到正确的闭包 [英] JavaScript setInterval not being properly bound to correct closure

问题描述

问题

喜欢的人，我对JavaScript非常新，我来自面向对象的Python和Java世界，这是我的免责声明。 p>

下面有两个代码块，替代实现，一个在JavaScript中，一个在Coffeescript。我试图在Meteor.js应用程序中的服务器上运行它们。我遇到的问题是当调用函数setInterval使用绑定方法this.printSomething作为我的回调，一旦该回调被执行，它失去范围与实例导致this.bar未定义！谁能解释为什么JavaScript或coffescript代码不工作？

JavaScript实现

  function Foo（bar）{
 this.bar = bar; 
 
 this.start = function（）{
 setInterval（this.printSomething，3000）; 
} 
 
 this.printSomething = function（）{
 console.log（this.bar）; 
} 
} 
 
 f = new Foo（5）; 
 f.start（）; 
  

Coffeescript实现

  class foo 
 constructor：（bar） - > 
 @bar = bar 
 
 start：（） - > 
 Meteor.setInterval（@printSomething，3000）
 
 printSomething：（） - > 
 console.log @bar 
 
x = new foo 0 
 x.start（）
  

解决方案

您在setInterval回调中丢失了 Foo 的上下文。您可以使用 Function.bind 设置上下文为这样设置回调函数引用的上下文回到 Foo 实例。

  setInterval（this.printSomething.bind（this），3000）; 
  

随着电话

  setInterval（this.printSomething，3000）; 
 

回调方法获取全局上下文（如果是web或全局的窗口， ），因此这个是指全局上下文。

小提琴

或只是

  this.printSomething = function（）{
 console.log酒吧）; //你可以在这里访问吧，因为它没有绑定到Foo的实例
} 
  

Problem

Hi people, I'm reasonably new to JavaScript and I come from the very object-oriented world of Python and Java, that's my disclaimer.

There are two chunks of code below, alternative implementations, one in JavaScript, one in Coffeescript. I am trying to run them on the server in a Meteor.js application. The problem I am experiencing is when calling the function "setInterval" using the bound-method "this.printSomething" as my callback, once that callback is executed, it loses scope with the instance resulting in "this.bar" being undefined! Can anyone explain to me why either the JavaScript or the coffescript code isn't working?

JavaScript Implementation

function Foo(bar) {
  this.bar = bar;

  this.start = function () {
    setInterval(this.printSomething, 3000);
  }

  this.printSomething = function() {
    console.log(this.bar);
  }
}

f = new Foo(5);
f.start();

Coffeescript Implementation

class foo
    constructor: (bar) ->
        @bar = bar

    start: () ->
        Meteor.setInterval(@printSomething, 3000)

    printSomething: () ->
        console.log @bar

x = new foo 0
x.start()

解决方案

You lose your context of Foo in the setInterval callback. You can use Function.bind to set the context to something like this to set the context for the callback function reference back to Foo instance.

setInterval(this.printSomething.bind(this), 3000);

With the call

setInterval(this.printSomething, 3000);

The callback method gets the global context (window in case of web or global in case of tenants like node) so you don't get property bar there since this refers to the global context.

Fiddle

or just

 this.printSomething = function() {
     console.log(bar); //you can access bar here since it is not bound to the instance of Foo
  }

这篇关于JavaScript setInterval未正确绑定到正确的闭包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！