【重温基础】19.闭包

本文是 重温基础 系列文章的第十九篇。今日感受：将混乱的事情找出之间的联系，也是种能力。 系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)【重温基础】1-14篇【重温基础】15.JS对象介绍【重温基础】16.JSON对象介绍【重温基础】17.WebAPI介绍【重温基础】18.相等性判断本章节复习的是JS中的关于闭包，这个小哥哥呀，看看。 前置知识： 声明函数两种方法：函数声明，存在函数声明提升，因此可以在函数声明之前调用（不会报错）。fun(); // okfunction fun(){};函数表达式，不存在函数声明提升，若定义前调用，会报错（函数还不存在）。fun(); // errorvar fun = function (){};1.概念2.1 词法作用域这里先要了解一个概念，词法作用域：它是静态的作用域，是书写变量和块作用域的作用域**。function f (){ var a = “leo”; function g(){console.log(a)}; g();}f(); // “leo"由于函数g的作用域中没有a这个变量，但是它可以访问父作用域，并使用父作用域下的变量a，最后输出"leo”。 词法作用域中使用的域，是变量在代码中声明的位置所决定的。嵌套的函数可以访问在其外部声明的变量。2.2 闭包接下来介绍下闭包概念，闭包是指有权访问另一个函数作用域中的变量的函数。 闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。 创建闭包的常见方式：在一个函数内创建另一个函数。如：function f (){ var a = “leo”; var g = function (){ console.log(a); }; return g;// 这里g就是一个闭包函数，可以访问到g作用域的变量a}var fun = f();fun(); // “leo"通过概念可以看出，闭包有以下三个特征：函数嵌套函数函数内部可以引用函数外部的参数和变量参数和变量不会被垃圾回收机制回收注：关于内存回收机制，可以查看阮一峰老师的《JavaScript 内存泄漏教程》。 另外，使用闭包有以下好处：将一个变量长期保存在内存中避免全局变量的污染function f (){ var a = 1; return function(){ a++; console.log(a); }}var fun = f();fun(); // 2fun(); // 3因为垃圾回收机制没有回收，所以每次调用fun()都会返回新的值。私有化成员，使得外部不能访问function f (){ var a = 1; function f1 (){ a++; console.log(a); }; function f2 (){ a++; console.log(a); }; return {g1:f1, g2:f2};};var fun = f();fun.g1(); // 2fun.g2(); // 32.易错点2.1 引用的变量发生变化function f (){ var a = []; for(var i = 0; i<10; i++){ a[i] = function(){ console.log(i); } } return a;}var fun = f();fun0; // 10fun1; // 10// …fun10; // 10原本照我们的想法，fun方法中每个元素上的方法执行的结果应该是1,2,3,…,10，而实际上，每个返回都是10，因为每个闭包函数引用的变量i是f执行环境下的变量i，循环结束后，i已经变成10，所以都会返回10。 解决办法可以这样：function f (){ var a = []; for(var i = 0; i<10; i++){ a[i] = function(index){ return function(){ console.log(index); // 此时的index，是父函数作用域的index， // 数组的10个函数对象，每个对象的执行环境下的index都不同 } }(i); }; return a;};var fun = f();fun0; // 0fun1; // 1// …fun10; // 102.2 this指向问题var obj = { name : “leo”, f : function(){ return function(){ console.log(this.name); } }}obj.f()(); // undefined由于里面的闭包函数是在window作用域下执行，因此this指向window。2.3 内存泄漏当我们在闭包内引用父作用域的变量，会使得变量无法被回收。function f (){ var a = document.getElementById(“leo”); a.onclick = function(){console.log(a.id)};}这样做的话，变量a会一直存在无法释放，类似的变量越来越多的话，很容易引起内存泄漏。我们可以这么解决：function f (){ var a = document.getElementById(“leo”); var id = a.id; a.onclick = function(){}; a = null; //主动释放变量a}通过把变量赋值成null来主动释放掉。3.案例3.1 经典案例——定时器和闭包代码如下：for(var i = 0 ; i<10; i++){ setTimeout(function(){ console.log(i); },100);}不出所料，返回的不是我们想要的0,1,2,3,…,9，而是10个10。 这是因为js是单进程，所以在执行for循环的时候定时器setTimeout被安排到任务队列中排队等候执行，而在等待过程中，for循环已经在执行，等到setTimeout要执行的时候，for循环已经执行完成，i的值就是10，所以就打印了10个10。 解决方法 ：1.使用ES6新增的let。把for循环中的var替换成let。2.使用闭包for(var i = 0; i<10 ; i++){ (function(i){ setTimeout(function(){ console.log(i); }, i100); })(i);}3.2 使用闭包解决递归调用问题function f(num){ return num >1 ? numf(num-1) : 1;}var fun = f;f = null;fun(4) // 报错 ，因为最好是return num* arguments.callee（num-1），arguments.callee指向当前执行函数，但是在严格模式下不能使用该属性也会报错，所以借助闭包来实现这里可以使用return num >1 ? num* arguments.callee(num-1) : 1;，因为arguments.callee指向当前执行函数，但是在严格模式下不能使用，也会报错，所以这里需要使用闭包来实现。function fun = (function f(num){ return num >1 ? num*f(num-1) : 1;})这样做，实际上起作用的是闭包函数f，而不是外面的fun。3.3 使用闭包模仿块级作用域ES6之前，使用var声明变量会有变量提升问题：for(var i = 0 ; i<10; i++){console.log(i)};console.log(i); // 变量提升 返回10为了避免这个问题，我们这样使用闭包（匿名自执行函数）：(function(){ for(var i = 0 ; i<10; i++){console.log(i)};})()console.log(i); // undefined我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在函数执行完后会立刻释放资源，关键是不污染全局对象。这里i随着闭包函数的结束，执行环境销毁，变量回收。 但是现在，我们用的更多的是ES6规范的let和const来声明。参考文章MDN 闭包《JavaScript高级程序设计》本部分内容到这结束Author王平安E-mailpingan8787@qq.com博 客www.pingan8787.com微 信pingan8787每日文章推荐https://github.com/pingan8787…JS小册js.pingan8787.com