return function()的作用？？

Question

function(obj,len){
for(i=1;i<=len;i++){
document.getElementById(obj+"_btn"+i).onclick=(function(i){
return function(){
for(var j=1;j<=len;j++){
document.getElementById(obj+"_con"+j).style.display=(i==j)?"block":"none";
document.getElementById(obj+"_btn"+j).className=(i==j)?"curr":"0";
}
}
})(i)
}


请问(function(i)中的return function()的作用是什么？
为什么把return function()去掉    直接(function(i){……｝就出错了呢
js初学  自己搜索了一下  仍百思不得其解

Answer 1

html元素的onclick值一般都是一个函数如function x()
{
  alert("x")
}
html.onclick = x
 document.getElementById(obj+"_btn"+i).onclick=(function(i){
                                return function(){
                                    for(var j=1;j<=len;j++){
                                        document.getElementById(obj+"_con"+j).style.display=(i==j)?"block":"none";
                                        document.getElementById(obj+"_btn"+j).className=(i==j)?"curr":"0";
                                        }
                                }
                            })(i)
你这段代码是执行一个函数 ，然后返回一个函数
结果就是 document.getElementById(obj+"_btn"+i).onclick=function(){
                                    var i = x;这值变动,不定
                                    for(var j=1;j<=len;j++){
                                        document.getElementById(obj+"_con"+j).style.display=(i==j)?"block":"none";
                                        document.getElementById(obj+"_btn"+j).className=(i==j)?"curr":"0";
                                        }
                                }
                            }

Answer 2

这么写的原因是因为，i的值在循环时行的时候一直在变，真正执行触发事件，执行函数的时间，那个i早就不是你想要的i了所以必须确定一个作用域，把这个i给封在里面，以供使用

Answer 3

做闭包操作，要不你的i就为len了

Answer 4

去掉了会闭包，每个button事件里的i取的值是都是len

Answer 5

谢谢楼上  我还是不明白  其实我就是想知道为什么我要是直接写成下面这样  就出错了呢function(obj,len){
for(var i=1;i<=len;i++){
document.getElementById(obj+"_btn"+i).onclick=function(){
  for(var j=1;j<=len;j++){
  document.getElementById(obj+"_con"+j).style.display=(i==j)?"block":"none";
  document.getElementById(obj+"_btn"+j).className=(i==j)?"curr":"0";
  }
} }
}

Answer 6

aspwebchh
在2楼不是已经说了么。。 JS的变量作用域问题。

Answer 7

function(obj,len){
                        for(var i=1;i<=len;i++){
                            document.getElementById(obj+"_btn"+i).onclick=function(){
alert(i)
                             //     for(var j=1;j<=len;j++){
                               //   document.getElementById(obj+"_con"+j).style.display=(i==j)?"block":"none";
                               //   document.getElementById(obj+"_btn"+j).className=(i==j)?"curr":"0";
                                  }
                            }                        }
        }
把i弹出来看看就知道了

Answer 8

改成这样好理解了吗？看看变量i在 return function中还能访问到吗，不在同一个作用域。所以要通过函数参数的形式将其传入到function内才能访问哦function(obj,len){
function closureFunc (i) {
return function(){
            for(var j=1;j<=len;j++){
                document.getElementById(obj+"_con"+j).style.display=(i==j)?"block":"none";
                document.getElementById(obj+"_btn"+j).className=(i==j)?"curr":"0";
                }
        }
}

for(i=1;i<=len;i++){
    document.getElementById(obj+"_btn"+i).onclick=closureFunc(i);
}
}

Answer 9

楼主代码的关键点在于这个难理解是吧？function(){
                                    for(var j=1;j<=len;j++){
                                        document.getElementById(obj+"_con"+j).style.display=(i==j)?"block":"none";
                                        document.getElementById(obj+"_btn"+j).className=(i==j)?"curr":"0";
                                        }
                                }你这样想..你返回的是个函数，而这个函数里面包含了对外层函数的变量i的引用。但是记住，你当前是给onclik事件绑定了这个函数，而在你绑定的时候，并没有发生任何关于你绑定函数的onclik事件.所以onclick绑定的函数不会运行.
但外层的for(var i=0;i<len;i++)是不会关这些的,他会一直运行下去，因为它与onclik事件无关，如果len等于5，那么i运行完毕后就等于5.
这个时候，如果你绑定的onclick事件的元素被点击，JS才会去执行你绑定的函数，这个时候JS才去查看i的值为多少，那么它发现i为5，所以你的每个onclick事件函数中的i都会等于5..而使用function(){}这样的函数闭包，就是为了防止i作用域的变化，固定在当前值！

Answer 10

简单说：function 也是数据的一种。。
return function() 你不理解。那return 1 或 是return false 之类的理解么，是一样的呀。举例：function fn1(){
  var a='hello';
  return a;
}f1()//返回hellofunction fn2(){
  var a=function(){return 'hello'};//var定义，就像定义一般数据一样，function也是数据的一种
  return a;//a也是数据，所以也可以返回 
}
f2()()//返回hello

Answer 11

呵呵 这种为多个dom元素加事件的情况 闭包处理最简单 否则你加不上