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

Avoid using global variables and functions in Javascript

本文关键字:全局变量 函数 Javascript      更新时间:2023-09-26

如何更改下面的JavaScript代码,以避免将变量和函数暴露给全局作用域?

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

理想情况下,如果能提供背后的原因,将不胜感激。

任何想法将非常感激!

只需将其封装在一个匿名函数中,并立即调用该函数:

(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/

标准方式是

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

使用闭包的另一种选择:函数是对象,因此您可以像其他对象一样为它们附加值:

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

或者,使用一个对象来命名函数和变量:

var stepper = 
{
    i: 0,
    nMax: 10,
    step: function ()
    {
        this.i++;
        if (this.i < this.nMax) this.step();
        else alert('finished');
    }
};
stepper.step();

下面是@PaulPRO答案的一个更简洁的版本,它使用函数声明而不是函数表达式:

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

放入一个对象,这样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();