作用域和闭包

目录

  1. 概述
  2. 作用域
    • 编译过程
    • 词法作用域
    • 全局作用域
    • 函数作用域
  3. 闭包
    • 循环和闭包
    • 闭包的用途
    • 性能
  4. 总结

概述

作用域和闭包一直是各大小厂面试的重点，学习了一段时间 JS 了，是时候对这部分知识有个交代了。

本文暂不涉及ES6的块级作用域。
本文是对《你不知道的JavaScript》的大量梳理。

作用域

作用域是一套用来存储变量的规则，用于确定在何处以及如何查找变量（标志符）。

作用域也通常被理解为变量存在的范围、当前的执行上下文等。在 ES5 的规范中，JavaScript 只有两种作用域：

  • 全局作用域：变量在整个程序中一直存在，所有地方都可以读取
  • 函数作用域：变量只在函数内部存在

当一个函数中嵌套另一个函数，它的作用域也会嵌套，一层层的作用域嵌套，就形成了作用域链。
如果一个变量或者其他表达式不在当前的作用域，那么 JS 机制会继续沿着一层一层作用域链往上查找，直到全局作用域（global 或浏览器中的 window）。如果找不到将不可被使用。

而在源代码执行前，会先经历编译过程。

编译过程

与传统的编译语言不同，JavaScript 不是提前编译的，大部分情况下编译发生在代码执行前的几微秒甚至更短的时间内。因此 JavaScript 引擎用了各种办法（比如 JIT，可以延迟甚至重编译）来保证性能最佳。

整个编译过程分为以下几步：

（1）词法分析

这个过程会将由字符组成的字符串分解成有意义的代码块，这些代码块被称为词法单元（token）。

比如 var a = 2，这段程序会分解成这些词法单元：var、a、=、2。之间的空格是否当做词法单元取决于是否有意义。

（2）语法分析

这个过程是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为“抽象语法树”（Abstract Syntax Tree，AST）。

这棵树定义了代码的结构，通过操纵这棵树，我们可以精准的定位到声明语句、赋值语句、运算语句等等，实现对代码的分析、优化、变更等操作。

举个例子：

var global1 = 1

上面这段代码的 AST 如下（Parser: acorn-6.1.1）：

{
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "global1"
          },
          "init": {
            "type": "Literal",
            "value": 1,
            "raw": "1"
          }
        }
      ],
      "kind": "var"
}

举个更复杂的例子（详见——完整语法树）：

var global1 = 1
function fn1(param1){
    var local1 = 'local1'
    var local2 = 'local2'
    function fn2(param2){
        var local2 = 'inner local2'
        console.log(local1)
        console.log(local2)
    }

    function fn3(){
        var local2 = 'fn3 local2'
        fn2(local2)
    }

    fn3()  // 'local1'
           // 'inner local2'
}

fn1()

如果只分析变量声明，AST 可以简化为如下的图：

整个分析过程是在静态阶段完成的，因此 fn3 中的 fn2 在语法分析阶段就已经确定了它的声明位置，并且在 fn1 调用的时候，明确了 fn2 的作用域是 fn1 的函数结构体内，fn3 的函数作用域并不会对其造成影响，因此打印的 local2 的值是 'inner local2' 而不是 'fn3 local2'。

AST 常见的几种用途：

  • 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
    • 如JSLint、JSHint对代码错误或风格的检查，发现一些潜在的错误
      IDE的错误提示、格式化、高亮、自动补全等等
  • 代码混淆压缩
    • UglifyJS2等
  • 优化变更代码，改变代码结构使达到想要的结构
    • 代码打包工具webpack、rollup等等
      CommonJS、AMD、CMD、UMD等代码规范之间的转化
      CoffeeScript、TypeScript、JSX等转化为原生Javascript

（3）代码生成

将 AST 转换为可执行代码的过程。

代码生成就是上一个步骤得到的 AST 转化为机器指令，然后在内存中存储它们。

词法作用域

就是定义在词法阶段的作用域。变量的作用域是在定义时而非执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域（with 和 eval 可以欺骗词法作用域）。

以 var a = 2 为例：

  1. 编译器遇到 var a 会询问作用域中是否有该名称的变量。如果是，忽略并继续编译；如果不是，在当前作用域声明变量，命名为 a。
  2. 引擎执行代码 a = 2，会查询 a （LHS查询）并对其进行赋值。

查询分两种：

  • LHS（Left Hand Side）：查找目的是为变量赋值
  • RHS（Right Hand Side）：查找目的是获取变量的值

LHS 和 RHS 查询都会在当前执行作用域开始，如果没有找到所需标志符，就会向上级作用域继续查询，一级一级直到全局作用域。到了全局作用域，如果 RHS 查询失败抛出 ReferenceError，如果 LHS 查询失败会隐式创建一个全局变量（非严格模式）。

