function闭包、定时器剖析

最新推荐文章于 2023-04-29 12:04:47 发布

秋天1014童话

最新推荐文章于 2023-04-29 12:04:47 发布

阅读量2.4k

点赞数

分类专栏： web前端 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/60135288

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

一、function小知识点：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function</title>
    <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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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执行顺序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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);
})();

秋天1014童话

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
function闭包、定时器剖析

一、function小知识点：明确闭包，js解析机制，变量声明提升（如希望见到详细例题，可参考有趣味的js），函数的作用，作用域<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>function</title> <style> </style> </head><b
复制链接

扫一扫