JavaScript的闭包

JavaScript的闭包

说到闭包，我们首先要了解到变量的作用域，接下来我来举个例子：

var num = 10;
function f1(){
    console.log(num);
    var num1 = 20;
    console.log(num1);
}
f1();
console.log(num1);

执行以上的代码，会发现从上到下的 结果为10 ， 20，undefined，这是为什么呢？主要还是作用域在捣乱。

一个变量的作用域取决他所在的位置，如果他属于全局变量的话，则是在任何地方都可以调用，而如果是局部变量，则有一定的限制，一般就是在他所在的方法之中。

了解了变量的作用域，接下来就来谈谈闭包。闭包主要分为函数闭包和对象闭包。

1、何为函数闭包

function open() {
    var num = 10;
    function close() {
        console.log(num);
    }
    close();
}
open();

​ 上面的代码便是函数闭包，在上面可以看到的是一个函数里面嵌套这另一个函数，这有点类似于java中的类中类(类里面嵌套类)。如果执行一下上面的代码可以看到 控制台上的结果是10。至于为什么，作用域嘛！

2、何为对象闭包

function fun5() {
    var num = 10;
    var obj = {
        age: num
    };
    console.log(obj.age);
}
fun5();

​ 上面的代码便是函数闭包，在上面可以看到的是一个函数里面创建一个对象，在这个对象里面使用对象外的数据。如果执行一下上面的代码可以看到 控制台上的结果是10。至于为什么，跟上面一样，变量的作用域！

3、闭包有什么用

总结：如果想缓存数据就是用闭包
作用：就是缓存数据—->既是优点也是缺点，缺点—->不能及时的释放
未使用闭包前，每一次调用完，里面的变量就会被释放，然后再在调用在释放
使用闭包后，就是延长局部变量作用域的时间，不能及时释放

4、来个小案例

ul {list-style-type: none;}

li {float: left; margin-left: 10px;}

img {width: 200px; height: 180px;}

input {margin-left: 30%;}

<ul>
    <li><img src="img/1.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
    <li><img src="img/2.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
    <li><img src="img/3.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
    <li><img src="img/4.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
</ul>

let btns = document.getElementsByTagName("input");
function value() {
    let value = 1;
    return function () {
        this.value = "赞(" + (++value) + ")";
    }
}
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = value();
}

这样点击每一个按钮不会影响其他的按钮。