深入理解JavaScript闭包：原理、陷阱与实战解法

JavaScript闭包概述

摘要

闭包机制是JavaScript的重点和难点，本文希望能帮助大家轻松的学习闭包

闭包的定义与原理

一、什么是闭包？

闭包就是可以访问另一个函数作用域中变量的函数。

下面列举出常见的闭包实现方式，以例子讲解闭包概念

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

当f1作为f2的父函数，且f2被赋值给全局变量（即f1的返回值）时，f2将长期驻留在内存中。由于f2的执行依赖于f1的作用域，这迫使f1也始终保留在内存中，无法在调用结束后被垃圾回收机制（garbage collection）回收，从而形成了闭包。

基于此，可以这样理解：若函数A引用了函数B的变量，且B执行完毕后A仍未返回或仍被引用，则B的所有局部变量不会随B的退出而销毁，而是持续存在，直到A被注销。此时，函数A即构成了闭包。

闭包中的this指针指向

二、闭包的this指针

闭包通常在全局环境下被调用，因此其内部的this通常指向window对象。具体指向需视实际执行环境而定，总之，this始终指向当前代码的执行环境。

如果需要让闭包内的this指向包含该闭包的对象，则需要将该对象的this作为参数传递给闭包内部。

闭包使用的注意事项与内存管理

三、使用闭包的注意点

1. 由于闭包会导致函数中的变量一直保存在内存中，造成较大的内存消耗，因此不能滥用闭包，否则可能引发网页性能问题，在IE浏览器中甚至可能导致内存泄露。解决方法是在退出函数之前，将不再使用的局部变量手动删除。
2. 闭包会在父函数外部改变父函数内部变量的值。因此，若将父函数视为对象（object），将闭包视为其公共方法（Public Method），将内部变量视为私有属性（private value），使用时务必谨慎，避免随意修改父函数内部变量的值。

闭包经典面试题解析

四、解决一道闭包常见面试题

问题：

function onMyLoad(){
  /*
  抛出问题:
  此题的目的是想每次点击对应目标时弹出对应的数字下标 0~4,但实际是无论点击哪个目标都会弹出数字5
  问题所在:
  arr 中的每一项的 onclick 均为一个函数实例(Function 对象),这个函数实例也产生了一个闭包域,
  这个闭包域引用了外部闭包域的变量,其 function scope 的 closure 对象有个名为 i 的引用,
  外部闭包域的私有变量内容发生变化,内部闭包域得到的值自然会发生改变
  */
  var arr = document.getElementsByTagName("p");
  for(var i = 0; i < arr.length;i++){
  arr[i].onclick = function(){
   alert(i);
  }
  }
 }

解决方法

1、在外层再包裹一层函数，将变量i作为参数传入。这样每次保存的是函数内部的变量，与外部的i不属于同一内存空间。由于每次调用函数都会生成一个新的局部变量，因此可以保证每次保存的值互不影响。

for(var i = 0; i<arr.length;i++){
 arr[i].onclick = (function(arg){
  return function () {
   alert(arg);
  }
 })(i);
}

2、利用ES6的新特性let，将for循环中的var i改为let i。这样当前轮次的i只在本轮循环内有效，每一次循环的i实际上都是一个新的变量。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为JavaScript引擎内部会记住上一轮循环的值，在初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！