function闭包、定时器剖析

一、function小知识点:

明确闭包,js解析机制,变量声明提升
(如希望见到详细例题,可参考有趣味的js之趣味4。
js变量提升相关例题:http://blog.csdn.net/u013217071/article/details/62237561),函数的作用,作用域


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>functiontitle>
    <style>

    style>    
head>
<body>

    <script>    
        /*------------------*/
        /*cb(); //cb is not a function(…)
        func(); //123
        var cb = function(){
            console.log(123);
        }
        function func(){
            console.log(123);
        }*/

        /*1.总结:js代码运行分两个阶段:
        1.预解析--把所有 函数定义 和 变量声明 提前,变量赋值不提前。(函数表达式不会提前,var cb;提前)
        2.执行---从上到下执行(setTimeout\setInterval\ajax中回调函数\事件触发才执行的函数除外)*/
        /*------------------*/


        /*------------------*/
        /*var obj = {
            "name":"lisi",
            "sayHello": function(){
                console.log("hello");
            }
        }
        function fn(callback){
            callback();
        }
        fn(obj.sayHello);*/
        /*2.总结:函数的参数可以是一个函数,这个函数可以直接调用*/
        /*------------------*/


        /*------------------*/
        /*function outerFn(){
            var n = 0;
            return function innerFn(){
                n++;
                console.log(n);
            }
        }
        var fn = outerFn();
        fn(); //1
        fn(); //2*/
        /*3.总结:函数可以作为返回值,函数的嵌套形成闭包
        闭包不会释放私有变量的空间,所以会保持变量的引用*/
        /*------------------*/


        /*------------------*/
        /*var i = 0;
        var data = [];
        for(i=0; i<3; i++){
            data[i] = function(){
                console.log(i);
            }
        }
        data[0](); //3
        data[1](); //3
        data[2](); //3*/
        /*4.总结:js没有块级作用域,这里的i其实是全局变量。data[i]中保存了函数,存储的是i的引用,但是并没有执行,真正执行时,i已经变为了3*/
        /*作用域有:全局作用域、函数作用域、try/catch作用域、eval作用域*/
        /*------------------*/

        /*------------------*/
        /*var i = 0;
        var data = [];
        for(i=0; i<3; i++){
            data[i] = (function(k){
                return function(){
                console.log(k);
            };
            })(i);
        }
        data[0](); //0
        data[1](); //1
        data[2](); //2*/
        /*5.总结:函数是立即执行的,循环三次,有三份独立的空间,k在函数私有空间内,保存了i传递进去的值。*/
        /*------------------*/


        function JuiceMachine(fruit){
            this.fruit = fruit;
            this.produceJuice = function(){
                console.log(this.fruit + "果汁");
            }
        }
        var apple = new JuiceMachine("苹果");
        apple.produceJuice(); //苹果果汁
        var orange = new JuiceMachine("橘子");
        orange.produceJuice(); //橘子果汁

        JuiceMachine.brand = "九阳";
        JuiceMachine.open = function(){
            console.log("open");
        }
        console.log(JuiceMachine.brand); //九阳
        JuiceMachine.open(); //open


        console.log(apple.brand); 
        //undefined,brand和open是JuiceMachine对象的属性和方法
        apple.open(); 
        //Uncaught TypeError: apple.open is not a function(…)

        JuiceMachine.produceJuice(); 
        //Uncaught TypeError: JuiceMachine.produceJuice is not a function(…),,produceJuice是构造函数生成对象的方法。

        /*总结:function有双重身份,1、对象。 2、构造函数*/

        /*总结6:区分构造函数本身的方法和实例对象的方法,并明确new的执行顺序*/
         function Person() {
        this.getName = function(){
            console.log("实例对象的getName函数");
        }
    }


    Person.getName = function(){
         console.log("构造函数自己的getName函数");
    }
      var p =  new Person; //构造函数无参时,创建对象,可省略括号
      var p1 =  new Person();
      p.getName(); //实例对象的getName函数
      p1.getName(); //实例对象的getName函数

      new Person.getName(); //构造函数自己的getName函数
      new Person().getName(); //实例对象的getName函数
      /*总结:区分构造函数本身的方法和实例对象的方法,并明确new的执行顺序*/
    script>
body>
html> 

二、函数闭包

知识点:setTimeout异步执行机制,Promise


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>

    style>    
head>
<body>

    <script>    
        /*---------------*/
        /*for(var i = 0; i < 5; i++){
            console.log(i);
        }*/
        /*一、01234*/
        /*---------------*/

        /*---------------*/
        /*for(var i = 0; i < 5; i++){
            setTimeout(function(){
                console.log(i);
            },i*1000);
        }*/
        /*二、5个5,每隔一秒输出一个5*/
        /*setTimeout 会延迟执行,那么执行到 console.log 的时候,其实 i 已经变成 5 了*/
        /*---------------*/

        /*---------------*/
        /*for (var i = 0; i < 5; i++) {
          (function(i) {
            setTimeout(function() {
              console.log(i);
            }, i * 1000);
          })(i);
        }*/
        /*三、01234每隔一秒输出*/
        /*---------------*/

        /*---------------*/
        /*for (var i = 0; i < 5; i++) {
            setTimeout(function(i) {
              console.log(i);
            }, i * 1000, i);
        }*/
        /*四、01234每隔一秒输出*/
        /*---------------*/

        /*---------------*/
        /*for (var i = 0; i < 5; i++) {
          (function() {
            setTimeout(function() {
              console.log(i);
            }, i * 1000);
          })(i);
        }*/

        /*五、5个5,每隔一秒输出一个5*/
        /*内部其实没有对 i 保持引用,其实会变成输出 5*/
        /*---------------*/

        /*---------------*/
        /*for (var i = 0; i < 5; i++) {
          setTimeout((function(i) {
            console.log(i);
          })(i), i * 3000);
        }*/
        /*01234*/
        /*六、立马输出 0 到 4 */
        /*这里给 setTimeout 传递了一个立即执行函数。额,setTimeout 可以接受函数或者字符串作为参数,那么这里立即执行函数是个啥呢,应该是个 undefined ,也就是说等价于:setTimeout(undefined, ...);*/
        /*而立即执行函数会立即执行,那么应该是立马输出的。*/
        /*---------------*/

        setTimeout(function() {
          console.log(1);
        }, 0);
        new Promise(function executor(resolve) {
          console.log(2);
          for( var i=0 ; i<10000 ; i++ ) {
            i == 9999 && resolve();
          }
          console.log(3);
        }).then(function() {
          console.log(4);
        });
        console.log(5);

        /*七、2,3,5,4,1*/
        /*
        首先先碰到一个 setTimeout,于是会先设置一个定时,在定时结束后将传递这个函数放到任务队列里面,因此开始肯定不会输出 1 。
        然后是一个 Promise,里面的函数是直接执行的,因此应该直接输出 2 3 
        然后,Promise 的 then 应当会放到当前 tick 的最后,但是还是在当前 tick 中。
        因此,应当先输出 5,然后再输出 4 。
*/
    script>
body>
html> 

三、定时器与闭包_js执行顺序


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>

    style>
head>

<body>
    this
    <script>
    function fn1() {
        for (var i = 0; i < 4; i++) {
            var tc = setTimeout(function(i) {
                console.log(i);
                clearTimeout(tc)
            }, 10, i);
        }
    }

    function fn2() {
        for (var i = 0; i < 4; i++) {
            var tc = setInterval(function(i, tc) {
                console.log(i);
                clearInterval(tc)
            }, 10, i, tc);
        }
    }
    fn1();
    fn2();

//0120123333333333...
//
    /*这题考察了对闭包和定时器另外还有js执行顺序的理解。
先来说说fn1,如果把clearTimeout去掉,相信大家一定很熟悉,都会说10ms延迟后会依次输出0,1,2,3。
但是,请注意这里加了个clearTimeout,如果你去控制台实验的话会发现只输出了0,1,2,那3呢?
先别急,请听我慢慢道来:
请注意:这个tc是定义在闭包外面的,也就是说tc并没有被闭包保存,所以这里的tc指的是最后一个循环留下来的tc,所以最后一个3被清除了,没有输出。

再来看看fn2,可以发现区别就是把setTimeout改为了setInterval,同时把定时器也传到了闭包里。
那么结果又会有什么不同呢?如果亲自去实验的同学就会发现输出0,1,2,3,3,3...。
什么鬼?为毛最后一个定时器没被删除。说实话,我在这里也想了很久,为何最后一个定时器没被删除。后来我为了调试方便把i<4改为了i<2并把触发时间改为3s,在浏览器中单步调试,发现3s后第一次触发回调函数执行的时候tc的值是undefined第二次触发的时候有值了。这个时候我顿悟,这和程序的执行顺序有关。我们知道js正常情况下是从上到下,从右到左执行的。
所以这里每次循环先设置定时器,然后把定时器的返回值赋值给tc。在第一次循环的时候tc并没有被赋值,所以是undefined,在第二次循环的时候,定时器其实清理的是上一个循环的定时器。所以导致每次循环都是清理上一次的定时器,而最后一次循环的定时器没被清理,导致一直输出3。*/
    script>
body>

html>

三、setTimeout异步 -> Promise -> Async

隔一秒输出12345


for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}
console.log(new Date, i);

