JS高级（7）—— 作用域与作用域链

红太狼 2022-12-23 00:49 257阅读 0赞

#### 一、作用域 ####

1.  理解

*  就是一块"地盘", 一个代码段所在的区域
 *  它是静态的(相对于上下文对象), 在编写代码时就确定了

1.  分类

*  全局作用域
 *  函数作用域
 *  没有块作用域(ES6有了)

1.  作用

*  隔离变量，不同作用域下同名变量不会有冲突

**例题：**

var a = 10, b = 20;
    function fn(x) { 
      var a = 100, c = 300;
      console.log('fn()', a, b, c, x);
      function bar(x) { 
        var a = 1000, d = 400;
        console.log('bar()', a, b, c, d, x)
      }
    
      bar(100);
      bar(200);
    }
    fn(10);

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

**打印结果：**

![在这里插入图片描述][20201121110619233.png_pic_center]

#### 二、作用域与执行上下文的区别 ####

1.  区别1：

*  全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定，而不是在函数调用时。
 *  全局执行上下文是在全局作用域确定之后，js代码马上执行之前创建。
 *  函数执行上下文是在调用函数时，函数体代码执行之前创建。

1.  区别2：

*  作用域是静态的，只要函数定义好了就一直存在，且不会再变化。
 *  执行上下文是动态的，调用函数时创建，函数调用结束时就会自动释放。

#### 三、作用域与执行上下文的联系 ####

*  执行上下文（对象）是从属于所在的作用域
 *  全局上下文环境==>全局作用域
 *  函数上下文环境==>对应的函数使用域  
      
      
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

#### 四、作用域链 ####

1.  理解

*  多个上下级关系的作用域形成的链，它的方向是从下向上的（从内到外）。
 *  查找变量时就是沿着作用域链来查找的。

1.  查找一个变量的查找规则  
    （1） 在当前作用域下的执行上下文中查找对应的属性，如果有直接返回，否则进入（2）。  
    （2）在上一级作用域的执行上下文中查找对应的属性，如果有直接返回，否则进入（3）。  
    （3）再次执行（2）的相同操作，直到全局作用域，如果还找不到就抛出找不到的异常。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]

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

#### 五、面试题 ####

##### 1、题1： #####

var x = 10;
    function fn() { 
      console.log(x);
    }
    function show(f) { 
      var x = 20;
      f();
    }
    show(fn);

![在这里插入图片描述][20201121153647121.png_pic_center]

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

##### 2、题2： #####

var fn = function () { 
    	console.log(fn)
    };
    fn();
    
    var obj = { 
    	fn2: function () { 
    		console.log(fn2);
    	}
    };
    obj.fn2()

![在这里插入图片描述][20201121153904334.png_pic_center]  
如果`console.log(fn2)`改成`console.log(this.fn2)`，就不会报错了，运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/14add2f6098043a2b03838a22de022a9.png
[20201121110619233.png_pic_center]: /images/20221120/6956f4174bc447b48faa6062dfdf0bcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221120/44c5e3f02e8d4f8381e5b45c33187bbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/b3152896f84744b4bd3df56330d18ee1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/d8037970c56a4b9091f452da38eab758.png
[20201121153647121.png_pic_center]: /images/20221120/9d02982f5c0344ada8b30c881353b0fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/f97b79fbbf8940d582e1c809189197ab.png
[20201121153904334.png_pic_center]: /images/20221120/aefbe06cb10e4c21b9c1ea6e0d289f4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/4dadd8f9b6d140658ed2eed0c8d15703.png