开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 关于 JS 闭包看这一篇就够了 -> 正文阅读

[JavaScript知识库]关于 JS 闭包看这一篇就够了

关于 JS 闭包看这一篇就够了

今天看完了《你不知道的Javascript 上卷》的闭包，来总结一下。

1. LHS 和 RHS 查询

LHS (Left-hand Side) 和 RHS (Right-hand Side) ，是在代码执行阶段 JS 引擎操作变量的两种方式，字面理解就是当变量出现在赋值操作左侧时进行LHS查询，出现在右侧时进行RHS查询。更准确的来说，LHS是为了找到变量的容器本身从而可以进行赋值，而RHS则是获取某个变量的值。

例如：

console.log(a);

其中对a的引用就是一个RHS引用，因为这里没有给a赋任何值，而是获取它的值从而将它传递给console.log。

a = 2;

显然这里对a的引用是LHS引用，因为这里并不需要获取值，只是为了将2赋值给a这个变量。

现在我们已经知道在代码执行阶段 JS 引擎操作变量这两种方式，那么这两种方式会如何去找到变量呢？

2. 作用域

简单来说，作用域 指程序中定义变量的区域，它决定了当前执行代码对变量的访问权限。

2.1 作用域分类

作用域包括：

全局作用域：程序的最外层作用域
函数作用域：函数定义时会被创建
块级作用域：ES6新增的let、const特性

例如：

var name = '夏安'; // 全局作用域

function func() { //
  var name = '..夏安..'; // 函数作用域
  console.log(name);
}
if (true) {
  let name = '夏安...'; // 块级作用域
  console.log(name);
}

2.2 作用域链

但几个作用域进行了嵌套，这边现成了作用域链。

LHS和RHS查询都会在当前执行作用域中开始，如果它们没有找到所对应的标识符，就会沿作用域向外层作用域查找，直到抵达全局作用域再停止。

不成功的RHs引用会导致抛出ReferenceError。不成功的LHS引用会导致自动隐式地创建一个全局变量（非严格模式下），或者抛出ReferenceError异常（严格模式下）。

例如：

function func(b) {
  console.log(a + b); // 3
  console.log(c); // ReferenceError: c is not defined
}

var a = 1;
func(2);

上述栗子中，对b进行RHS引用，在func函数内部作用域中无法找到，但可以在上级作用域（全局作用域）中找到，而c在整个作用域链中都没有找到，所以抛出了ReferenceError异常。

2.3 词法作用域

作用域共有两种主要的工作模型。第一种是最为普遍的，被大多数编程语言所采用的词法作用域，也可以被叫做 静态作用域，另一种则称为动态作用域（如Bash脚本）。

无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。

我们来看下面这个栗子：

function func() {
  console.log(a);
}

function func2() {
  var a = 1;
}

var a = 2;

func(); // 2

在函数func作用域李没有找到变量a，向外层全局作用域找，而不会在函数func2作用域里找。

词法作用域查找只会查找一级标识符，比如a，b等，如果代码中引用了obj.name，词法作用域查找只会试图查找obj标识符，找到这个变量后，对象属性访问规则会接管对name属性的访问。

2.4 欺骗词法作用域

Javascript中有两种机制可以欺骗词法作用域,，分别是eval和with，但欺骗词法作用域会导致性能下降，所以不建议使用。

下面我们以eval为例简单介绍一下：

function func(str) {
  eval(str);
  console.log(a);
}

var a = 1;
func('var a = 2;'); // 2

eval的参数var a = 2;被当作本来就在那里的代码执行，在函数func作用域里创建了一个变量a，从而遮蔽了外层全局作用域里的变量a

2.5 块级作用域

什么是块级作用域呢？简单来说，花括号内 {...} 的区域就是块级作用域区域。

很多语言本身都是支持块级作用域的。Javascript 中大部分情况下，只有两种作用域类型：全局作用域 和 函数作用域。

if (true) {
  var a = 1;
}

console.log(a); // 1

运行后会发现，结果还是 1，花括号内定义并赋值的 a 变量跑到全局了。这足以说明，Javascript 不是原生支持块级作用域的。

但是 ES6 标准提出了使用 let 和 const 代替 var 关键字，来“创建块级作用域”。也就是说，上述代码改成如下方式，块级作用域是有效的：

if (true) {
  let a = 1;
}

console.log(a); // ReferenceError

2.6 模块化

作用域的一个常见运用场景之一，就是 模块化。由于原生Javascript不支持模块化，在正式的模块化方案出来之前，开发者为了解决这类问题想到了使用函数作用域来创建模块的方法。

// module1.js
(function () {
  var a = 1;
  console.log(a);
})();

