通过示例彻底搞懂js闭包

例1

function sayhello(name) 
{
 var text = 'hello ' + name;
 var sayalert = function() { console.log(text); }
 sayalert();
}

sayhello("bob") // 输出"hello bob"

在sayhello()函数中定义并调用了sayalert()函数；sayalert()作为内层函数，可以访问外层函数sayhello()中的text变量。

例2

function sayhello2(name) 
{
 var text = 'hello ' + name; // 局部变量
 var sayalert = function() { console.log(text); }
 return sayalert;
}

var say2 = sayhello2("jane");
say2(); // 输出"hello jane"

例3

function buildlist(list) {
 var result = [];
 for(var i = 0; i < list.length; i++) {
  var item = 'item' + list[i];
  result.push( 
    function() {
      console.log(item + ' ' + list[i]);
    } 
   );
 }
 return result;
}

var fnlist = buildlist([1,2,3]);
for (var j = 0; j < fnlist.length; j++) {
  fnlist[j](); 
}

得到的结果：连续输出3个"item3 undefined"

解析：通过执行buildlist函数，返回了一个result，那么这个result存放的是3个匿名函数。然而这三个匿名函数其实就是三个闭包，因为它可以访问到父函数的局部变量。所以闭包内的保留的i是最终的值为3.所以list[3]肯定是undefined. item变量值为item3.

改成如下代码：

function buildlist(list) {
 var result = [];
 for(var i = 0; i < list.length; i++) {
  var item = 'item' + list[i];
  result.push( 
    (function(i) {
      console.log(item + ' ' + list[i]);
    })(i)
   );
 }
 return result;
}

var fnlist = buildlist([1,2,3]);

得到的结果：

item1 1
item2 2
item3 3

解释：这儿虽然传递了一个数组进去，但是返回的是三个自执行的函数。

例4

function newclosure(somenum, someref) 
{
 var anarray = [1,2,3];
 var num = somenum;
 var ref = someref;
 return function(x) 
 {
 num += x;
 anarray.push(num);
 console.log('num: ' + num + "; " + 'anarray ' + anarray.tostring() + "; " + 'ref.somevar ' + ref.somevar);
 }
}
closure1 = newclosure(40, {somevar: "closure 1"}); 
closure2 = newclosure(1000, {somevar: "closure 2"}); 
closure1(5); // 打印"num: 45; anarray 1,2,3,45; ref.somevar closure 1"
closure2(-10); // 打印"num: 990; anarray 1,2,3,990; ref.somevar closure 2"

每次调用newclosure()都会创建独立的闭包，它们的局部变量num与ref的值并不相同。

例5

function sayalice() 
{
 var sayalert = function() { console.log(alice); }
 var alice = 'hello alice';
 return sayalert;
}

var sayalice2 = sayalice();
sayalice2(); // 输出"hello alice"

alice变量在sayalert函数之后定义，这并未影响代码执行。因为返回函数sayalice2所指向的闭包会包含sayalice()函数中的所有局部变量，这自然包括了alice变量，因此可以正常打印”hello alice”。

例6

function setupsomeglobals() {
 var num = 666;
 galertnumber = function() { console.log(num); }
 gincreasenumber = function() { num++; }
 gsetnumber = function(x) { num = x; }
}
setupsomeglobals();
galertnumber(); // 输出666
gincreasenumber();
galertnumber(); // 输出667
gsetnumber(5);
galertnumber(); // 输出5

解释：首先galertnumber，gincreasenumber，gsetnumber是三个全局变量，并且其三个值都是匿名函数，然而这三个匿名函数本身都是闭包。他们操作的num都是保存在内存中的同一个num，所有会得出上面的结果。

以上这篇通过示例彻底搞懂js闭包就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。