作用域 scope 和作用域链 scopes

wei-vivian

已于 2024-04-30 13:38:22 修改

阅读量938

点赞数 10

分类专栏： JavaScript 文章标签： javascript

于 2024-04-29 15:00:53 首次发布

本文链接：https://blog.csdn.net/www0925/article/details/138285632

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

【总结】

var 会变量提升；函数声明提升

作用域：
- 作用域就是变量的可用范围(scope)。目的是防止不同范围的变量之间互相干扰。
- 作用域有词法作用域、全局作用域、函数作用域、块作用域（ES6）
- 全局变量（可重复使用，会污染）和局部变量（不可重复使用，不会污染）
- 局部变量：1. 函数内 var 出来的 2. 函数的形参变量
作用域链：
- JavaScript 作用域链是由词法作用域决定的。
- 如果内外层作用域链存在相同命名的变量，内层作用域的变量值修改不会影响外层相同命名变量的值。
JS 中，作用域和作用域链都是对象结构
- 全局作用域其实是一个名为 window 的对象所有全局变量和全局函数都是 window 对象的成员。
- 函数作用域其实是 js 引擎在调用函数时才临时创建的一个作用域对象。其中保存函数的局部变量。而函数调用完，函数作用域对象就释放了。
- 所以：JS 中函数作用域对象，还有个别名——”活动的对象(Actived Object)”简称，AO。所以，局部变量不可重用。

作用域

作用域就是变量的可用范围(scope)。

目的：防止不同范围的变量之间互相干扰。

词法作用域（Lexical Scope）

词法作用域（也称为静态作用域）。

词法作用域是指变量的作用域是在代码书写阶段确定的（编译时），而不是在运行时确定的。

JavaScript 作用域链是由词法作用域决定的。

特点： 函数内部可以访问外部作用域的变量，但外部无法直接访问函数内部作用域的变量，除非通过闭包等特殊方式。举例：

function fun() {
  var a = 'Local Variable'; // 局部变量
  console.log(localVar); // 可以访问
}
fun();
console.log(a); // 报错，无法访问

在上面的代码中，a 是使用 var 声明的变量，在函数 fun 内部声明，因此它的作用域限定在这个函数内部。外部无法直接访问函数内部的 a 变量，这符合词法作用域的规则。

全局作用域（Global Scope） & 全局变量

不属于任何函数的外部范围称为全局作用域。

局部变量：
保存在全局作用域的变量称为局部变量。全局变量和函数可以在代码的任何位置使用。

优点: 可反复使用

缺点: 全局污染——开发时禁止使用

灵魂拷问：如果全班共用一个喝水杯。
你会不会用？为什么？

函数作用域（Function Scope） & 局部变量

一个函数内的范围称为函数作用域。

函数的作用域是在定义函数时确定的，而不是在调用函数时确定的。

局部变量：
保存在函数作用域内的变量称为局部变量。

函数内部声明的变量和函数只能在该函数内部访问。在函数外部无法访问，从而实现了变量的封装和保护。

优点: 不会被污染

缺点: 无法反复使用

注意：

形参变量也是函数内的局部变量。 形参变量虽然没有用 var 声明，但是形参变量也是函数内的局部变量！
```
var a = 100;
function fun (a) {
  a++
  console.log(a) // 101
}
fun(a)
console.log(a) // 100
```
只有函数的 {}，才能形成作用域： 不是所有 {} 都能形成作用域。也不是所有 {} 内的数据都能是局部变量。

比如：对象的 {}，就不是作用域！对象中的属性，也不是局部变量
```
var info = { // 对象的{}，就不是作用域！
  sname: “Li Lei”, // 对象中的属性，也不是局部变量
}
```

除函数 {} 之外的其余 {}，都不是作用域。都拦不住内部的变量超出 {} 的范围影响外部程序。比如：

console.log(a) // 不报错, undefined
if (false) {
  // 不是作用域，拦不住变量被声明提前
  var a = 10
}
console.log(a) // 10

块级作用域（Block Scope）

在 ES6 之前，JavaScript 中没有块级作用域，使用 var 声明的变量在块级作用域外部也可以访问，但是使用 let 或 const 声明的变量具有块级作用域特性。

console.log(a) // 报错：Uncaught ReferenceError: a is not defined
if (true) {
  let a = 10 // 使用let、const 声明的变量不会变量提升
  // 如果将let改成var，第一个log(a) 为 undefiend，第二个为 10
}
console.log(a)

块级作用域 是在代码块 {} 内部声明的变量和函数只能在该代码块内部访问。

注意：

代码块 {} 指函数、if else 、for 等内部，不包含对象的 {}
只有 let 、const 有块作用域，var 没有

暂时性死区

暂时性死区(Temporal Dead Zone)，简称 TDZ。

