学习 Javascript 闭包(Closure)

闭包(Closure)是 javascript 语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。包括React中常用的useEffect,use Callback; 所以理解了闭包对 javascript 有了一个更深了的了解。对于很多 bug 都可以快速定位到问题。

什么是闭包？

大家可以想象一下，我们把书本放到书包里面。然后把拉链拉起来。这个关闭的书包相当于 javascript 里面的闭包。存放在书包里面的书本，我们什么时候想查看打开书包就能查看了。

如何形成闭包


function fn1() {
  const a = "rex";
  function fn2() {
    // 在fn2 的作用域中 打印一个没有定义的变量a 依然能访问
    // 这就形成最简单的闭包形式
    console.log(a);
  }
}
function fn1() {

  const a = "rex";

  function fn2() {
    // 在fn2 的作用域中 打印一个没有定义的变量a 依然能访问
    // 这就形成最简单的闭包形式
    console.log(a);
  }
}
function fn1() {

  const a = "rex";

  function fn2() {
    // 在fn2 的作用域中 打印一个没有定义的变量a 依然能访问
    // 这就形成最简单的闭包形式
    console.log(a);
  }
}

如果我们把以上的代码修改一下,在 fn2 中没有引用 b 的变量。我们能在闭包中获取到 b 的变量吗？


function fn1() {
  const a = "rex";
  const b = "web";
  function fn2() {
    // 在fn2 的作用域中 打印一个没有定义的变量a 依然能访问
    // 这就形成最简单的闭包形式
    console.log(a);
  }
}
function fn1() {

  const a = "rex";

  const b = "web";
  function fn2() {
    // 在fn2 的作用域中 打印一个没有定义的变量a 依然能访问
    // 这就形成最简单的闭包形式
    console.log(a);
  }

}
function fn1() {

  const a = "rex";

  const b = "web";
  function fn2() {
    // 在fn2 的作用域中 打印一个没有定义的变量a 依然能访问
    // 这就形成最简单的闭包形式
    console.log(a);
  }

}

所以形成闭包的首要条件是内部函数引用了嵌套父节点以上外部函数的变量成员变量时候才能形成闭包。

闭包的到底在 javascript 中解决那些问题？

变量私有什么的请不要在听网上的八股文了，js 中的函数就是一个对象。函数里面定义的变量就已经可以私有化。

传统的 javascript，es6 之前没有诞生之前。js 是没有块级作用域。它只有函数和全局作用域两种类型。
在其他语言当中它有代码块。

如果你的变量作用在函数作用域里，一般执行完成函数后就会马上释放，包括函数自身也会被释放掉。

所以闭包的作用很多时候是为了防止你的变量被函数执行完后被释放掉…

有了这个概念后我们在看看一下的代码，这函数范式里面典型的类面向对象写法


function human(n) {
  const name = n;
  function sayHi() {
    console.log(`Hi I am ${name}`)
  }
  function sayHowYouFeel() {
    console.log(`${name} is feeling good!`)
  }
  return {
    sayHi,
    sayHowYouFeel
  }
}
function human(n) {
  const name = n;
  function sayHi() {
    console.log(`Hi I am ${name}`)
  }
  function sayHowYouFeel() {
    console.log(`${name} is feeling good!`)
  }

  return {
    sayHi,
    sayHowYouFeel
  }
}
function human(n) {
  const name = n;
  function sayHi() {
    console.log(`Hi I am ${name}`)
  }
  function sayHowYouFeel() {
    console.log(`${name} is feeling good!`)
  }

  return {
    sayHi,
    sayHowYouFeel
  }
}

设想一下，如果没有闭包保存变量的操作会发生什么事情？


const rex = human('rex') //执行完函数 name 被释放
rex.sayHi() // out -> Hi I am undefind
const rex = human('rex') //执行完函数 name 被释放
rex.sayHi() // out -> Hi I am undefind
const rex = human('rex') //执行完函数 name 被释放
rex.sayHi() // out -> Hi I am undefind