作用域和自由变量

逃离我推掉我的手 2022-12-13 01:58 161阅读 0赞

### 作用域（定义） ###

--------------------

> 变量作用域：就是一个变量可以使用的范围。

### 作用域 （种类） ###

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]

*  js中首先有一个最外层的作用域，`全局作用域`；
 *  js中可以通过函数来创建一个独立作用域称为`函数作用域`，函数可以嵌套，所以作用域也可以嵌套；
 *  es6中新增了`块级作用域`（大括号，比如：if\{\},for()\{\},while()\{\}…）；

**如下图所示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]

es6作用域,只适用于const,let  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]

### 自由变量 ###

--------------------

**自由变量的概念：** 当前作用域没有定义的变量

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]

### 作用域链 ###

--------------------

自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全局作用域，就形成了作用域链。

### 变量提升（预解析） ###

--------------------

> var声明的变量，function声明的函数存在变量提升  
> let const 不会变量提升

**1. javascript中声明并定义一个变量时，会把声明提前，以下会先打印出undefined，再打印出10**

console.log(a)
    var a = 10
    console.log(a)

相当于

var a
    console.log(a)；//undefined
    a = 10
    console.log(a) //10

**2. 函数声明也是，以下函数相当于把整个fn提到作用域的最上面，所以调用fn时会正常打印jack**

fn('jack')；//jack
    function fn (name){ 
    console.log(name)
    }

**3. 不过函数表达式不行，以下是一个函数表达式，JavaScript会把var fn提到作用域最上面，没有吧函数提上去，所以会报错。**

fn("jack");//报错
    var fn = function(name) { 
    console.log(name);
    };

### 变量提升面试题 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 5]  
代码如下：

var x = 30;
      function test(){ 
          alert(x);
          var x = 10;
          alert(x);
          x=20;
          function x(){ 
    
          };
          alert(x);
      }
      test();

**分析：**

**第一步：**

> test是函数，每个函数作用域也首先要进行预解析，var,function声明的变量或者函数首先变量提升，但是函数的优先级高于变量，所以`预解析池`最终结果为`function x(){}`

**步骤二：**

> 从上往下，逐步执行： 第一个`alert(x)`中的x向上查找，直至找到预解析池，`function x(){}`,  
> 第二个`alert(x)`中的x向上查找，找到var x=10;, 弹出 10；
> 
> 第二个`alert(x)`中的x向上查找，找到 x=10;, 弹出 20；

### 作用域相关面试题 （i的问题） ###

--------------------

<body>
        
    </body>
    
    <script>
    let a
    for (var i = 0; i < 10; i++) { 
        a = document.createElement('a')
        a.innerHTML = i + '<br>'
        a.addEventListener('click', function (e) { 
            e.preventDefault()
            console.log(i)
        })
        document.body.appendChild(a)
    }
    </script>

效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 6])  
分析：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 7])  
那么如何才能点击不同的a，输出对应的i值呢：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 8]  
效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 9]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/1516e14dadfd45c285394f6d7c15f02c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/1e190deafd2740849bfde73f7394342f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/5ca96e1720414395880732f7d6af0b04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/4350bfb519ee4700bcd6fb4ab7b2dcdd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/024d837bf0c54a5c9278ca021d54a787.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/23d45d401f704ac6bd1cb0d955517cb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/0820b2e0449b4fe49909771211edd894.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/e883d80063264524969ec14aa69f9f4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/ad92d812883148b49d7bc979ea517248.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/dee38f503905466ebb2e95ad7a030771.png