现代Javascript教程 - 学习笔记08 - 变量作用域,闭包

100 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第8天,点击查看活动详情

闭包,有种我也能学会的感觉!当然了!这教程太棒了!

学习链接

变量作用域,闭包 (javascript.info)

简介

闭包

  • 内部可以获取外部变量! - 函数内部

let的作用域

  • {}大括号包裹,就是它的作用域了!
  • 只在{}内可访问!
  • 比如在if,for中声明的变量!

let报错

  • 用let声明了一个变量
  • 再用let 声明同一个变量,就报错了

嵌套函数

  • 一个函数在另一个函数中创建
  • 函数套函数,没问题!

image.png


开始啃底层细节。。

变量

词法环境对象

  • 每个运行的函数
  • 每个代码块
  • 整个脚本都有!!

词法环境对象组成

  • 1.环境记录 - 存储 所有局部变量作为其属性
  • 2.对外部词法环境的引用 - 引用
  • 一个保存变量,一个保存引用!

简易版 image.png

详细版

image.png

文章原话!

“词法环境”是一个规范对象(specification object):它仅仅是存在于 编程语言规范 中的“理论上”存在的,用于描述事物如何运作的对象。我们无法在代码中获取该对象并直接对其进行操作。

这个词法环境目前记住了两点。。。

  • 存储
  • 引用

函数声明

之前感觉很神奇的地方,函数声明,在哪里都能找到它,今个有答案了!!

函数声明

  • 初始化会被立即完成
  • 创建一个词法环境时 - 系统创建。。。
  • 变为即用型函数 - 用到,就有了!
  • 函数和变量相比,随叫随到。。。

image.png

内部和外部的词法环境

介绍了函数的声明和调用!

image.png

当代码要访问一个变量时

  • 先在内部词法环境找 - 内部
  • 然后在外部词法环境找 - 外部
  • 更外部 - 最终到全局 - 真的和原型很像啊!!!

返回函数

还是这个例子!

image.png

测试不用嵌套函数,能否累加?

  • 不用嵌套函数返回 - 不可行,没有累加
  • 因为没有使用外部的词法环境!
  • 外部词法环境 - 存储 和引用!!!

测试全局变量,如何使用闭包?

  • 也是要嵌套函数
  • 函数里面放个函数,返回内部没有的变量,可累加!!

注意这个累加,是要修改值的,++是修改值的,用 = 需要赋值操作。。

垃圾回收

如果该函数不可达,即被回收 - 可达性 如果有可以找到的地方,不会被回收

image.png

总结

为什么要介绍词法环境

  • 因为在Js中一直都有啊。。
  • 变量去哪里找? 一步一步往上找,词法环境

什么是闭包?

  • 嵌套函数,可以引用外部变量,可以累加
  • 词法环境,解释上面的行为,内部没有,去外部找,外部的词法环境保留了,可累加
  • 为什么所有函数都是闭包,都可以往上面找。。直到全局变量。。

为什么要闭包?

  • 访问变量。。。

写博客是一件很酷的事!时刻向优秀的人学习~~~