for循环加延时器顺便解释一下闭包

注意是let声明的

let声明的    延时器中打印的是同一时间 + 01234    最后打印的是报错(未定义)

如果换成var  定义的

延时器中打印的是 同一时间 + 5 .....5    最后打印的是5

解释:

setTimeout是异步执行的,1000毫秒后向任务队列里添加一个任务,只有主线上的全部执行完才会执行任务队列里的任务,所以当主线程for循环执行完之后 i 的值为5,这个时候再去任务队列中执行任务,i全部为5;

每次for循环的时候setTimeout都会执行,但是里面的function则不会执行被放入任务队列,因此放了5次;for循环的5次执行完之后不到1000毫秒;

1000毫秒后全部执行任务队列中的函数,所以就是输出五个5啦

假如把var换成let,那么输出结果为0,1,2,3,4;

因为let  i  的是区块变量,每个i只能存活到大括号结束,并不会把后面的for循环的  i  值赋给前面的setTimeout中的i;而var i  则是局部变量,这个 i 的生命周期不受for循环的大括号限制;



什么是闭包?

闭包是指有权访问另外一个函数作用域中的变量的函数。可以理解为(能够读取另一个函数作用域的变量的函数)

闭包需要注意的两点:

(1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

(2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

坑点1: 引用的变量可能发生变化

function outer() {

      varresult = [];

      for(vari = 0; i<10; i++){

        result.[i] =function () {

            console.info(i)

        }

    }

    return result

}

看样子result每个闭包函数对打印对应数字,1,2,3,4,...,10, 实际不是,因为每个闭包函数访问变量i是outer执行环境下的变量i,随着循环的结束,i已经变成10了,所以执行每个闭包函数,结果打印10, 10, ..., 10

怎么解决这个问题呢?

function outer() {

      varresult = [];

      for(vari = 0; i<10; i++){

        result.[i] =function (num) {

            returnfunction() {

                  console.info(num);    // 此时访问的num,是上层函数执行环境的num,数组有10个函数对象,每个对象的执行环境下的number都不一样            }

        }(i)

    }

    return result

}



坑点2: this指向问题

varobject = {

    name: ''object",

    getName: function() {

        return function() {

            console.info(this.name)

        }

    }

}

object.getName()()    // underfined

// 因为里面的闭包函数是在window作用域下执行的,也就是说,this指向windows



©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。