暂时性死区是指在使用 let 或 const 声明变量时，变量存在于一个尚未初始化的“死区”，在该死区内访问变量会导致引擎抛出 ReferenceError。

暂时性死区的存在是为了在代码中明确声明变量的使用范围，并避免在变量未初始化时访问它，从而提高代码的健壮性和可读性。

console.log(innerVar); // Uncaught ReferenceError: a is not defined

function exampleFunction() {
  /* TDZ start */
  // exampleFunction 作用域内， innerVar 前面 的这块区域是 TDZ

  // 在 TDZ 内访问未声明的变量会导致引擎抛出 ReferenceError
  console.log(innerVar); // ReferenceError: Cannot access 'innerVar' before initialization
  
  /* TDZ end*/
  let innerVar = 'World';
}

var

对于 var 来说，有词法作用域、全局作用域、局部作用域。

let、const

对于 let、const 来说，有词法作用域、全局作用域、块作用域。

也有人说其实没有块作用域，let、const 相当于匿名函数自调。认为 let a = 10 等价于下面代码
(function () {
  let a =10   // a 的作用域为匿名函数
})()
不知道谁对谁错，一方面看浏览器控制台调试 let 作用域，是有代码块 Block 的。另一方面匿名函数也确实能够实现 let 块作用域效果

示例：let 作用域

脚本 Script
本地 Local
全局 Global
代码块 Block

let a = 'foo' // 作用域: 脚本（a: undefined）、全局（window）

function fun() {
  let b = 'bar' // 作用域: 本地（this: window、b: undefined、c: undefined）、脚本（a: foo）、全局（window）
  let c = 'baz' // 作用域: 本地（this: window、b: bar、c: undefined）、脚本（a: foo）、全局（window）
  arr = [] // 作用域: 本地（this: window、b: bar、c: baz）、脚本（a: foo）、全局（window）
  
  for (let i = 0; i < 3; i++) {
    // 作用域: 代码块（i: undefined）、本地（this:window、b: bar、c: baz）、脚本（a: foo）、全局（window、window.arr: []）
    
    let x = 1 // 作用域: 代码块（x: undefined、y: undefined）、代码块（i: 0）、本地（this:window、b: bar、c: baz）、脚本（a: foo）、全局（window、window.arr: []）
    
    let y = 2 // 作用域: 代码块（x: 1、y: undefined）、代码块（i: 0）、本地（this:window、b: bar、c: baz）、脚本（a: foo）、全局（window、window.arr: []）
    
    // 作用域: 本地（this:Array(3)、Return value: undefined）、代码块（i: 0）、脚本（a: foo）、全局（window、window.arr: [f, f, f]）
    arr[i] = function () {
      // 作用域: 本地（this:Array(3)）、代码块（i: 0）、脚本（a: foo）、全局（window、window.arr: [f, f, f]）
      // 作用域: 本地（this:Array(3)）、代码块（i: 1）、脚本（a: foo）、全局（window、window.arr: [f, f, f]）
      // 作用域: 本地（this:Array(3)）、代码块（i: 2）、脚本（a: foo）、全局（window、window.arr: [f, f, f]）
      console.log(i)
    } 
  }
}

fun() // fun函数执行完毕，作用域: 脚本（a: foo）、全局（window、window.arr: [f, f, f]）

arr[0]() // arr[0]()执行完毕，作用域: 脚本（a: foo）、全局（window、window.arr: [f, f, f]）
arr[1]() // arr[1]()执行完毕，作用域: 脚本（a: foo）、全局（window、window.arr: [f, f, f]）
arr[2]() // arr[2]()执行完毕，作用域: 脚本（a: foo）、全局（window、window.arr: [f, f, f]）

// 作用域: 语句全部执行完毕，作用域清空

作用域链 scopes / scope chain

作用域链 scopes

一个函数，既能用自己作用域的变量，又能用外层作用域的变量。所以，需要一个“路线图”告诉每个函数，自己都可以去哪里找到想用的变量。就像生活中我们规划旅游景点的游览路线一样。
在这里插入图片描述
JavaScript 作用域链是由词法作用域决定的。也就是在编译时，就已经规划好了自己专属的一个查找变量的路线图，称为作用域链。

比如：当我们定义函数 z() 时，函数 z 就为自己规划好了一个由内向外的查找路线。以防未来运行时，一旦自己缺少变量，应该去找谁——未雨绸缪。

var x = 1 // 全局作用域有 x

function y() {
  // 外层 y 函数的作用域有 y
  var y = 2
  
  function z() {
    // 内存 z 函数的作用域有 z
    var z = 3
  }
}

一个函数可用的所有作用域串联起来，就行成了当前函数的作用域链。
在这里插入图片描述

作用域链查找路径

