饥人谷技术博客

闭包、定时器

2016-09-05  本文已影响0人  墨月千楼

1.什么是闭包?有什么作用?

闭包是指有权访问另一个函数作用域中的变量的函数。换句话说,定义在闭包中的函数可以“记忆”它被创建时候的环境。创建闭包的常见方式,就是在一个函数内部创建另一个函数。
作用:
1.通过闭包可以在函数外部读取到函数内部的变量。
举例:

function foo(){
      var n=100;
      function f2(){
        console.log(n);
      }
      return f2;
    }
    var result=foo();
    result();

在函数内部返回一个函数,则可以读取foo()内部的变量。
2.让这些变量始终保持在内存中,即闭包可以使得它的诞生环境一直存在。

function foo(n){
      return function(){
        console.log(n++);
      };
    }
    var inc=foo(5);
    inc();
    inc();
    inc();

结果:



3.封装对象的私有属性和私有方法。

function Person(name){
      var _age;
      function setAge(n){
        _age=n;
      }
      function getAge(){
       console.log(_age) ;
      }
      return {
        name:name,
        getAge:getAge,
        setAge:setAge
      };
    }
    var p1=Person('zh')
    p1.setAge(22);
    p1.getAge();

结果:


参考闭包

2.setTimeout 0 有什么作用

js中,代码一般是自上而下运行的。而setTimeout()方法,是在当前代码执行完后最后执行的。setTimeout 0利用这个特点,可以把有特定用处的代码最后执行,且延时时间是0,代表当前代码运行结束马上执行setTimeout 0这段代码。
应用:
1.调整事件发生顺序。
例如在输入文本后将小写字母变成大写字母的代码中:



在输入下一个字母之后,前一个字母才会变成大写。
用setTimeout 0则会变成:



输入小写字母后就变为大写。
2.由于setTimeout(f,0)实际上意味着,将任务放到浏览器最早可得的空闲时段执行,所以那些计算量大、耗时长的任务,常常会被放到几个小部分,分别放到setTimeout(f,0)里面执行。

参考setTimeout(f,0)

代码题

1.下面的代码输出多少?修改代码让fnArr[i]() 输出i。使用两种以上的方法

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

第一种方法

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

第二种方法

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

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

var Car = //todo;
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

代码:

var Car = function () {
      //todo;
      var speed;
      return {
        setSpeed:function setSpeed(n){
           speed = n;
          return speed;
        },
        getSpeed:function getSpeed(){
        console.log(speed);
      },
        accelerate:function accelerate(){
        speed=speed+10;
          return speed;
      },
        decelerate:function decelerate(){
        speed=speed-10;
          return speed;
      },
        getStatus:function getStatus(){
          if(speed>0){
            console.log("running");}
            else console.log("stop");
          }
        }
    }();
    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模拟setInterval的功能

代码:

var i=0;
       function foo(){
        console.log(i++);
         setTimeout(function(){
           return foo();
         },1000);
      }
    foo();

4.写一个函数,计算setTimeout平均[备注:新加]最小时间粒度

代码:

var i=0;
    var start=Date.now();
    function foo(){

      if(i==1000){
        var end=Date.now();
        var n=(end-start)/i;
        console.log(n);
      }
      i++;
      setTimeout(function(){
        return foo();
      },0);
    }
    foo();

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

var a = 1;
setTimeout(function(){
    a = 2;
    console.log(a);
}, 0);
var a ;
console.log(a);
a = 3;
console.log(a);

结果是:



因为setTimeout()延时输出,放在代码最后执行。所以先执行

var a ;
console.log(a);
a = 3;
console.log(a);

输出1,3,最后输出2。

6.下面代码输出结果是什么?为什么?

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);

结果页面一直在加载中,因为先执行while(flag){},代码无限循环中,页面一直在加载。

7.下面这段代码输出?如何输出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++){
      setTimeout(function(){
        return (function(n) {
         return console.log('delayer:' + n);
        })(i);
      }(),0);
      console.log(i);
    }

结果:


本文版权归本人和饥人谷所有,转载请注明出处

上一篇 下一篇

猜你喜欢

热点阅读