这是 Javascript 中闭包的正确示例吗？

Question

我正在阅读一本关于 Javascript 的书，并尝试了其中的一个闭包示例。

function animateIt(id) {
   var elem= document.getElementById(id);
   var tick=0;

   var timer=setInterval(function() {
     if (tick<100) {

       elem.style.left = tick+"px";
       elem.style.top=tick+"px";
       tick++;
     } else {
       clearInterval(timer);
       assert(tick==100, "Tick Accessed and has value:- "+ tick);
       assert(elem, "element accessed");
       assert(timer, "timer accessed")
     }
   }, 10);
 }
 animateIt(box);      

但是 timer 中的函数无法访问 elem、tick 等，而书上说它应该可以访问它们。 请告诉我。

Answer 1

这可以被认为是闭包，函数animateIt包含变量id和elem，所以如果你为不同的id运行animateIt它会正常工作。

Answer 2

您没有给出整个代码（框，断言），但似乎有关闭。 假设现在执行了函数 animateIt，则创建了一个新的执行上下文，以及诸如 tick 和 elem 之类的变量。

当执行到这里时：

var timer=setInterval(function() {

创建了一个新函数。这是一个匿名函数。它是 setInterval 中的函数，并且它引用了它的父函数（animateIt） 范围对象。范围对象包含变量 - elem，tick。它具有对范围对象的引用，因为函数 anon 在词法上位于函数 animateIt 内。父级本身包含诸如

之类的变量

var elem= document.getElementById(id);
var tick=0;

这些变量被您的匿名函数（在 setInterval 内）引用，因为它们位于 animateIt 的范围对象内，并且您的匿名函数引用了它。

一旦 animateIt 函数执行上下文结束，您通过 setInterval 传递给事件队列的函数会因为 setInterval 继续执行和关闭，并且它可以访问曾经“存在”的函数的 var （在执行期间），但现在没有。该函数称为 animateIt，而闭包将这些 vars(tick,elem) 保存在内存中。

Answer 3

在未命名函数调用（setInterval 包含未命名函数）中可见的刻度变量是一个闭包。

每个函数调用都会创建闭包。

//source function which contain the variable: 
//lets consider it as a global function call
var tick=0;

(function() {
    //target function
    //1. closure is created on function call and 
    //2. another characterictic of closure is that 
    // source function must be parent of the target function
    console.log(tick); //so closure is equal to implicit parametrization
    //on target function call
}());

在前面的示例中，我正在调用一个函数，一个变量被隐式添加到目标函数调用的内部“范围”。

我为“闭包”使用了另一个名称（函数调用的隐式参数化）。

function animateIt(id) {

    var timer=setTimeout(function() {
        id="wow"; //important! there is no var keyword, so the outer variable is changed
    }, 1000);

   var timer=setInterval(function() { //on each function call a closure is created
     // in your case a built in function calls the function and 
     // on each call a closure is created
     console.log(id)
   }, 10);

 }

 animateIt("test");