浅谈JavaScript中的闭包

---

         大家好，我是一名前端全栈工程师，我的名字叫袁愈谷，曾经也这条路上的茫茫一员，经过不断努力学习，技术不断的进步，为了帮助和我曾经一样的小伙伴，我打算经常出一些教程，来指导刚入行的小伙伴学习，写的不好请勿喷。如果有想学习的同学可以私聊我，我会在工作之外抽出时间为大家指导。

---

一：变量的作用域

tip:首先必须理解Javascript特殊的变量作用域(变量的作用域无非就是两种：全局变量和局部变量)。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量，请看以下代码演示：

var name="袁愈谷";

function sayname(){

    alert(name);

}

sayname(); // 袁愈谷

当然，另一方面，在函数外部无法读取函数内的局部变量,请看代码演示：

function sayname(){

var name="袁愈谷";

}

alert(name); // error

tip：在函数中请一定要使用var 关键字，不然他就会把name属性添加给全局window属性，切记哦。

---

二：神奇的变量的作用域

上面第一点我们说了外部获取内部的变量是没有办法的，代码会提示报错，但是我们该怎么拿到呢？我们就需要借助函数的链式读取来操作，请看我的代码演示：

　function sayname(){

　　　　 var name="袁愈谷";

                    function sayname1(){

                            alert( name ); // 袁愈谷

                }

　}

看了上面代码有思路了吗？我们是不是只要能调用上面的sayname2函数，就会打印出name变量了，那怎么才能调用这个函数呢？请看我的代码演示：

function sayname(){

                 var name="袁愈谷";

                function sayname1(){

                        alert( name ); // 袁愈谷

                }

                return sayname2; //把sayname2这个函数返回出去

　}

var getname = sayname(); //我们调用sayname函数，就会把sayname2函数赋值给getname变量

getname();  //调用getname,就可以打印出 ‘袁愈谷’啦。

---

三、闭包的概念

上一节代码中的sayname2函数，就是闭包。

各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数,让私有变量不再‘私有’。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

---

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

怎么理解这句话呢？请看下面的代码。

function saynum(){

　　　　var num=1;

　　　　numAdd=function(){n+=1}

                function saynum2(){

                alert(n);

                }

　　　　return saynum2;

　　}

　　var result= saynum();

　　result(); // 1

　　window.numAdd();

　　result(); // 2

在这段代码中，result实际上就是闭包saynum2函数。它一共运行了两次，第一次的值是1，第二次的值是2。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

tip:numAdd前面没有使用var 关键字，因此这个会添加到全局window中，所以我们可以直接通过window.numAdd来调用。

---

五、使用闭包的注意点

1：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2：闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

好了，闭包的教程就写到这里，我会出更多的教程，比如模块化和组件化开发思想，已经各种js框架（vue,react,Angular）的使用讲解。有问题可以私聊作者哦。