javascript-原生-闭包

1.变量的作用域

前提:这里只全部都通过var创建的变量或对象

1.全局变量:函数外创建变量

  var x=10;
 function test(){
  alert(
"全局变量在test函数中"+x);
 function a(){
   alert("全局变量在私有函数中"+x); 
 }
  a();
}

2.局部变量:函数内部创建变量。

 

var x=10;
function test(){
  var y=20;
  alert("全局变量在test函数中"+x);//10
  alert("局部变量在test函数中"+y);//20
  alert("局部变量在test函数中"+z);//报错,z未定义
  function a(){
    var z=30;
    alert("局部变量早函数a中"+z);//30
  }
}
注:x书全部变量在整个作用域有效
  y是局部变量在test函数中有效,在a函数外无效
  z是局部变量只在a函数中有效
但是:如果我们想在函数外使用函数的变量怎么办?
这时候就产生了一个东西,闭包。

闭包的概念:是指有权访问另一个函数作用域中的变量的函数。

创建闭包的方式,就是在一个函数内部创建另一个内部(私有)函数。

下面是闭包的实例:

1.

function test(){
  var x=10;
  return function(){
    return x;
  }
}
alert(x);//调用局部变量x,报错未定义
//调用
var a=test();
  alert(a());
说明:a实际上就是闭包匿名函数,函数test中的局部变量x一直保存在内存中,并没有在test调用后被自动清除。

2.

var y;
function test(){
  var x=10;
  y=function(){
    return x;
  }
}
//调用函数
test();//undefined
//调用
alert(y());//10

3.

function test(arg){
  var y=function(){
    return arg;
  }
  arg++;
  return y;
}
var a=test(123);//undefined
alert(a());//124

4.

function test(){
  var x=[];
  var i;
  for(i=0;i<3;i++){
    x[i]=function(){
      return i;
    }
  }
  return x;
}
var a=test();//undefined
alert(a[0]());//3
alert(a[1]());//3
alert(a[2]());//3
说明:输出结果都是3,因为循环完毕i的值为3,三个函数都是指向这一个共同的值,
那么如何解决这个问题呢?下面我们来看。

解决方案一:使用自调函数来实现

function test(){
  var x=[];
  var i;
  for(i=0;i<3;i++){
    x[i]=(function(a){
      return function(){
        return a;
      }
    })(i);
  }
  return x;
}
var a=test();//undefined
alert(a[0]());//0
alert(a[1]());//1
alert(a[2]());//2

方案二:不使用自调函数来实现

function test(){
    function makeClosure(x){
    return function(){
      return x;
    }
  }
  var a=[];
  var i;
  for(i=0;i<3;i++){
    a[i]=makeClosure(i);
  }
  return a; }
var b=test();//undefined
alert(b[0]());//0
alert(b[1]());//1
alert(b[2]());//2

闭包应用实例--Getter与Setter

var getValue,setValue;
(function(){
  var secret=0;
  getValue=function(){
    return secret;
  };
  setValue=function(v){
    secret=v;
  }
})()
alert(getValue())//查看内部变量值
setValue(3)//设置内部局部变量的值
alert(getValue());

  迭代器实例

function setup(x){
  var i=0;
  return function(){
    return x[i++];
  }
}
var next=setup(["a","b","c"]);//undefined
alert(next());//a
alert(next());//b
alert(next());//c
原文地址:https://www.cnblogs.com/yaxinwang/p/6406900.html