进阶11-闭包_定时器_BOM

2017-03-16 本文已影响6人 24_Magic

    var fnArr = []
    for (var i=0;i<10;i++){
        fnArr[i]=function(){
            return i;
        }
    }      
    console.log(fnArr[3]())    //10;产生10个fnArr[i]，但是都输出了i=10

使用立即执行函数生成闭包，利用其内部函数读取该函数局部作用域
3种方式生成闭包

 var fnArr = []
        for(var i=0;i<10;i++){
            fnArr[i] = (function(){
                var n = i
                return function(){
                    return n;
                }
            }
        })()

    console.log(fnArr[3]())   //3
    //典型闭包，内部匿名函数访问外部函数作用域

var fnArr = []
    for(var i =0; i<10 ; i++){
        (function (n){  
            fnArr[i] = function(){
            return n;
            }
        }
    )(i)
    };
    console.log(fnArr[3]())    //3

<-------------------------------------------------->

 var fnArr = []
    for(var i =0; i<10 ; i++){
        (function (n){  
            var n = i
            fnArr[i] = function(){
            return n;
            }
        }
    )()
    };
    console.log(fnArr[3]())    //3

    //这2种方法类似，匿名函数作为变量赋值给fnArr[i]
    //在立即执行函数这个闭包的作用域中
    //return n的值就是i的值

2.
输出汽车参数的函数

var Car = (function(){
   var speed = 0;
   function setSpeed(s){
        return speed = s
   }
   function getSpeed(){
        console.log(speed)
   }
   function accelerate(){
       return speed += 10
   }
   function decelerate(){
       if (speed>0)
       return speed -= 10
   }

   function getStatus(){
       if(speed>0)   console.log('running');
       else console.log('stop')
   }
 
   return {
      "setSpeed": setSpeed,
      "getSpeed": getSpeed,
      "accelerate": accelerate,
      "decelerate": decelerate,
      "getStatus": getStatus
   }        //返回函数调用的一个集合
})()
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate(); 
Car.decelerate();
Car.getStatus();  //'stop';
Car.speed;  //error

3.
setTimeout输出优先级

    var a = 1;
    setTimeout(function(){
        a = 2;
    console.log(a);     //2；优先级最低  -----Ⅲ
    }, 0);
    var a ;            
    console.log(a);    //1；  -----Ⅰ
    a = 3;          
    console.log(a);    //3；-----Ⅱ

    var flag = true;
    setTimeout(function(){    //无法执行到setTimeout
        flag = false;
    },0)
    while(flag){}    //flag=true,while函数无限循环
    console.log(flag);    //浏览器卡死，无结果

5.
原代码输出

for(var i=0;i<5;i++){
        setTimeout(function(){
            console.log('delayer'+i)
        },0);
        console.log(i)            //0,1,2,3,4,(5)delayer5
    }
      //按优先级先输出0，1，2，3，4；
      console.log(i)输出完了之后，才轮到setTimeout输出，
      这时候i++后，i变成了5，再马上一次性输出5个delayer5

修改代码输出

for(var i=0;i<5;i++){
        setTimeout((function(){
            var n = i
            return function(){
                console.log('delayer'+n)    //delayer0，delayer1，
                                            // delayer2，delayer3，
                                            // delayer4
            }
            
        })(),0);
        console.log(i)    //0，1，2，3，4
        }
  
<-------------------------------------------------------->

      for(var i=0;i<5;i++){
        (function(n){
            var n = i
            setTimeout(function(){
                console.log('delayer'+n)     //delayer0，delayer1，
                                             //delayer2，delayer3，
                                             //delayer4
            },0);
        })(i);
            console.log(i)    //0，1，2，3，4
        }

6.
获取元素的真实宽高

<!DOCTYPE html>
    <html>
    <head>
        <title>获取元素的真实宽高</title>
        <style type="text/css">
            .box{
                width: 40px;
                height: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            hello
        </div>
        <script type="text/javascript">
            var box = document.getElementsByClassName('box')[0]
            var width = getComputedStyle(box)['width']
            var height = getComputedStyle(box)['height']
        </script>
    </body>
    </html>

var a = 'https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=ASCII&*'
var encoUrl = encodeURL(a)  //简单编码
var encoRrlCpt =encodeURLcomponent(a)   //全面编码

var decorUrl = decodeURL(a)     //简单解码
var decoUrlCpt = decodeURLcomponent(a)      //全面解码

var loginUrl = encodeURLcomponent('http://jirengu.com/login.php?' + 'back='+ a)     //页面跳转返回需要全面解码

8.
判断浏览器的类型

    function isAndroid(){
        return /Android/.test(navigator.userAgent)
    }
    function isIphone(){
        return /iphone/.test(navigator.userAgent)
    }

    function isIpad(){
        return /ipad/.test(navigator.userAgent)
    }

    function isIOS(){
        return /ios/.test(navigator.userAgent)
    }
    console.log(isAndroid())
    console.log(isIphone())
    console.log(isIpad())
    console.log(isIOS())

进阶11-闭包_定时器_BOM

猜你喜欢

热点阅读