5 -> 5,5,5,5,5,即第 1 个 5 直接输出,1 秒之后,输出 5 个 5;

追问 1:闭包

for (var i = 0; i < 5; i++) {
    (function(j) {  // j = i
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000);
    })(i);
}
console.log(new Date, i);

巧妙的利用 IIFE(Immediately Invoked Function Expression:声明即执行的函数表达式)来解决闭包造成的问题,确实是不错的思路,但是初学者可能并不觉得这样的代码很好懂,至少笔者初入门的时候这里琢磨了一会儿才真正理解。

有没有更符合直觉的做法?答案是有,我们只需要对循环体稍做手脚,让负责输出的那段代码能拿到每次循环的 i 值即可。该怎么做呢?利用 JS 中基本类型(Primitive Type)的参数传递是按值传递(Pass by Value)的特征,不难改造出下面的代码:

var output = function (i) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
};
for (var i = 0; i < 5; i++) {
    output(i);  // 这里传过去的 i 值被复制了
}
console.log(new Date, i);

能给出上述 2 种解决方案的候选人可以认为对 JS 基础的理解和运用是不错的,可以各加 10 分。当然实际面试中还有候选人给出如下的代码:

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}
console.log(new Date, i);

细心的同学会发现,这里只有个非常细微的变动,即使用 ES6 块级作用域(Block Scope)中的 let 替代了 var,但是代码在实际运行时会报错,因为最后那个输出使用的 i 在其所在的作用域中并不存在,i 只存在于循环内部。
能想到 ES6 特性的同学虽然没有答对,但是展示了自己对 ES6 的了解,可以加 5 分,继续进行下面的追问。

