1 概念

1) 域

域: 范围, 区域

在js中, 作用域分为全局作用域和局部作用域

• 全局作用域: 由<script>标签产生的区域, 从计算机的角度可以理解为window对象
• 局部作用域: 由函数产生的区域, 从计算机的角度可以理解为该函数的AO对象

2) 作用域链

在js中, 函数存在一个隐式属性[[scopes]], 这个属性用来保存当前函数在执行时的环境(上下文), 由于在数据结构上是链式的, 也被称为作用域链. 我们可以把它理解成一个数组

函数类型存在[[scopes]]属性

function a() {}

console.dir(a) // 打印内部结构

输出

[[scopes]]属性在函数声明时产生, 在函数被调用时更新

[[scopes]]属性记录当前函数的执行环境

在函数被调用时, 将该函数的AO对象压入到[[scopes]]中

示例

function a() {
  console.dir(a)
  function b() {
    console.dir(b)
    function c() {
      console.dir(c)
    }
    c()
  }
  b()
}
a()

演示

[[scopes]]属性是一个数组的形式

0: 是函数b的AO对象

1: 是GO对象

2 作用

作用域链有什么作用呢?

在访问变量或者函数时, 会在作用域链上依次查找, 最直观的表现是:

• 内部函数可以使用外部函数声明的变量

示例

function a() {
  var aa = 111
  function b() {
    console.log(aa)
  }
  b()
}
a()

• 在函数a中声明定义了变量aa
• 在函数b中没有声明, 却可以使用

思考

如果在函数b中, 也定义同名变量aa会怎样

示例

function a() {
  var aa = 111
  function b() {
    var aa = 222
    console.log(aa)
  }
  b()
}
a()

第一个问题: 函数a和函数b里的变量aa是不是同一个变量?

第二个问题: 函数b里打印的aa是用的谁?

结论

内部函数可以使用外部函数的变量

外部函数不能使用内部函数的变量