【从头学前端】10-JavaScript中的作用域-CSDN博客

本文链接：https://blog.csdn.net/weixin_46163658/article/details/119652463

Hello 大家好，我是彼岸繁華🌸，一个坚信努力可以改变命运的前端👨🏻‍💻，如果有幸写的文章可以得到你的青睐，万分有幸~

编写不易转载请获得允许

写在前面

本篇文章我们将来学习JavaScript中的作用域。通过本篇文章的学习可以掌握什么知识呢？如下图：

01_导读.png

什么是作用域

JavaScript中的作用域 (scope )，就是指变量、函数或者对象的可访问范围 。也就是说，作用域控制着变量、函数或者对象的可见性和生命周期。

可访问范围

所谓的可访问范围 ，就是指某个变量、函数或者对象在一个特定的执行环境中可以被访问，但一旦超出这个执行环境就无法被访问。例如每一个函数都有自己的执行环境，也就是说，在一个函数中如果声明一个变量的话，就只能在该函数才能访问。

示例代码如下：

function func () {
    var v = 100; // 我是函数中的变量
    console.log(v) // 打印变量v
}
// 在函数体外访问变量 v
console.log(v) // 抛出异常： v is not defined

生命周期

所谓的生命周期，就是指某个变量、函数或者对象从被创建到被销毁的过程。如果以变量为例的话，一般情况下，声明变量就是变量的生命周期的开始，而当前执行环境中所有代码全部执行完毕之后，也就是变量被销毁的时候。

想要验证一个变量的生命周期，我们可以通过断点调试代码的方式来验证。如下图所示

02_生命周期.gif

我们可以看到当代码执行到func函数的函数体中的第一行，也就是说，声明变量v这条语句时（代码停止在这一条语句，表示该条语句还没有执行 ）。在local 中已经创建的v变量，但值为undefined 是因为该条语句还没有执行，然后进行赋值操作，这个函数体执行完毕之后，变量v也就消失了，也就是一个生命周期结束了。

作用域的分类

JavaScript中的作用域可以根据执行环境的不同可以分为以下两种：

全局作用域：指的是所有函数外部的执行环境。在全局作用域定义的变量、函数或者对象在任意位置都可以访问。
局部作用域：指的是某一个函数内部或者代码块的内部的执行环境。在函数内部或者代码块的内部定义的变量、函数或者对象只能在当前函数内部或者代码块的内部访问。

注意：ECMASCript6才有了块级作用域的概念，我们现在讨论的是ECMAScript5以及之前的版本中的作用域。

变量作用域

全局变量

在ECMAScript5以及之前的版本中，全局变量指的就是那些声明在所有函数的函数体外部的变量。全局变量是允许在 JavaScript 代码的任意位置都可以访问到的。

示例代码如下：

var v = 100; // 定义全局变量
console.log(v) // 访问变量 v
function fun () {
    console.log(v) // 在局部作用域中访问全局变量 v
}
fun() // 100

局部变量

在ECMAScript5以及之前的版本中，局部变量指的就是那些声明在某个函数内部的变量。局部变量只能在当前函数作用域中访问，在当前函数作用域外（无论是全局作用域还是其他函数作用域）都是无法访问的。

示例代码

示例代码如下：

function func () {
    var v = 100; // 定义局部变量
    console.log(v)  // 访问局部变量
}
func()
console.log(v) // 在函数体外访问局部变量。。抛出异常：v is not defined
function fun () {
    console.log(v) // 在其他函数中访问局部变量。。抛出异常：v is not defined
}
fun()

函数作用域

全局函数

在ECMAScript5以及之前的版本中，所谓的全局函数，就是声明在全局作用域中的函数，这个函数是允许在JavaScript代码的任意位置访问的函数。

示例代码如下：

function fun () {  // 声明且初始化
    console.log('我是fun函数')
}
// 调用全局函数
fun()  // 我是fun函数
function fn () {
    fun() // 在fn函数体中访问全局函数
}
fn()  // 我是fun函数

局部函数

局部函数又称内部函数，指的就是那些声明在某个函数内部的函数。内部函数只能在当前函数作用域中访问，在当前函数作用域外（无论是全局作用域还是其他函数作用域 ）都是无法访问的。

示例代码如下：

function fun () {  // 声明且初始化
    function fn () {
        console.log('我是fn函数')
    }
    fn()  // 我是fn函数
}
// 调用全局函数
fun()  // 我是fn函数
function f () {
    fn() // 在f函数体中访问内部函数
}
  // f()  // 抛出异常