zoukankan      html  css  js  c++  java
  • js闭包

    1.js闭包的基本概念

    //总结:如果想要缓存数据,就把这个数据放在外层的函数和里层的函数的中间位置

    //闭包的作用:缓存数据.优点也是缺陷,没有及时的释放

    //局部变量是在函数中,函数使用结束后,局部变量就会被自动的释放
    //闭包后,里面的局部变量的使用作用域链就会被延长

    /*
        * 闭包的概念:函数A中,有一个函数B,函数B中可以访问函数A中定义的变量或者是数据,此时形成了闭包(这句话暂时不严谨)
        * 闭包的模式:函数模式的闭包,对象模式的闭包
        * 闭包的作用:缓存数据,延长作用域链
        * 闭包的优点和缺点:缓存数据
        *
        * 闭包的应用
        *
        *
        * */
       //函数的闭包
      
    
    2.js闭包的小案例
    
    function f1(){
       	var num=10;
       	
       	function f2(){
       		console.log(num);
       	}
       	f2();
       }
    	f1();
    	//对象的闭包
    	function f3(){
    		var num=20;
    		var obj={
    			age:num
    		};
    		console.log(obj.age);		
    	}
    	f3();
       //函数的闭包
       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
    

     3.生成一个重复的随机数

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

    4.点赞案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>对自己狠点</title>
      <style>
        ul {
          list-style-type: none;
        }
    
        li {
          float: left;
          margin-left: 10px;
        }
    
        img {
           200px;
          height: 180px;
        }
    
        input {
          margin-left: 30%;
        }
      </style>
      <script>
        //$永远都是24k纯帅的十八岁的杨哥$
      </script>
    </head>
    <body>
    <ul>
      <li><img  alt=""><br/><input type="button" value="赞(1)"></li>
      <li><img  alt=""><br/><input type="button" value="赞(1)"></li>
      <li><img  alt=""><br/><input type="button" value="赞(1)"></li>
      <li><img  alt=""><br/><input type="button" value="赞(1)"></li>
    </ul>
    <script>
    //点赞案例
    function my$(tagName){
    	return document.getElementsByTagName(tagName);
    }
    //闭包缓存
    function getValue(){
    	var value=1;
    	return function(){ 
    		this.value="赞("+(++value)+")";
    		//this.value="赞("+value+")";
    	}
    }
    
    //获取所有的按钮
    var btnObj=my$("input");
    
    for(var i=0;i<btnObj.length;i++){
    	 btnObj[i].onclick=getValue();
    }
    
    
    
      
    </script>
    </body>
    </html>
    

      

     

  • 相关阅读:
    js 兼容各类手机 的写法 待续
    css 兼容 各类手机的写法 待续
    数组的解构赋值
    let 和 const 命令
    ECMAScript 6 简介
    webpack4新建一个项目
    Webpack 4 Tutorial: from 0 Conf to Production Mode
    webpack4.1.1的使用详细教程
    git merge git pull时候遇到冲突解决办法git stash
    Git 常用命令速查表(图文+表格)
  • 原文地址:https://www.cnblogs.com/liushisaonian/p/9462257.html
Copyright © 2011-2022 走看看