【Web】JavaScript（No.53）作用域&解析域-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43251850/article/details/99323037

作用域

作用域：变量可以起作用的范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域</title>
</head>
<body>
<script>
    /*
    * 作用域：使用的范围
    * 全局变量：声明的变量都用var，可以在页面的任何位置使用
    * 缺点：如果页面不关闭，不会释放，占用空间、消耗内存
    * 局部变量：在函数内部定义的变量，函数外部不能使用
    * 全局作用域：全局变量的使用范围
    * 局部作用域：局部变量的使用范围
    * 块级作用域：一对大括号可以看成是一块，在这个区域中定义的变量只能在这个区域中使用
    * 但是，目前js中没有块级元素作用域
    * 隐式全局变量：声明的变量，没有var
    * 区别：
    *      全局变量：
    *      隐式全局变量：
    * */
</script>
</body>
</html>

全局变量和局部变量

全局变量

在任何地方都可以访问到的变量就是全局变量，对应全局作用域
局部变量

只在固定的代码片段内可访问到的变量，最常见的例如函数内部。对应局部作用域(函数作用域)

不使用var声明的变量是全局变量，不推荐使用。
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

块级作用域

任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。
在es5之前没有块级作用域的的概念,只有函数作用域，现阶段可以认为JavaScript没有块级作用域

词法作用域

变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。

在 js 中词法作用域规则:

函数允许访问函数外的数据.
整个代码结构中只有函数可以限定作用域.
作用域规则首先使用提升规则分析
如果当前作用规则中有名字了, 就不考虑外面的名字

var num = 123;
function foo() {
  console.log( num );
}
foo();

if ( false ) {
    var num = 123;
}
console.log( num ); // undefiend

作用域链

只有函数可以制造作用域结构， 那么只要是代码，就至少有一个作用域, 即全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。

将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

// 案例1：
function f1() {
    function f2() {
    }
}

var num = 456;
function f3() {
    function f4() {    
    }
}

[外链图片转存失败(img-yIUL2S5D-1565601912619)(media/06-1.png)]

// 案例2
function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

[外链图片转存失败(img-8XC4Y4S2-1565601912622)(media/06-2.png)]

预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程

预解析过程：

把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
先提升var，在提升function

JavaScript的执行过程

var a = 25;
function abc (){
  alert(a);//undefined
  var a = 10;
}
abc();
// 如果变量和函数同名的话，函数优先
console.log(a);
function a() {
  console.log('aaaaa');
}
var a = 1;
console.log(a);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预解析</title>
</head>
<body>
<script>
    /*
    * 预解析：提前解析代码
    * 解析代码之前，预解析做了哪些事情？
    * 1、把变量的声明提前了  --  提前到当前所在的作用域上面
    * 2、把函数的声明也提前了  --  提前到当前所在的作用域上面
    *
    * 预解析会分段：多对script标签中函数名重名，预解析不会冲突
    * */

    // //var num = 10;
    // //var num;
    // console.log(num);
    // var num = 10;//变量的初始化，即声明又赋值

    // f1();//报错
    // //函数的表达式
    // var f1 = function (){
    //     console.log("哈哈哈");
    // }

    // f2();
    // //函数的声明被提前了
    // function f2(){
    //     console.log("哈哈哈");
    // }

    // var num = 10;
    // function f1(){
    //     //相当于在这个位置声明：var num;
    //     console.log(num);
    //     var num = 100;
    // }
    // f1();

   //  var num;
   //  console.log(num);//undefined
   //  num = 100;
   //  function f2(){
   //      console.log(num);//100
   //  }
   // f2();

    // //优先使用函数的声明
    // console.log(a);//函数体
    // function a(){
    //     console.log('aaaaa');//无输出
    // }
    // var a = 1;
    // a();//名字被覆盖，此时a是变量，不是函数，直接报错
    // console.log(a);//1
</script>
</body>
</html>

全局解析规则

函数内部解析规则

变量提升

变量提升

定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。
函数提升

JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

// 1、-----------------------------------
var num = 10;
fun();
function fun() {
  console.log(num);
  var num = 20;
}
//2、-----------------------------------
var a = 18;
f1();
function f1() {
  var b = 9;
  console.log(a);
  console.log(b);
  var a = '123';
}
// 3、-----------------------------------
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
  var a = b = c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}