// module2.js
(function () {
  var a = 2;
  console.log(a);
})();

上面的代码中，构建了 module1 和 module2 两个代表模块的不同文件，立即调用函数表达式（Immediately Invoked Function Expression 简写 IIFE），两个函数内分别定义了一个同名变量 a ，由于函数作用域的隔离性质，这两个变量被保存在不同的作用域中（不嵌套），JS 引擎在执行这两个函数时会去不同的作用域中读取，并且外部作用域无法访问到函数内部的 a 变量。这样一来就巧妙地解决了 全局作用域污染 和 变量名冲突 的问题。并且，由于函数的包裹写法，这种方式看起来封装性好多了。

3. 闭包

3.1 什么是闭包

关于什么是闭包，说法很多：

在 JS 忍者秘籍(P90)中对闭包的定义：闭包允许函数访问并操作函数外部的变量。

红宝书上对于闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数。

MDN 对闭包的定义为：一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

function foo() {
  var a = 2;
  function bar() {
    console.log(a);
  }
  return bar;
}

var baz = foo();

baz(); // 2

函数bar()的词法作用域能够访问foo()的内部作用域。然后我们将bar()函数本身当作一个值类型进行传递。在这个例子中，我们将 bar 所引用的函数对象本身当作返回值。

在foo()执行后，其返回值（也就是内部的 bar()函数）赋值给变量baz并调用 baz()，实际上只是通过不同的标识符引用调用了内部的函数bar()。

bar()显然可以被正常执行。但是在这个例子中，它在自己定义的词法作用域以外的地方执行。
在 foo()执行后，通常会期待foo()的整个内部作用域都被销毁，因为我们知道引擎有垃圾回收器用来释放不再使用的内存空间。由于看上去 foo()的内容不会再被使用，所以很自然地会考虑对其进行回收。
而闭包的“神奇”之处正是可以阻止这件事情的发生。事实上内部作用域依然存在，因此没有被回收。谁在使用这个内部作用域？原来是bar()本身在使用。

拜bar()所声明的位置所赐，它拥有涵盖foo()内部作用域的闭包，使得该作用域能够一直存活，以供 bar()在之后任何时间进行引用。

bar()依然持有对该作用域的引用，而这个引用就叫作闭包。

3.2 闭包的作用

保护函数的私有变量不受外部的干扰。形成不销毁的栈内存。
保存，把一些函数内的值保存下来。闭包可以实现方法和属性的私有化

3.3 闭包经典使用场景

下面举例一些典型的闭包场景：

3.3.1 return 回一个函数

function foo() {
  var a = 2;
  function bar() {
    console.log(a);
  }
  return bar;
}

var baz = foo();

baz(); // 2

3.3.2 IIFE（自执行函数）

(function (a) {
  console.log(a);
})(1)

3.3.3 循环赋值

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

因为存在闭包的原因上面能依次输出1~10，闭包形成了10个互不干扰的私有作用域。将外层的自执行函数去掉后就不存在外部作用域的引用了，输出的结果就是连续的 10。为什么会连续输出10，因为 JS 是单线程的遇到异步的代码不会先执行(会入栈)，等到同步的代码执行完 i++ 到 10时，异步代码才开始执行此时的 i=10 输出的都是 10。

3.3.4 回调函数

setTimeout(function(){
  console.log(j)
}, 1000)

3.3.5 节流防抖

// 节流
function throttle(fn, timeout) {
    let timer = null
    return function (...arg) {
        if(timer) return
        timer = setTimeout(() => {
            fn.apply(this, arg)
            timer = null
        }, timeout)
    }
}

// 防抖
function debounce(fn, timeout){
    let timer = null
    return function(...arg){
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arg)
        }, timeout)
    }
}

3.3.6 柯里化实现

function curry(fn, len = fn.length) {
    return _curry(fn, len)
}

function _curry(fn, len, ...arg) {
    return function (...params) {
        let _arg = [...arg, ...params]
        if (_arg.length >= len) {
            return fn.apply(this, _arg)
        } else {
            return _curry.call(this, fn, len, ..._arg)
        }
    }
}

let fn = curry(function (a, b, c, d, e) {
    console.log(a + b + c + d + e)
})

fn(1, 2, 3, 4, 5)  // 15
fn(1, 2)(3, 4, 5)
fn(1, 2)(3)(4)(5)
fn(1)(2)(3)(4)(5)

最后，看下面这道题检验一下自己吧：

var result = [];
var a = 3;
var total = 0;

function foo(a) {
  for (var i = 0; i < 3; i++) {
    result[i] = function () {
      total += i * a;
      console.log(total);
    }
  }
}

foo(1);
result[0](); // 3
result[1](); // 6
result[2](); // 9