Home > Article > Web Front-end > js闭包实例汇总_基础知识

js闭包实例汇总_基础知识

WBOYOriginal: 2016-05-16 16:31:461519browse

Js闭包
闭包前要了解的知识
1. 函数作用域
(1).Js语言特殊之处在于函数内部可以直接读取全局变量

如果在php里

$n=100;

function parent(){

  echo $n;

}

parent();//会报错 n未定义

?>

(2).在函数外部无法读取函数内的局部变量

复制代码代码如下:

注意函数内部声明变量时一定要加var,否则就声明了一个全局变量

复制代码代码如下:

function parent(){

m=50;

}

parent();

alert(m);//50

//当然在php里更是如此了，

复制代码代码如下:

function parent(){

  global $m;//全局 ，定义与赋值要分开

  $m=50;

}

parent();

echo $m;//50

?>

//没global的话，一样会报没定义的错误

有时，需要得到函数内部的的局部变量，就需要变通的方法实现利用js变量作用域的特点，如在函数内部定义子函数，对于子函数来说，父函数就是它的全局，子函数可以访问父函数里的变量(对于整个js代码来说又是局部变量)

复制代码代码如下:

Parent内部所有局部变量对其子函数来说都是可见的,但其子函数内的局部变量对其父函数是不可见的，这就是js特有的链式作用域结构,子对象会一级一级地向上查找所有父对象的变量,父对象的所有变量对子对象都是可见的，反之不成立！上面的son函数就是闭包
有些同学可能这样

复制代码代码如下:

function parent(){

   var m=50;

   function son(){

        alert(m);

   }

}

parent();

son()//会报 函数son未定义

注意在javascript里，在函数里声明的函数都是局部的，函数运行完后就释放了
注意这点与php的区别

复制代码代码如下:

function parent(){

  function son(){

      $m=50;

      echo $m;

  }

}

parent();

son();//输出50 不会报错

?>

闭包

函数内部定义函数，连接函数内部和外部的桥梁
闭包的作用有2个:
一是前面提到的读取函数内部的变量，
二是让这些变量的值保存在内存中，实现数据共享
下面是几个闭包的例子

复制代码代码如下:

把匿名函数的执行结果(即对里面子函数的声明赋给全局变量cut),i就保存在内存里了
执行cut()时就直接从内存取值了,i只有cnt()函数才能调用，直接alert(i)是不行的
还可以向闭包内传参

复制代码代码如下:

var cnt=(function(num){

return function(){

    alert(num);

    num++;

  }

})(5);

cnt();//5

cnt();//6

cnt();//7

//当然还可以调用时传参

var cnt=(function(){

    var i=0;

return function(num){

    num+=i;

    alert(num);

    i++;

  }

})();

cnt(1);//1

cnt(2);//3

cnt(3);//5

为了对闭包有更好的理解，我们看以下代码
比如我想返回一个数组，数组里面有5个函数，第一个函数弹出0，第二个弹出1...
代码如果这样写

复制代码代码如下:

function box(){

  var arr=[];

  for(i=0;i
      arr=function(){return i;}

    }

return arr;   

}

var a=box();

alert(a);//包含五个函数体的数组

alert(a[0]());

alert(a[1]());

弹出的函数体
function(){return i;} }
最后这个i是4,之后++成为5
For循环停止
发现均弹出5，明显不符合我们的要求

解决方案1
自我即时执行里面的函数

复制代码代码如下:

function box(){

  var arr=[];

  for(i=0;i
      arr=(function(num){return i;})(i);

    }

return arr;   

}

var a=box();

for(var i=0;i
  alert(a);

}

但是我们发现返回的数组里的元素是函数执行的结果，但我们想要的是函数有得升级我们的代码

解决方案2
闭包实现

复制代码代码如下:

function box(){
var arr=[];
for(var i=0;i

                 arr=(function(num){
                     return function(){return num;}
                 })(i);

}
return arr;
}

var arr=box();

for(var i=0;i

alert(arr());//0,1,2,3,4
}

关键代码

复制代码代码如下:

arr=(function(num){
return function(){return num;}
})(i);

i=0 时
arr[0]=(function(num){return function(){return num;}})(0);

1时

arr[1]=(function(num){return function(){return num;}})(1);

以上就是闭包的好处！非常简单实用吧。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：再谈javascript原型继承_javascript技巧Next article：让angularjs支持浏览器自动填表_AngularJS

See more

js闭包实例汇总_基础知识

Related articles