如何在一个循环(返回另一个函数)的函数工作? [重复](How does a function

2019-07-22 03:40发布

这个问题已经在这里有一个答案:

  • JavaScript的闭包内环路-简单实用的例子 42个回答

我一直在试图将分配给在JavaScript中动态创建的“”标签的onclick事件的函数。 所有的标签都在一个循环中创建如下:

for ( var i = 0; i < 4; i++ )
{
  var a = document.createElement( "a" );
  a.onclick = function( ) { alert( i ) };
  document.getElementById( "foo" ).appendChild( a );
}

所有四个环节的提醒值始终为“4”。 很明显。 谷歌搜索时,我遇到了一个帖子,显示下面的代码片段:

a.onclick = (function(p, d) {
return function(){ show_photo(p, d) }
})(path, description);

我设法调整它为我的需求,并得到了警报(我)的东西才能正常工作,但我会很感激,如果有人能解释一下上面的代码做什么。

Answer 1:

当您指定的功能单击处理程序,一个封闭创建。

基本上,当你嵌套函数,内部函数即使它们的父功能已经执行之后指存在于它们的外围功能变量的封闭形成。

在被执行的单击事件时,处理器指的是最后一个值i变了,因为变量被存储在封闭。

正如您所注意到,通过包装,以接受单击处理功能i变量作为自变量,并返回另一个功能(基本上创建另一个关闭),它的工作原理像您期望:

for ( var i = 0; i < 4; i++ ) {
  var a = document.createElement( "a" );
  a.onclick = (function(j) { // a closure is created
    return function () {
      alert(j); 
    }
  }(i));
  document.getElementById( "foo" ).appendChild( a );
}

当你重复,实际创建4层的功能,每个功能存储到参考i在它被创建时(通过使i ),该值被存储在所述外罩和所述内功能被执行的点击事件触发时。

我用下面的代码片段来解释关闭(和一个非常基本的概念咖喱 ),我认为,一个简单的例子可以让更容易得到的概念:

// a function that generates functions to add two numbers
function addGenerator (x) { // closure that stores the first number
  return function (y){ // make the addition
    return x + y;
  };
}

var plusOne = addGenerator(1), // create two number adding functions
    addFive = addGenerator(5);

alert(addFive(10)); // 15
alert(plusOne(10)); // 11


Answer 2:

没有进入太多细节,这基本上是通过在立即执行,并传递回元素被点击时要执行的功能的功能包装他们创建实例变量的副本。

想想看这样的:

function() { alert(i); }  // Will expose the latest value of i
(function(I) { return function() { alert(I); }; })(i); // Will pass the current
                                                       // value of i and return
                                                       // a function that exposes
                                                       // i at that time

所以每次循环过程中你实际执行与该变量的当前值返回函数的函数。

其中,如果您想象一下,你有4个锚在循环您正在创建一个可以看作4个独立的功能..

function() { alert(0); };
function() { alert(1); };
function() { alert(2); };
function() { alert(3); };

我会考虑寻找到的范围和封闭的JavaScript,如果你走这条路,不明白到底发生了什么,你可以遇到来自意外的行为,大规模的问题。



Answer 3:

当触发onclick事件,匿名函数被调用,它指的是同一个变量i在循环使用和它拥有的最后的值i ,这是4。

你的问题的解决方案是使用一个函数返回一个函数:

a.onclick = (function(k) {return function() { alert(k); }; })(i);


文章来源: How does a function in a loop (which returns another function) work? [duplicate]