什么是闭包

闭包：定义在一个函数内部的函数，静态保存了所有父级作用域的内部函数。

闭包的三大特点为：
1、函数嵌套函数
2、内部函数可以访问外部函数的变量(函数A中,有一个函数B,函数B中可以访问函数A中定义的变量或者是数据)
3、缓存数据,延长变量的作用域链

闭包的分类：函数式闭包和对象模式闭包

闭包的主要作用：缓存数据,延长变量的作用域链

函数模式的闭包

function f1(){
    var num = 10;
    return function(){
        console.log(num);
    }
}
var ff = f1();
ff();

对象模式的闭包

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

闭包案例：产生三个随机数，但是这三个数都是相同的

//闭包的主要作用：缓存数据,延长变量的作用域链
//普通函数
function showRandom() {
var num=parseInt(Math.random()*10+1);
console.log(num);
}
showRandom();
showRandom();
showRandom();
//闭包产生三个随机数，但是这三个数都是相同的

function f1(){
    var num = parseInt(Math.random()*10+1);
    return function(){
        console.log(num);
    }
}
var ff = f1();
ff();
ff();
ff();

闭包案例：实现函数内变量多次调用的累加

//闭包的主要作用：缓存数据,延长变量的作用域链
//1.普通的函数

function f1() {
    var num = 10;
    num++;
    return num;
}
console.log(f1());
console.log(f1());
console.log(f1());

//2.函数模式的闭包

function f2() {
    var num = 10;
    return function () {
        num++;
        return num;
    }
}
var ff = f2();
console.log(ff());//11
console.log(ff());//12
console.log(ff());//13

//可以发现每次ff执行的时候，num的值发生了累加(其实是对应的内存未被释放)

闭包案例：点赞

<ul>
    <li><img src="images/ly.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
    <li><img src="images/lyml.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
    <li><img src="images/fj.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
    <li><img src="images/bd.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
</ul>
<style>
    ul {
        list-style-type: none;
    }
    li {
        float: left;
        margin-left: 10px;
    }
    img {
        width: 200px;
        height: 180px;
    }
    input {
        margin-left: 30%;
    }
</style>
//1.找到所有的按钮
var buttons = my$byTagName("input");
//2.给每一个按钮绑定点击事件
for(var i=0;i<buttons.length;i++){
    //给每一个button绑定一个aa属性
    buttons[i].aa = getValue();
    buttons[i].onclick = function(){
        this.value = this.aa();
    }
}
//3.先给一个函数，函数功能就是生成value属性值
function getValue(){
    var num = 1;
    return function(){
        num ++;
        return "赞("+num+")";
    }
}