当执行到某条语句时，JS 引擎会自动沿函数的作用域链查找要用的变量，查找路径是这样的:

var x = 1 // 全局作用域有 x

function y() {
  // 外层 y 函数的作用域有 y
  var y = 2
  
  function z() {
    // 内层 z 函数的作用域有 z
    var z = 3
    console.log(x)
    console.log(i)
  }
}

x 查找路线：

先查找z函数自己的作用域有没有 x
在查找外层y函数的作用域有没有 x
在查找全局作用域有没有 x，找到了，打印 1

i 查找路线：

先查找z函数自己的作用域有没有 i
在查找外层y函数的作用域有没有 i
在查找全局作用域有没有 i
没有找到 i 未定义，报错：ReferenceError: i is not defined

特殊: 给从未声明过的变量赋值

var x = 1 // 全局作用域有 x

function y() {
  // 外层 y 函数的作用域有 y
  var y = 2
  
  function z() {
    // 内层 z 函数的作用域有 z
    var z = 3
    i = 10 // 如果程序改成给i赋值，会不会报错: ?
  }
}

i = 10 语句不报错，而是自动在全局创建变量 i

执行原理：

JS 引擎先查找 z 函数自己的作用域有没有 i
在查找外层 y 函数的作用域有没有 i
在查找全局作用域有没有 i
都没有，在全局创建变量 i

JS 中，作用域和作用域链都是对象结构

test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var a = 10
      function fun() {
        var a = 100
        a++
        console.log(a)
      }
      fun() // ?101
      console.log(a) // ?10
    </script>
  </body>
</html>

函数调用的过程

程序执行前：词法分析
- 声明全局变量 a，值为 undefined。
- 声明全局函数 fun，保存函数体，假设引用地址为 0x1234。
程序执行
- a = 10 查找全局变量 a ，找到并赋值 10
- fun() 查找全局函数 fun，找到并调用
  - 临时创建函数作用域对象：词法分析
    - 声明 fun 函数局部变量 a，值为 undefined
  - 按照函数体语句顺序执行
    - a = 100 查找局部变量 a ，找到,并赋值 100
    - a++ 查找局部变量 a ，找到且值为100，执行运算，a 值变为 101
    - console.log(a) 查找局部变量 a ，找到且值为 101，输出 101
  - 函数执行结束
    - 释放函数，函数作用域对象局部变量紧跟着释放。所以，局部变量在函数释放后就不存在了。
    - 内存恢复到函数调用之前的样子。
      由于函数执行完毕后会被释放，所以：
      
      JS 中 “函数作用域对象 ”还有个别名—— “ 活动的对象（Actived Object）” 简称 AO。
      局部变量不可重用。
- console.log(a) 查找全局变量 a ，找到且值为 10，输出 10

观察全局作用域

用浏览器运行，并按 F12 打开控制台，选择 Sources，选择文件，打上断点后刷新页面，观察右侧的 scope

此时我们可以看到，全局作用域是一个名为 Window 的对象结构

观察 scopes 作用域链

展开 fun 函数，看 scopes 作用域链部分
点击 1 左上角蓝色向右三角，让程序运行到 fun 函数内第一条语句位置，此时 JS 引擎已经开始调用 fun 函数
连续点击左上角蓝色向右箭头，让调试工具运行到整段程序组后一句，观察作用域的变化和 fun 函数对象的 scopes 作用域链的变化

小试牛刀

考察函数作用域

1

console.log(a)
if (false) {
  var a = 10
}
console.log(a)

答：undefined undefined

console.log(a) // undefined，var a 变量提升
if (false) {
  // 不是作用域，拦不住变量被声明提前
  var a = 10
}
console.log(a) // 10

解析：

词法作用域：声明了全局变量 a
console.log(a) 全局查找，存在变量a 但是没有赋值，输出 undefined
if (false) 执行语句，条件不成立，不执行 if 块内代码
console.log(a) 全局查找，存在变量a 但是没有赋值，输出 undefined

2

console.log(a)
if (true) {
  var a = 10
}
console.log(a)

答：undefined 10

考察块作用域

console.log(a)
if (false) {
  let a = 10
}
console.log(a)

答：Uncaught ReferenceError: a is not defined

console.log(a) // 报错：Uncaught ReferenceError: a is not defined
if (false) {
  let a = 10 // 不会
}
console.log(a) //

解析：

词法作用域：声明了全局变量 a
console.log(a) 全局查找，存在变量a 但是没有赋值，输出 undefined
if (false) 执行语句，条件不成立，不执行 if 块内代码
console.log(a) 全局查找，存在变量a 但是没有赋值，输出 undefined

考察暂时性死区

1

function fun() {
  console.log(a); // ?
  let a= 'World';
}
fun()

