由一道面试题简单扩展 — setTimeout、闭包

时间:2023-03-08 17:03:19
由一道面试题简单扩展 — setTimeout、闭包

在一个前端公众号,看到这么一个号称简单的面试题:

1、以下程序输出什么?

<script type="text/javascript">
function init(){
for (var i = 0; i < 10; ++i) {
setTimeout(function () {
console.log(i);
}, 0);
} }
window.onload=init;
</script>

2、若需要输出0123456789,应该怎么修改?

结果,输出的为10101010101010101010

若要输出0123456789,则可以将代码改成

<script type="text/javascript">
function init2(){
for (var i = 0; i < 10; ++i) {
setTimeout(
(function(i){
return function(){
console.log(i)
}
})(i), 0);
}
}
window.onload=init2;
</script>

解释:

1、for循环每次注册一个延迟函数, setTimeout是异步的,传入事件队列中,在循环结束后进行处理,当循环结束时,i为10。

setTimeout中的匿名function没有将 i 作为参数传入来固定这个变量的值, 让其保留下来, 而是直接引用了外部作用域中的 i, 因此 i 变化时, 也影响到了匿名function.

2、for循环执行时,给点击事件绑定的匿名函数传递i后,立即执行返回一个内部的匿名函数,因为参数是按值传递的,

所以此时形参保存的就是当前i的值,内部的匿名函数一直保存着当前i的值。 返回的匿名函数执行弹出各自保存的 i 的引用的值。

看到解释到这里,我是一脸懵逼,关键在于闭包的参数传递,所以我自己对闭包的知识进行了一下下扩展。

0、前言:Js变量的作用域

变量的作用域包括:全局变量、局部变量

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

   var n=999;
  function f1(){
    alert(n);
  }
  f1(); // 999

在函数外部无法读取函数内部的局部变量

  function f1(){
    var n=999;
  }
  alert(n); // error

注意:若函数内部声明变量的时候,一定要用var,否则实际上声明了全局变量,

会造成其他函数误用变量、全局对象过于庞大,影响访问速度等不良影响

 function f1(){
    n=999;
  }
  f1();
  alert(n); // 999

Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立

1、闭包的解释

  闭包是指有权访问另一个函数作用域变量的函数,创建闭包的通常方式,是在一个函数内部创建另一个函数。

    闭包的本质是一个函数,将函数内部和外部连接起来的桥梁。

2、闭包的写法

好像,还是,有那么点抽象,那就网上找个例子:

function func1(){
var age = 22;
function func2(){
return age;
}
return func2;
}
var result = func1(); //得到的是函数func2这一整个函数
var _num = result(); //得到的是func2的执行结果也就是age的值
console.log(result); //function func2(){ return age; }
console.log(_num); //22

结果分析:

a)首先要明白一个函数名称加不加括号的区别,比如说func1和func1(),func1表示的是这个函数本身,func1()表示的是这个名叫func1的函数的执行结果也就是它的返回值。

b) 其次我们来分析闭包的原理,因为func2是函数func1的子函数,所以在func2中可以访问到变量age,并将这个值作为函数func2的返回值返回,最后将整个func2函数作为func1函数的返回值。

c)最后我们来分析一下result和_num的值,result是函数func1的执行结果,也就是func1的返回值func2函数本身,_num的值为func2的执行结果也就是变量age。

d)至此,我们实际上已经将局部变量age的值获取到了并存在变量_num中,实现了在函数外部访问局部变量的值的问题。

3、闭包的用途

a) 匿名自执行函数

  创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在执行完后很快就会被释放,关键是这种机制不会污染全局对象。

① 匿名函数:顾名思义,就是没有方法名的函数

② 匿名函数调用方式:

使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表)

       (function(a,b)
{
console.log('匿名函数加圆括号:'+(a+b));
}(,));

将匿名函数赋值给一个变量,通过变量引用进行函数调用

       var noName= function(a,b){

console.log('匿名函数赋值变量:'+(a+b));

}(1,4);

b) 缓存(未整理验证)

再来看一个例子,设想我们有一个处理过程很耗时的函数对象,每次调用都会花费很长时间,
那么我们就需要将计算出来的值存储起来,当调用这个函数的时候,首先在缓存中查找,如果找不到,则进行计算,
然后更新缓存并返回值,如果找到了,直接返回查找到的值即可。闭包正是可以做到这一点,因为它不会释放外部的引用,
从而函数内部的值可以得以保留。

c)实现封装

可以先来看一个关于封装的例子,在person之外的地方无法访问其内部的变量,而通过提供闭包的形式来访问

d)面向对象编程

实例独立访问成员变量,互不影响