大家好，我是一名前端全栈工程师，我的名字叫袁愈谷，曾经也这条路上的茫茫一员，经过不断努力学习，技术不断的进步，为了帮助和我曾经一样的小伙伴，我打算经常出一些教程，来指导刚入行的小伙伴学习，写的不好请勿喷。如果有想学习的同学可以私聊我，我会在工作之外抽出时间为大家指导。
一：变量的作用域
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）的使用讲解。有问题可以私聊作者哦。
网友评论