作用域是什么

相关定义

  • 引擎:从头到尾负责整个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”注释)后,则会报错:

          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();
 
复制代码

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

原文地址:https://www.cnblogs.com/chenliyang/p/6547120.html