JS闭包

作者: pipu | 来源:发表于2020-01-02 11:43 被阅读0次

JS闭包

在stackoverflow看到的一个关于闭包的问题,讲的很透彻。
原问题大概是:
一个包含setTimeout的循环,输出对应的index,可以看到这种情况如果想对应的输出0-9,需要使用闭包来完成:

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

A的方案是:

for(var i = 0; i < 10; i++) {
    (function(){
        var i2 = i;
        setTimeout(function(){
            console.log(i2);
        }, 1000)
    })();
}
// 结果是0-9

B的方案是:

for(var i = 0; i < 10; i++) {
    setTimeout((function(i2){
        return function() {
            console.log(i2);
        }
    })(i), 1000);
}
// 结果是0-9

在我们一般的理解中B的方案是一个典型的闭包,一个函数F返回一个包含F内部变量的函数。但是A方案也能够正确的输出,那么A是闭包么?

js中所有的函数都是闭包(可以查看这些文章,Understanding JavaScript Closures, 闭包)。然而我们只关心这些函数的子集,从理论上来说很有意思的部分。之后闭包所指的就是这些子集:

对于闭包一个简单的解释:

  1. 有一个函数F
  2. 列出F所有的变量
  3. 变量分为两种类型
    1. 局部变量(绑定变量)
    2. 非局部变量(自由变量)
  4. 如果F没有非局部变量那么它不可能是一个闭包
  5. 如果F含有任一个非局部变量(在F的父作用域中定义的),那么:
    1. 必须有一个F的父作用域,创建了此对于F来说是非局部变量
    2. 如果F被从哪个负作用域的外面引用了,那么F就变成了一个对于此非局部变量的闭包
    3. 那个非局部变量成为闭包F的提升值。

下面根据此概念来分析开始的A和B方案:

A:


for (var i = 0; i < 10; i++) {
    (function f() {
        var i2 = i;
        setTimeout(function g() {
            console.log(i2);
        }, 1000);
    })();
}

对于函数f来说:

  1. 列举变量:i2,g是局部变量,i,setTimeout,console是非局部变量
  2. 查看非局部变量定义的作用域: 三者都是在全局定义的
  3. f函数是在什么作用域被引用:全局作用域
    1. i没有被f所保存
    2. setTimeout没有被f所保存
    3. console没有被f所保存
      所以f不是闭包

对于函数g来说

  1. 列举变量:
    1. console 是一个非局部变量
    2. i2是一个非局部变量
  2. 查看非局部变量定义的作用域: 三者都是在全局定义的
    1. console 是全局变量
    2. i2是绑定在f的作用域
  3. 在哪个作用域被引用: setTimeout作用域
    1. console没有被g保存
    2. i2被g保存
      因此g函数是相对于变量i2的一个闭包当它在setTimeout中被引用。

B:

for (var i = 0; i < 10; i++) {
    setTimeout((function f(i2) {
        return function g() {
            console.log(i2);
        };
    })(i), 1000);
}

对于函数f来说:

  1. 列举变量:i2,g是局部变量,console是非局部变量
  2. 查看非局部变量定义的作用域: 全局定义的
  3. f函数是在什么作用域被引用:全局作用域
    1. console没有被f所保存
      所以f不是闭包

对于函数g来说

  1. 列举变量:
    1. console 是一个非局部变量
    2. i2是一个非局部变量
  2. 查看非局部变量定义的作用域: 三者都是在全局定义的
    1. console 是全局变量
    2. i2是绑定在f的作用域
  3. 在哪个作用域被引用: setTimeout作用域
    1. console没有被g保存
    2. i2被g保存
      因此g函数是相对于变量i2的一个闭包当它在setTimeout中被引用。

简单的解释一下为什么所有的函数都是闭包:

让我们看下西面的程序

// 词法作用域 语言作用域
lexicalScope();

function lexicalScope() {
    var message = "This is the control. You should be able to see this message being alerted.";

    regularFunction();

    function regularFunction() {
        alert(eval("message"));
    }
}
  1. 从上面的定义中我们知道lexicalScope和regularFunction都不是闭包
  2. 我们想在执行改程序的时候弹出message因为regularFunction中可以访问父作用域中的变量message
  3. 当我们执行程序时,我们看到message被弹出了。

我们再看另外的一个程序:

var closureFunction = lexicalScope();

closureFunction();

function lexicalScope() {
    var message = "This is the alternative. If you see this message being alerted then in means that every function in JavaScript is a closure.";

    return function closureFunction() {
        alert(eval("message"));
    };
}
  1. 从上面的定义中我们知道closureFunction是闭包
  2. 我们想在执行改程序的时候弹出message因为closureFunction中可以访问父作用域中的变量message
  3. 当我们执行程序时,我们看到message被弹出了。

我们能发现什么?

  1. js 解释器对于其他函数和闭包函数没有什么不同
  2. 每个函数都将作用域链保存在自身。闭包函数没有一个不同的变量引用环境
  3. 闭包就像其他函数一样,我们称之为闭包,当函数在非其创建的作用域外被引用。因为这是个很有意思的例子。

相关文章

  • php之闭包函数(Closure)

    php闭包函数(Closure) JS闭包 js和php闭包使用和区别

  • JS闭包

    JS闭包 闭包练习

  • JS闭包问题(二)

    在之前的JS闭包问题(一)文章中大概介绍了一下JS闭包,同时讲了闭包与变量之间的问题,今天我们继续聊闭包,聊聊闭包...

  • JS闭包大结局(JS闭包系列3)

    在上一篇中再谈JS闭包(JS闭包系列2),我详细的介绍了JS中的变量作用域相关的概念,结合第一节关于JS闭包(JS...

  • JS闭包入门

    最近有看到朋友的面经里提到的JS闭包的问题,就想研究研究,以下是我对JS闭包的简单理解。 到底什么是JS闭包? 定...

  • 学习JavaScript闭包和作用域笔记

    JS JavaScript闭包和作用域 闭包 JavaScript高级程序设计中对闭包的定义:闭包是指有权访问另外...

  • 再谈JS闭包(JS闭包系列2)

    这篇文章,来继续谈谈Javascript闭包的剩余问题。因为在上一篇文章中关于JS闭包(JS闭包系列1)主要简单的...

  • 简单的聊一下闭包

    js中的闭包 闭包是学习js中永远也绕不过去的一个坎,那么,今天我们就去一段简单的代码开始聊一聊闭包 什么是闭包 ...

  • 浅谈闭包

    js中的闭包 闭包是学习js中永远也绕不过去的一个坎,那么,今天我们就去一段简单的代码开始聊一聊闭包 什么是闭包 ...

  • 闭包??

    什么闭包,闭包有什么用?http://js.jirengu.com/pogadikofa/1/闭包是在某个作用域内...

网友评论

      本文标题:JS闭包

      本文链接:https://www.haomeiwen.com/subject/xqonoctx.html