看个例子：

function foo(a) {
  var b = a
  return a + b
}
var c = foo(2)
  1. 引擎执行 var c = foo(2)，会在作用域里查找（RHS）是否有 foo 函数
  2. 找到后，将实参 2 赋值给形参 a（LHS，隐式变量分配）
  3. var b = a，首先要先找到变量 a（RHS）
  4. 将 a 的值赋值给 b（LHS）
  5. return a + b，分别查找 a 和 b 的值（两次 RHS），然后返回
  6. 将 foo(2) 的结果赋值给 c（LHS）

全局作用域

以浏览器环境为例：

  • 最外层函数和在最外层函数外面定义的变量拥有全局作用域
  • 所有未定义直接赋值的变量自动声明为拥有全局作用域
  • 所有 window 对象的属性拥有全局作用域

缺点：会污染全局命名空间。

解决方案：

  • 立即执行函数（Immediately Invoked Function Expression， IIFE），因此很多库的源码都在使用
  • 模块化 (ES6、commonjs 等等)

函数作用域

函数作用域指属于这个函数的全部变量都可以在整个函数范围内使用及复用。

function foo() {
  let name = 'Shawn'
  function sayName() {
    console.log(`Hello, ${name}`)
  }
  sayName()
}
foo() // 'Hello, Shawn'
console.log(name) // 外部无法访问到内部变量
sayName() // 外部无法访问到内部函数

闭包

当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。

举个最简单的闭包（函数 + 函数内部能访问的变量）：

var local = "变量"
function foo () {
  console.log(local)
}

但这样 local 就暴露在了全局作用域中，其他函数也能访问。并且，这里只体现了可以访问，并没有“记住”。所以在闭包的基础上还需添加一些代码，使得变量 local 成为 foo 的局部变量，且 foo 能被外部访问到。一些实现方式：

（1）用立即执行函数封装，并将所需函数添加为 window 的全局变量

!function(){
  var local = "变量"
  window.foo = function (){
    console.log(local)
  }
}()

foo()

（2）匿名函数表达式，将所需函数当做参数返回

var a = function(){
  var local = "变量"
  function foo(){
    console.log(local)
  }
  return foo  
}

var myFoo = a()
myFoo()  // 这就是闭包的效果

上面（2）中的例子里，因为需要访问局部变量 local，设计了函数 foo，根据嵌套函数“内部函数可以访问外部函数的参数和变量”的特点，foo 可以访问到局部变量 local，然后在外部函数中，将 foo 作为参数返回。这样，当匿名函数被赋值给 a，然后将 a 的执行结果赋值给 myFoo，就等价于 myFoo = foo，执行 myFoo，就达到了记住并访问 foo 所在词法作用域的目的。

并且，在 a() 执行之后，由于闭包的存在，其内部作用域并不会被GC销毁，因为 foo() 在持续使用该内部作用域。

无论以何种方式将内部函数传递到所在词法作用域之外，它都会保持对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包。

循环和闭包

来看个经典的例子：

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

初看这段代码时，我对这段代码的预期是：分别输出数字 1~5，每秒一次，一次一个。
然而实际运行结果是：输出五次 6，每秒一次。

Why？

首先，循环结束时 i 的值是 6，然后，延迟函数的回调会在循环结束时才执行。即使设置 setTimeout(..., 0)，结果依然不变。

Why?

因为 setTimeout 是异步执行的，1000 毫秒后向任务队列里添加一个任务，只有主线程上的任务全部执行完毕才会执行任务队列里的任务，所以当主线程 for 循环执行完之后 i 的值为 6，而用这个时候再去任务队列中执行任务，因此 i 全部为 6。
又因为在 for 循环中使用 var 声明的 i 是在全局作用域中，那么全程都只有一个 i，尽管循环中的 5 个函数都在各自的迭代中分别定义，然而它们共享这一个 i 的引用，因此 timer 函数中打印出来的 i 自然是都是 6。

那么，我们需要给循环中的每个迭代过程都设定一个闭包作用域。

试一下立即执行函数（IIFE）来解决。

第一次尝试：

for (var i = 1; i <=5; i++) {
  !function () {
    setTimeout(function timer(){
      console.log(i)
    }, i * 1000)
  }()
}

然而这样并不能成功，因为匿名函数的作用域是空的，它并没有什么实质内容为我们所用。全程依然只有一个 i。

第二次尝试：

for (var i = 1; i <=5; i++) {
  !function () {
    var j = i
    setTimeout(function timer(){
      console.log(j)
    }, j * 1000)
  }()
}

