JavaScript闭包

最近更新时间：2017年6月3日21:04:04

    前端的重点是JavaScript这门语言的本身，闭包知识点难懂，因此，专门单独学习，在实际项目中应用。

    闭包的出现，可以减少全局变量的使用，多使用局部变量，节省内存

1、概念

    函数对象可以通过作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域内，这种特性在计算机科学文献中成为闭包。

    闭包是指有权访问另一个函数（外部函数）作用域中的变量的函数（内部函数）。

2、闭包三特性

    ①函数嵌套函数；function a(){function b(){}}

    ②内部函数可以引用外部函数的参数和变量；

function a(a){

  var b = 5;

  function b(){

    console.log(a);

 
  console.log(b);

  }

}

    ③参数和变量不会被垃圾回收机制回收；

3、闭包的好处

    好处：①希望一个变量长期驻扎在内存中；②避免全局变量的污染；③私有成员的存在

4、没有闭包的情况，全局变量被污染

var a = 1;

function a(){

  a++;

  console.log(a);

}

a()；//全局变量被污染

a();

5、没有闭包的情况，局部变量每次被垃圾回收机制回收（js中的垃圾回收机制的意义，节省内存）

function a(){

  var a = 1;

  a++;

  console.log(a);

}

a()；//2 局部变量被垃圾回收机制回收，函数没有达到预期的结果

a();//2全局变量被污染

6、闭包的出现，局部变量不会被垃圾回收机制回收

function a(){

  var a = 1;

  return function(){

    a++;

    console.log(a);

  }

}

var b = a();

b()；//2 局部变量没有被垃圾回收机制回收，函数达到预期的结果

b();//3
7、闭包应用场景

    闭包用法一：模块化代码

var a = (function(){

  var a = 1;//局部变量是模块化中的一个私有成员

  return function(){

    a++;

    console.log(a);

  }

})()
a();//2

a();//3

 
  闭包用法二：保证私有成员存在

var
a = (function(){

 
var a = 1;//私有变量相对于私有成员b和c是全局的

 
function b(){

    a++;

    console.log(a);

 
}

  function c(){

    a++;

    console.log(a);

  }

  return {

    b:b(),

    c:c()

  }

})()

a.b();//2

a.c();//3

 
  闭包用法三：在循环中直接找到对应元素的索引，而不需要人为加索引

<ul><li></li><li></li><li></li></ul>

var
aLi = document.getElementsByTagName('li');

for(var
i=0;i<aLi.length;i++){

 
aLi[i].onclick = function(){console.log(i)}//没有闭包，点击任何一个li元素都打印3

}

for(var i=0;i<aLi.length;i++){

  (function(i){

    aLi[i].onclick = function(){console.log(i)}//点击任何一个li元素打印对应的索引值

  })(i)//i当做局部变量传递给了对应的元素，每次循环时i的索引已经被绑定在对应的元素上，即i已经存储在内存中

}

for(var i=0;i<aLi.length;i++){

  aLi[i].onclick = (function(i){

    return function(){console.log(i)}

  })(i)

}

8、创建闭包的创建方式，在一个函数内部创建另一个函数。

9、闭包的注意事项

    IE下会引发内存泄漏，当页面跳转时，变量一直存储在内存中不被释放，内存容量持续增加，影响CPU性能，只有关闭浏览器才能释放内存

window.onload = function(){

  var oDiv = document.getElementById('div1');

  oDiv.onclick = function(){

    console.log(oDiv.id);//引发内存泄漏

  }

  window.onunload = function(){

    oDiv.onclick = null//释放内存，防止内存泄漏

  }

}

window.onload = function(){

  var oDiv = document.getElementById('div1');

  var id = oDiv.id;

  oDiv.onclick = function(){

    console.log(id);

  }
  oDiv = null;//释放内存，防止内存泄漏

}

10、闭包常见面试题

啊