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