js中闭包的作用以及应用

对闭包的认识：

• 闭包的概念:函数A中,有一个函数B,函数B中可以访问函数A中定义的变量或者是数据,此时形成了闭包(这句话暂时不严谨)
• 闭包的模式:函数模式的闭包,对象模式的闭包
• 闭包的作用:缓存数据,延长作用域链
• 闭包的优点和缺点:缓存数据。

函数模式的闭包:在一个函数中有一个函数：

  function f1() {
    var num=10;
    //函数的声明
    function f2() {
      console.log(num); //输出10
    }
    //函数调用
    f2();
  }
  f1();

对象模式的闭包:函数中有一个对象：

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

==============================================================

   function f1() {
    var num=10;
    return function () {
      console.log(num);  //输出10
      return num;
    }
  }

 var ff= f1();
 var result= ff();
  console.log(result);  //输出10


  function f2() {
    var num=100;
    return {
      age:num
    }
  }

  var obj= f2();
  console.log(obj.age); //输出100；

=======================================================
普通函数与函数模式闭包对比：

//普通的函数：
function f1() {
  var num = 10;
  num++;
  return num;
}
console.log(f1());//输出11；
console.log(f1());//输出11；
console.log(f1());//输出11；

---

//函数模式的闭包
       function f2() {
  var num = 10;
  return function () {
    num++;
    return num;
  }
}
var ff = f2();
console.log(ff());//输出11；
console.log(ff());//输出12，
console.log(ff());//输出113，

===========================================================
案例：产生多个相同的随机数：

 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();

//总结:如果想要缓存数据,就把这个数据放在外层的函数和里层的函数的中间位置
//闭包的作用:缓存数据.优点也是缺陷,没有及时的释放
//局部变量是在函数中,函数使用结束后,局部变量就会被自动的释放
//闭包后,里面的局部变量的使用作用域链就会被延长
==============================================================
闭包写点赞案例：
html：

  <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>

js：
/获取所有的按钮
//根据标签名字获取元素

 function my$(tagName) {
return document.getElementsByTagName(tagName);

}
//闭包缓存数据
function getValue() {
var value=2;
return function () {
//每一次点击的时候,都应该改变当前点击按钮的value值
this.value="赞("+(value++)+")";
}
}
//获取所有的按钮
var btnObjs=my$("input");
//循环遍历每个按钮,注册点击事件
for(var i=0;i<btnObjs.length;i++){
//注册事件
btnObjs[i].onclick=getValue();
}