《你不知道的js》 ------1.作用域是什么

时间：2022-02-10 08:09:02

　　

相关定义

  • 引擎：从头到尾负责整个JavaScript程序的编译及执行过程。
  • 编译器：负责语法分析及代码生成等。
  • 作用域：负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。

　　引擎会调用编译器对源代码进行编译，其中编译器编译过程中遇到变量声明会将其添加到当前作用域中，引擎执行编译过后的代码，遇到变量时会去作用域查找。

总结

  1. 当程序中含有var a = 2时，会分为“var a; a = 2;”两个部分：①首先是编译器查看作用域，如果作用域已含有a则忽略该声明(var a;)继续编译，否则会要求作用域在当前的集合中声明一个新的命名为a的变量(该步骤在代码执行前执行)。②编译器为引擎生成运行处理a = 2所需的代码，引擎运行该代码时会在当前的作用域集合中查看是否有a，如果有的话会使用这个变量，没有的话则会继续查找。  （ps：因为在编译执行前将变量a加入作用域中，所以即使在声明a之前调用它也不会报错，因为当前作用域中已含有它，只不过执行到赋值语句前为undefined，这也就是通常所说的声明提前。） 
    //不会报错，因为在编译执行之前，f 函数的上级作用域中已含有变量a的声明，所以运行时会弹出undefined。
    
    window.onload = function(){
    
        function f(){
    
            alert(a);
    
        }
    
        f();
    
        var a = 0;
    
    }
  2. 引用类型：LHS和RHS，即赋值操作的左侧和右侧（也可理解为对变量赋值和使用变量的值）。因为对于引擎来说，它对于赋值和调用会对该次变量引用执行不同的操作，所以需要区分。LHS即类似a = 2，function f(a){...}中的a(被赋值)，RHS即a = b + 2;console.log(b)中的b(被调用)
  3. 作用域是一层一层嵌套的，当引擎没有在当前作用域中查找到该变量时，它会向该作用域的上一层作用域继续查找，最上层为全局作用域，再没有找到则会报ReferenceError异常。如图，则会报错,因为作用域只能向上查找。 
    //会报错，因为作用域只会向上查找
    
window.onload = function(){
    
        function f(){
    
            var a = 0;
    
        }

        alert(a);
    
    }

  4. 有一种特殊情况：在非严格模式下（无"use strict"）,当变量为LHS且未声明时（即未声明就赋值），全局作用域会自动创建该变量并返回给引擎(这就是为什么在函数中不声明直接赋值，这个变量会变为全局变量)，开启严格模式后则不会自动创建，报Referenct错误。如下：

    //当未开启严格模式时，会弹出3
    
//    "use strict";
    
    window.onload = function(){
    
        a = 3;
    
        alert(a);
    
    }

    开启(取消“use strict”注释)后，则会报错：

《你不知道的js》 ------1.作用域是什么ps:RHS（未声明就调用）引用时会直接报错。

5. 如果找到变量对变量的值进行不合理的操作，比如试图对一个非函数类型变量进行函数调用，则会报TypeError异常。

相关例子：

　　在网上搜罗了一些类似的例子，分享给大家，加深理解：

//输出为number和undefined

<script type="text/javascript">

var a = 1;

var a;

alert(typeof a);

(function () {

b = '-----';

var b;

})();

alert( typeof b);

</script>


//输出为undefined和string

<script type="text/javascript">

name="aaa";

function test(){

alert(typeof name);

var name="bbb";

alert(typeof name);

}

test();

</script>

//输出 1，undefined，2
x = 1;

alert(x);

var y = function() {

　　alert(x);

　　var x = 2;

　　alert(x);

}

y();
 

今天就写到这里啦，感觉看完第一章作用域的讲解真的是受益匪浅，希望对你也有一定的启发~。

　　

相关文章