深刻理解 JavaScript--- 闭包

2,329 阅读4分钟
原文链接: yuzmb.github.io

闭包是指那些能够访问独立(自由)变量的函数 (变量在本地使用,但定义在一个封闭的作用域中)。换句话说,这些函数可以“记忆”它被创建时候的环境。——这句话其实有点难以理解。我觉得应该用一些例子来理解闭包的含义。

  • 闭包#1

先来看一个函数:

function f(){
  var b = "b";
  return function(){
    return b;
  }
  }

这个函数含有一个局部变量b,它在全局空间里面是不可见的。而f()的返回值是另一个匿名函数,该函数有自己的私有的空间,可以访问f()的空间和全局空间,所以b对它来说是可见的。

var n = f();
n();//此时控制台输出"b"

因为f()是一个全局函数,它可以在全局空间被调用,当然也可以将其返回值赋值给另一个全局变量n,从而生成一个可以访问f()私有空间的新的全局函数。

  • 闭包#2

再来看看下面这个跟上面差不多的函数,在这里f()不再返回函数了,而是直接在函数体内创建一个新的全局函数

var n;
function f(){
  var b = "b";
  n = function(){
    return b;
  }
  }
f();
n();//调用f(),然后再调用n(),控制台输出"b"

由于n()没有使用var语句,因此它是全局的,同时它也可以访问f()的作用域,所以哪怕n()最后升级为全局函数,但它依然可以保留对f()作用域的访问权。

  • 闭包#3

函数通常会让自身的参数视为局部变量,所以我们创建返回函数时,也可以令其返回父级函数的参数,例如:

function f(arg){
  var n = function(){
    return arg;
  };
  arg++;
  return n;
  }
var m = f(123);
m();//调用函数,输出124

有一点很重要:n被赋值时函数并没有被调用,调用发生是在n被求值,也就是执行return n;语句时。由此可以看出,函数所绑定的是作用域本身,而不是该作用域中的变量或变量当前所返回的值。

  • 循环中的闭包#4

这种闭包所导致的bug往往很难被发现,因为它们表面上看起来很正常,来看一下下面的函数

function f(){
  var a = [];
  var i;
  for (i = 0; i < 3; i++){
    a[i] = function(){
      return i;
    }
  }
  return a;
  }
//下面来运行一下函数,并将结果赋值给数组a
var a = f();
a[0]();//输出3
a[1]();//输出3
a[2]();//输出3

为啥不是0、1、2呢?为啥会这样呢?原来在这里创建的三个闭包,它们都指向了一个共同的局部变量i,但是,闭包不会记录它们的值,它们所拥有的的只是一个i的连接(即引用),因此只能返回i当前值,因为i结束循环时值为3,所以这三个函数都指向一个共同值3

如何纠正?显然,需要a[i]指向三个不同的变量,下面是解决方案之一:

function f(){
  var a = [];
  var i;
  for (i = 0; i < 3; i++){
    a[i] = (function(x){
      return function(){
        return x;
      }
    })(i);
  }
  return a;
  }
//下面来运行一下函数,并将结果赋值给数组a
var a = f();
a[0]();//输出0
a[1]();//输出1
a[2]();//输出2

这里使用了自调函数,不再直接返回i的值,而是将i传递给自调函数,i赋值给了局部变量x,这样一来,每次迭代x就会拥有各自不同的值了。

解决方案二:

function f(){
  function aa(x){
    return function(){
      return x;  
    }
  }
  var a = [];
  var i;
  for (i = 0; i < 3; i++){
	a[i] = aa(i);
  }
  return a;
  }

方案二不使用自调函数,而是定义了一个内部函数实现相同的功能,每次迭代操作中,将i的值“本地化”。

  • Getter与Setter、 迭代器 闭包的应用示例#5
var getValue, setValue;
(function(){
  var temp = 0;
  getValue = function(){
    return temp;
  };
  setValue = function(v){
    temp = v;	
  }
  })();
getValue();//输出0
setValue(123)
getValue();//输出123

这个例子是通过一个匿名自调函数来实现的,定义的全局函数setValue()和getValue(),确保局部变量temp的不可直接访问性。

下面是一个接受数组输入的初始化函数,其中定义了一个私有指针,该指针会指向数组中的下一个元素。

function setup(x){
  var i = 0;
  return function() {
    return x[i++];
  };
  }
//调用setup(),创建我们所需的next()函数
var next = setup(['a', 'b', 'c']);
//重复调用next(),就可以不停的获取下一个元素
next();//输出"a"
next();//输出"b"
next();//输出"c"

到这里闭包就暂时告一段落了,以后有新的理解再写。