答：Uncaught ReferenceError: Cannot access ‘a’ before initialization
解析：let、const 为ES6引入，且新增块作用域概念。在块作用域内，let、const 变量声明的前面，对该变量形成暂时性死区 TDZ，调用变脸会抛错

function exampleFunction() {
  /* TDZ start */
  // exampleFunction 作用域内， innerVar 前面 的这块区域是 TDZ

  // 在 TDZ 内访问未声明的变量会导致引擎抛出 ReferenceError
  console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
  
  /* TDZ end*/
  let a= 'World';
}
exampleFunction()

2

console.log(a);
function exampleFunction() {
  console.log(a);
  let a= 'World';
}
exampleFunction()

答：报错 Uncaught ReferenceError: a is not defined

console.log(a); // Uncaught ReferenceError: a is not defined
function exampleFunction() {
  console.log(a);
  let a= 'World';
}
exampleFunction()

考察作用域链

var x = 1

function y() {
  var y = 2
  
  function z() {
    var z = 3
    console.log(x) // ?
    console.log(i) // ?
  }
  z()
}
y()

答：

1   
Uncaught ReferenceError: i is not defined

综合

考察：词法作用域、全局作用域、函数作用域、全局变量、局部变量、作用域链

1

function fun() {
  var a = 'Local Variable';
  console.log(a); // ?
}
fun();
console.log(a); // ?

答：

Local Variable
Uncaught ReferenceError: a is not defined

解析：

function fun 声明一个函数 fun
fun() 调用函数
- var a 声明fun 函数局部变量 a 并赋值 ‘Local Variable’
- console.log(a) 函数内部作用域查找，输出 a ‘Local Variable’
console.log(a) 在全局作用域查找，没有找到变量 a ，抛错 Uncaught ReferenceError: a is not defined

2

var a = 10
function fun() {
  a = 100
  a++
  console.log(a)
}
fun() // ?
console.log(a) // ?

答：101 101

解析：

var a = 10 声明一个全局变量a ，并赋值 10
function fun 声明一个函数 fun
fun()函数执行语句：
- a = 100; fun函数作用域没有 a，找到全局作用域，有a ，为全局作用域的 a 进行赋值。得到 a = 100
- a++; fun函数作用域没有 a，找到全局作用域，有 a 并且值为 100，a++ 语句执行后。得到 a = 101
- console.log(a); fun函数作用域没有 a，找到全局作用域，有 a 并且值为 101。得到 a = 101
console.log(a); 全局作用域查找，找到 a，此时 a 已经过 fun() 语句的执行，导致 a 的值变为 101。得到 a = 101

3

var a = 10
function fun() {
  var a = 100
  a++
  console.log(a)
}
fun() // ?
console.log(a) // ?

答：101 10

解析：

var a = 10 声明一个全局变量a ，并赋值 10
function fun 声明一个函数 fun
fun()函数执行语句：
- var a = 100; 声明fun 函数局部变量 a ，并赋值 100
- a++; 函数内部作用域查找，找到 a，且值为 100，a++ 语句执行后。得到 a = 101
- console.log(a); fun函数作用域有 a 并且值为 101。得到 a = 101
console.log(a); 全局作用域查找，找到 a = 10。得到 a = 10

4

var a = 10
function fun(a) {
  a++
  console.log(a)
}
fun(a) //?
console.log(a) //?

答：11 10
解析：

fun()函数执行语句：
- fun(a); 传入参数 a 并且值为 10。此时 fun 函数作用域链 a 的值赋值为 10。得到 a = 10
- a++; fun函数作用域有 a 并且值为 10，a++ 语句执行后。得到 a = 11
- console.log(a); fun函数作用域有 a 并且值为 11。得到 a = 11
console.log(a); 全局作用域查找，找到 a，此时 a 已经过 fun() 语句的执行，导致 a 的值变为 101。得到 a = 101

考察：局部变量——形参变量也是函数的局部变量
注意：函数传参采用的是按值传递。原始类型的值，在传参时，是将原变量的值复制一个副本给函数形参变量。所以，在函数内，修改形参变量，不影响外部原变量的值。所以，此时内存中有两个 10

wei-vivian

关注

10
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
作用域 scope 和作用域链 scopes

var 会变量提升；函数声明提升作用域就是变量的可用范围(scope)。目的是防止不同范围的变量之间互相干扰。作用域有词法作用域、全局作用域、函数作用域、块作用域（ES6）全局变量（可重复使用，会污染）和局部变量（不可重复使用，不会污染）局部变量：1. 函数内var出来的 2. 函数的形参变量JavaScript 作用域链是由词法作用域决定的。如果内外层作用域链存在相同命名的变量，内层作用域的变量值修改不会影响外层相同命名变量的值。JS 中，作用域和作用域链都是对象结构。
复制链接

扫一扫