避免在 Javascript 中使用全局变量和函数

Question

如何更改下面的 JavaScript 代码，以避免将变量和函数暴露给全局 scope？

var nMax = 10;
var i = 0;
var step = function(){
                //do stuff
                i += 1;
                if(i < nMax){
                                step();
                }else{
                                alert('finished');
                }
}
step();

理想情况下，如果可以提供其背后的原因，将不胜感激。

任何想法将不胜感激！

Answer 1

只需将其包装在匿名 function 中，然后立即调用 function：

(function(){
    var nMax = 10;
    var i = 0;
    var step = function(){
                    //do stuff
                    i += 1;
                    if(i < nMax){
                                    step();
                    }else{
                                    alert('finished');
                    }
    }
    step();
})();

另一个例子： http://jsfiddle.net/n5Srd/

Answer 2

标准方法是

var step = function(){
  var nMax = 10;
  var i = 0;
  return function() {
                //do stuff
                i += 1;
                if(i < nMax){
                                step();
                }else{
                                alert('finished');
                }
  };
}();
step();

Answer 3

使用闭包的替代方法：函数是对象，因此您可以像任何其他 object 一样将值附加到它们：

function step()
{
    step.i++;

    if (step.i < step.nMax) step();
    else alert('finished');
}

step();

---

或者，使用 object 命名 function 和变量：

var stepper = 
{
    i: 0,
    nMax: 10,
    step: function ()
    {
        this.i++;

        if (this.i < this.nMax) this.step();
        else alert('finished');
    }
};

stepper.step();

---

这是@PaulPRO 答案的更简洁版本，它使用 function 声明而不是 function 表达式：

(function ()
{
    var i = 0,
        nMax = 10;

    function step()
    {
        i++;

        if (i < nMax) step();
        else alert('finished');
    }

    step();
})();

Answer 4

放入 object 以便通过以下方式调用 fn：-

 var stepHolder = {};
 stepHolder.step = (function(nMax){
 var i = 0;
 return function step(){
            //do stuff
             i += 1;
            if(i < nMax){
                            step();
            }else{
                            alert('finished');
            }
  };}
  )(10);

    stepHolder.step();