【JavaScript】18_函数的作用域与作用域链

简介: # 9、作用域​ 作用域(scope)- 作用域指的是一个变量的可见区域 - 作用域有两种:## 全局作用域- 全局作用域在网页运行时创建,在网页关闭时消耗- 所有直接编写到script标签中的代码都位于全局作用域中- 全局作用域中的变量是全局变量,可以在任意位置访问## 局部作用域- 块作用域 - 块作用域是一种局部作用域 - 块作用域在代码块执行时创建,代码块执行完毕它就销毁 - 在块作用域中声明的变量是局部变量,只能在块内部访问,外部无法访问```html<script> let a = "变量a" {

9、作用域

​ 作用域(scope)

  • 作用域指的是一个变量的可见区域

    • 作用域有两种:

全局作用域

  • 全局作用域在网页运行时创建,在网页关闭时消耗
  • 所有直接编写到script标签中的代码都位于全局作用域中
  • 全局作用域中的变量是全局变量,可以在任意位置访问

局部作用域

  • 块作用域

    • 块作用域是一种局部作用域
    • 块作用域在代码块执行时创建,代码块执行完毕它就销毁
    • 在块作用域中声明的变量是局部变量,只能在块内部访问,外部无法访问
<script>
    let a = "变量a"
    {
        let b = "变量b"
        {
            {
                console.log(b)
            }
        }
    }

    {
        console.log(b)
    }
</script>

10、函数作用域

函数作用域

  • 函数作用域也是一种局部作用域
  • 函数作用域在函数调用时产生,调用结束后销毁
  • 函数每次调用都会产生一个全新的函数作用域
  • 在函数中定义的变量是局部变量,只能在函数内部访问,外部无法访问
    <script>
        function fn(){
            let a = "fn中的变量a"

            console.log(a)
        }
        fn()
        console.log(a)
    </script>

11、作用域链

- 当我们使用一个变量时,

JS解释器会优先在当前作用域中寻找变量,就近原则

如果找到了则直接使用

如果没找到,则去上一层作用域中寻找,找到了则使用

如果没找到,则继续去上一层寻找,以此类推

如果一直到全局作用域都没找到,则报错 xxx is not defined

    <script>
        // let a = 10

        {
            // let a = "第一代码块中的a"
            {
                // let a = "第二代码块中的a"
                // console.log(a)
            }
        }

        let b = 33
        function fn(){
            let b = 44

            function f1(){
                let b = 55
                console.log(b)
            }

            f1()
        }
        fn()
    </script>
相关文章
|
2天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
11天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
18 4
|
1月前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
10天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
11 2
|
13天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
20 5
|
12天前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
17 3
|
16天前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
14 3
|
15天前
|
JavaScript 前端开发
js作用域
js作用域
12 1
|
17天前
|
JavaScript 前端开发
在JS中如何声明一个函数
在JS中如何声明一个函数
22 2
|
29天前
|
JavaScript 前端开发
JavaScript函数可以返回两个值
JavaScript函数可以返回两个值