美文网首页
闭包_定时器_BOM

闭包_定时器_BOM

作者: madpluto | 来源:发表于2017-06-20 18:21 被阅读0次

    1. 题目1: 下面的代码输出多少?修改代码让 fnArri 输出 i。使用两种以上的方法

        var fnArr = [];
        for (var i = 0; i < 10; i ++) {
            fnArr[i] =  function(){
                return i;
            };
        }
        console.log( fnArr[3]() );  
    //输出10,因为自始至终只有1个i,循环完后i已经变为了10
    
    方法1:外面包裹一层立即执行函数
     for (var i = 0; i < 10; i ++) {
            (function(i){
                fnArr[i] = function(){
                    return i;
                }
            })(i);
        }
    方法2:   
     var fnArr = [];
        for (let i = 0; i < 10; i ++) { //使用ES6: let
            fnArr[i] =  function(){
                return i;
            };
        }
        console.log( fnArr[3]() );
    方法3 
    for (var i = 0; i < 10; i ++) {
            fnArr[i] =  (function(i){ // 闭包
                return function(){
                    return i;
                }
          })(i);
        }
    

    2. 封装一个汽车对象,可以通过如下方式获取汽车状态

    var Car = (function(){
       var speed = 0;
       function setSpeed(s){
           speed = s
       }
       function getSpeed() {
         return speed;
       }
       function accelerate() {
         speed += 10;
       }
       function decelerate() {
         if(speed < 10) {speed = 0;}
         else {speed -= 10;}
       }
       function getStatus() {
         if(speed > 0) { return 'running';}
         else {return 'stop'}
       }
       return {
          setSpeed: setSpeed,
          getSpeed: getSpeed,
          accelerate: accelerate,
          decelerate: decelerate,
          getStatus: getStatus
       }
    })()
    Car.setSpeed(30);
    console.log(Car.getSpeed()); //30
    Car.accelerate();
    console.log(Car.getSpeed()); //40);
    Car.decelerate();
    Car.decelerate();
    console.log(Car.getSpeed()); //20
    console.log(Car.getStatus()); // 'running';
    Car.decelerate(); 
    Car.decelerate();
    console.log(Car.getStatus());  //'stop';
    Car.speed;  //error
    

    3. 下面这段代码输出结果是? 为什么?

    var a = 1;
    setTimeout(function(){
        a = 2;
        console.log(a);//2因为 setTimeout 会把当前函数放到队尾执行。
    }, 0);
    var a ;
    console.log(a);//1
    a = 3;
    console.log(a);//3
    //输出的结果为 1 3 2
    

    4. 下面这段代码输出结果是? 为什么?

    var flag = true;
    setTimeout(function(){//等待所有任务结束后执行
        flag = false;
    },0)
    while(flag){}////setTimeout会等待它执行完毕,此时flag永远是true,无限循环。
    console.log(flag);//不会执行
    

    5. 下面这段代码输出?如何输出delayer: 0, delayer:1...(使用闭包来实现)

    for(var i=0;i<5;i++){
        setTimeout(function(){
             console.log('delayer:' + i );
        }, 0);
        console.log(i);
    }
    
    
    for(var i=0;i<5;i++){
    (function(n){
        setTimeout(function(){
            console.log('delayer:'+n);
        },0);
    })(i);
    console.log(i);
    }
    

    6. 如何获取元素的真实宽高

    getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象。获得的style是页面上css计算的最终结果,其中这个声明对象包含height和width属性,可以通过下面的方式获得真实样式,这个方法第二个参数代表伪类没有则为null;

    //window.getComputedStyle("元素", "伪类");
    console.log(window.getComputedStyle(d1,null).width)
    console.log(window.getComputedStyle(d1,null).height)
    

    7. URL 如何编码解码?为什么要编码?

    题目7: URL 如何编码解码?为什么要编码?

    可用encodeURI()、encodeURIComponent()方法对url进行编码
    encodeURI方法不会对下列字符编码

    • ASCII字母
    • 数字
    • ~!@#$&*()=:/,;?+'

    encodeURIComponent方法不会对下列字符编码

    • ASCII字母
    • 数字
    • ~!*()'
      所以encodeURIComponent比encodeURI编码的范围更大

    用decodeURI()和decodeURIComponent()可以对编码过的字符串进行解码

    对于Url来说,之所以要进行编码,是因为Url中有些字符会引起歧义。
    例如,Url参数字符串中使用key=value键值对这样的形式来传参,键值对之间以&符号分隔,
    如/s?q=abc&ie=utf-8。如果你的value字符串中包含了=或者&,那么势必会造成接收Url的服务器解析错误,
    因此必须将引起歧义的&和=符号进行转义,也就是对其进行编码。

    let myURL = 'https://www.google.com/#q=javascript';
    //如果我们想编码一个URL并且可以使用它(访问),使用encodeURI();
    let simpleURL = encodeURI(myURL); //"https://www.google.com/#q=javascript"
    //如果我们想编码一个URL并且可以将其放置在某URL的参数中,使用encodeURIComponent();
    let completeURL = encodeURIComponent(myURL);
    let newURL = 'https://www.google.com/?back=' + completeURL; //"https://www.google.com/?back=https%3A%2F%2Fwww.google.com%2F%23q%3Djavascript"
    window.open(simpleURL); 
    //将会打开一个窗口,地址为https://www.google.com/#q=javascript
    

    8. 补全如下函数,判断用户的浏览器类型

    function isAndroid(){
        return /Android/.test(navigator.userAgent);
    }
    funcnction isIphone(){
        return /iPhone/.test(navigator.userAgent);
    }
    function isIpad(){
        return /iPad/.test(navigator.userAgent);
    }
    function isIOS(){
        return /(iPad)|(iPhone)/i.test(navigator.userAgent);
    }
    

    相关文章

      网友评论

          本文标题:闭包_定时器_BOM

          本文链接:https://www.haomeiwen.com/subject/ztdaqxtx.html