9.JS-作用域-预解析

最新推荐文章于 2024-10-01 20:12:28 发布

MY Daisy

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量415

点赞数

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

本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128561289

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.作用域

代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性，减少命名冲突

2.js作用域的分类（es6之前）

全局作用域和局部作用域
全局作用域：整个script标签或者是一个单独的js文件
局部作用域：在函数内部就是局部作用域

3.变量的作用域

3.1全局变量

1、在全局作用域下声明的变量，在任何位置都可以使用
2、在函数内部没有声明，直接赋值的变量也属于全局变量（要先调用一次函数）
3、全局变量只有在浏览器关闭时才会销毁，比较占用内存资源

<!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>
    <script>
        function fun(){
            num = 2;
        }
        fun();
        console.log(num);
    </script>
</head>
<body>
    
</body>
</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>
    <script>
        function fun(){
            num = 2;
        }
        // fun();
        console.log(num);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.2局部变量

1、在局部作用域中声明的变量，只能在局部作用域中使用，如果超出了局部作用域范围去使用该变量，就会报错
2、函数的形参也可以看作是局部变量
3、当程序执行完毕就会销毁，比较节约资源

4.JS没有块级作用域

es6之后新增了块级作用域

4.1块级作用域：

用花括号{}括起来的范围，如if(){}
在块级作用域内部声明的变量，在外部不能调用

5.作用域链

根据内部函数可以访问外部函数变量这种机制，用链式查找决定哪些数据能被内部函数访问，就称为作用域链
就近原则查找

<!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>
    <script>
        var num = 1;
        function fun1() {
            var num = 2;
            function fun2() {
                return num;
            }
            return fun2();
        }
        console.log(fun1());

    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

6.预解析

js引擎运行js分为两步：预解析和代码执行
预解析：js引擎会把js里所有的var和function提升到当前作用域的最前面
代码执行：按照代码书写顺序，从上往下执行

6.1 变量预解析（提升）

把所有变量声明提到当前的作用域最前面，但是不提升赋值操作

<!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>
    <script>
        console.log(num);//undefined
        var num = 10;
        
        fun();//报错
        var fun=function(){
            console.log(12);
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

6.2 函数预解析（提升）

把所有函数声明提升到当前作用域最前面，但是不调用函数

<!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>
    <script>
        fun();
        function fun(){
            console.log(1);
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
案例：

f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1() {
            var a = b = c = 9;//var a=9; b=9;c=9;
            console.log(a);
            console.log(b);
            console.log(c);
        }