It worked! 但是代码看起来不太优雅。

第三次尝试：

for (var i = 1; i <=5; i++) {
  !function (j) {
    setTimeout(function timer(){
      console.log(j)
    }, j * 1000)
  }(i)
}

这样，在迭代内使用 IIFE 会为每个迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用域封闭在每个迭代内部，每个迭代中都会含有一个具有正确值的变量供我们访问。

那么，ES6 之后这个问题是怎么解决的呢？首先想到let，可以用来劫持块作用域，并且在块作用域内声明一个变量。

第四次尝试：

for (var i = 1; i <=5; i++) {
  let j = i    // 闭包的块作用域
  setTimeout(function timer(){
    console.log(j)
  }, j * 1000)
}

那么，这是不是究极答案呢？先看代码：

第五次尝试：

for (let i = 1; i <=5; i++) {
  setTimeout(function timer(){
    console.log(i)
  }, i * 1000)
}

最后这种写法，是现在的通用写法。
它是一个语法糖，并且其内部原理就是第四次尝试的写法代码。这里 i 的作用域只在 for(...) 的圆括号内，只不过每次迭代，JS 会自动重新声明一个 i 在 {...} 内，随后的每个迭代的 i 都会使用上一个迭代结束时的值来初始化。

闭包的用途

（1）存储、隐藏变量

闭包一大用途是读取函数内部的变量，并让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。并且由于是函数内部的变量，局部变量外部无法访问，也达到了隐藏的目的。

function createCounter(initial) {
    var x = initial || 0
    return {
        inc: function () {
            x += 1
            return x
        }
    }
}

var c1 = createCounter()
c1.inc() // 1
c1.inc() // 2
c1.inc() // 3

var c2 = createCounter(1024)
c2.inc() // 1025
c2.inc() // 1026
c2.inc() // 1027

上例中，x 是函数 createCounter 的内部变量。通过闭包，x 的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。inc 存在依赖于 createCounter，因此也始终在内存中，不会在调用结束后，被垃圾回收机制回收。这就使得变量 x 达到了储存且隐藏的目的。

所以，闭包可以看作是函数内部作用域的一个接口。

（2）封装私有变量

由于 JavaScript 中的属性没有 public、private 这类的修饰符来控制访问，并且所有属性都需要在函数中定义，我们需要一些手段来达到变量私有化的目的。

var Foo = function () {
    var _name = 'Frank'
    this.getName = function () {
        return _name
    }
    this.setName = function (str) {
        _name = str
    }
}
var foo1 = new Foo()
foo1.setName('Shawn')

var foo2 = new Foo()
foo2.setName('Givenchy')

foo1._name // undefined，外部无法直接访问局部变量，相当于“私有化”
foo1.getName() // 'Shawn'
foo2.getName() // 'Givenchy'

上例中，函数 Foo 的内部变量 _name，通过闭包 setName 和 getName，变成了返回对象 foo1 和 foo2 的私有变量，并且它们之间互不影响，互相独立。

更普遍地，本质上无论何时何地，如果将（访问它们各自词法作用域的）函数当作第一级的值类型并到处传递，就能看到闭包在这些函数中的应用。如在定时器、事件监听器、AJAX请求、跨窗口通信、Web Worders或者任何其他的异步（或同步）任务中，只要使用了回调函数，实际上就是在使用闭包。

性能

如果不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。

例如，在创建新的对象或者类时，方法通常应该关联于对象的原型，而不是定义到对象的构造器中。原因是这将导致每次构造器被调用时，方法都会被重新赋值一次（也就是，每个对象的创建）。

例如上例的封装私有变量的闭包改成在原型上定义更好：

var Foo = function () {
    var _name = 'Frank'
    Foo.prototype.getName = function () {
        return _name
    }
    Foo.prototype.setName = function (str) {
        _name = str
    }
}

继承的原型可以为所有对象共享，不必在每一次创建对象时定义方法。

总结

  • Q：什么是作用域？
    A：作用域是用于确定在何处以及如何查找变量的一套规则。

  • Q：什么是作用域链？
    A：当一个函数嵌套在另一个函数中时，就发生了作用域嵌套。如果在当前作用域下找不到某个变量，JS 引擎就会往外层嵌套的作用域继续查找，直到找到该变量或抵达全局作用域。如果在全局作用域中还没找到就会报错。这种逐级向上查找的模式就是作用域链。

  • Q：什么是闭包？
    A：当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。

后面等刷了一些题之后会挑出一些经典的题目总结一下，以备面试和加深之用。

参考：

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,607评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,047评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,496评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,405评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,400评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,479评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,883评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,535评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,743评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,309评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,881评论 3赞 306
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2赞 342