如果期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5,新的需求可以精确的描述为:代码执行时,立即输出 0,之后每隔 1 秒依次输出 1,2,3,4,循环结束后在大概第 5 秒的时候输出 5(这里使用大概,是为了避免钻牛角尖的同学陷进去,因为 JS 中的定时器触发时机有可能是不确定的,具体可参见 How Javascript Timers Work)。 追问2:ES6 Promise:

const tasks = []; // 这里存放异步操作的 Promise
const output = (i) => new Promise((resolve) => {
    setTimeout(() => {
        console.log(new Date, i);
        resolve();
    }, 1000 * i);
});

// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
    tasks.push(output(i));
}

// 异步操作完成之后,输出最后的 i
Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i);
    }, 1000);
});

我们都知道使用 Promise 处理异步代码比回调机制让代码可读性更高,但是使用 Promise 的问题也很明显,即如果没有处理 Promise 的 reject,会导致错误被丢进黑洞,好在新版的 Chrome 和 Node 7.x 能对未处理的异常给出 Unhandled Rejection Warning,而排查这些错误还需要一些特别的技巧(浏览器、Node.js)。

使用 ES7 中的 async await 特性来让这段代码变的更简洁:

// 模拟其他语言中的 sleep,实际上可以是任何异步操作
const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(async () => {  // 声明即执行的 async 函数表达式
    for (var i = 0; i < 5; i++) {
        await sleep(1000);
        console.log(new Date, i);
    }

    await sleep(1000);
    console.log(new Date, i);
})();

你可能感兴趣的:(web前端,javaScript)