闭包以及闭包的应用详解
闭包
来自红宝书的定义:
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数
1. 理解闭包，首先的了解JavaScript的作用域的特点
javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。
注意点：在函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明的是一个全局变量！
有权访问另一个函数作用中的变量的函数
自己的闭包理解：闭包只是一种现象 ,内部函数可以使用外部函数环境中的变量,什么时候会产生闭包的现象呢
当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄露。
function f1(){
var n=999;
function f2(){
console.log(n); // 999
}
return f2()
}
f1 ()
这个代码就形成了闭包的现象
在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！
闭包的小应用
function a() {
var num = 100;
function b () {
num ++;
console.log (num);
}
return b;
}
var demo = a();
demo() ;//101
demo() ;//102
执行demo()得到的是什么呢?
第二个闭包的例子
function a() {
function b() {
var bbb = 234;
console.log(aaa);
}
var aaa = 123;
return b;
}
var glob = 100;
var demo = a();
demo();
来看看运行结果吧
具体执行,看看这个图
2. 闭包的用途
* 一个是前面提到的可以读取函数内部的变量，* 另一个就是让这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。
- 实现公用变量
eg:函数累加器
function add( ) {
var count = 0;
function demo() {
count ++;
console.log (count);
}
return demo ;
}
var counter = add() ;
counter() ;
counter() ;
counter() ;
counter() ;
counter() ;
- 可以做缓存
function test() {
var num=100;
function a () {
num ++;
console . log(num) ;
}
function b () {
num --
console.log(num) ;
}
return [a,b];
}
var myArr = test( ) ;
myArr[0]();
myArr[1]();
其实过程是这样的
体现缓存的例子
function eater() {
var food = '';
var obj = {
eat: function () {
console.log("i am eating " + food);
food = '';
},
push: function (myFood) {
food = myFood;
}
}
return obj;
}
var eater1 = eater();
eater1.push( ' banana' ) ;
eater1.eat() ;
这个时候ester里面的food就相当于一个隐式的存储结构
- 可以实现封装,属性私有化
function Sun(name, wife) {
var prepareWife = "xiaozhang";
this.name = name;
this.wife = wife;
this.divorce = function () {
this.wife = prepareWife;
}
this.changePrepareWife = function (target) {
prepareWife = target;
}
this.sayPraprewife = function () {
console.log(prepareWife);
}
}
var deng = new Deng('deng', 'xiaoliu');
deng.prepareWife //undefined
deng.sayPraprewife() //xiaozhang
- 模块化开发，防止污染全局变量
- 闭包的注意点
（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
来看看闭包的题目吧
// }
// test();
function test() {
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = function () {
console.log(i);
}
}
return arr;
}
var myArr = test();
for (var j = 0; j < 10; j++) {
myArr[j]();
}
//打印的是10个10,因为在函数10函数执行的时候上面的循环已经结束了,这个时候i已经变成了10啦
But,我们一般要避免这个闭包这么实现呢,现在我们需要的是输出0-9,上面的代码该怎么改呢???
实际上我们利用闭包和立即执行函数就能解决这个问题,被放进数组里面的函数保存到外部执行的时候,在作用域链上找j的时候都会使用立即执行函数中j,而每次循环立即执行函数都会被销毁
function test() {
var arr = [];
for (var i = 0; i < 10; i++) {
( function (j) {
arr[j] = function () {
console.log(j);
}
}(i))
}
return arr;
}
var myArr = test();
for (var j = 0; j < 10; j++) {
myArr[j]();
}
tip:>(免费获取最新完整前端课程关注vx公众号:前端拓路者coder,回复:资料
如果这个文章对你有用的话,欢迎点赞转发关注,让更多的小伙伴看到呀,毕竟分享是一个程序员最基本的美德!!!
如果有不对的请大佬指教)
