JS中的作用域、作用域链、预解析

一、作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

JavaScript（es6前）中的作用域有两种：

• 全局作用域
• 局部作用域（函数作用域）

1.1 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

1.2 局部作用域

作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。

1.3 Js中没有块级作用域（在ES6之前）

在es6中有块级作用域，因为多了两个声明变量的关键字
const let

var	let	const
函数级作用域、全局作用域	块级作用域	块级作用域
变量可以提升	不存在变量提升	不存在变量提升
可不赋初值，可修改，可重复定义后面的会覆盖前面的值	可不赋初值，可修改，不可重复定义	必须赋初值，不可修改，不可重复定义

二、变量作用域

在JavaScript中，根据作用域的不同，变量可以分为两种：

• 全局变量
• 局部变量

2.1 全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

• 全局变量在代码的任何位置都可以使用
• 在全局作用域下 var 声明的变量 是全局变量
• 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

2.2 局部变量（函数中的声明的变量）

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

• 局部变量只能在该函数内部使用
• 在函数内部 var 声明的变量是局部变量
• 函数的形参实际上就是局部变量

			num=10;
        function a(){
          var num1 = 10;
           }
          a();
      alert(num1);//报错 num1 undefined

       num=10;
        function a(){
          num1 = 10;
        }
        a();
      alert(num1); //10  函数中不声明的变量为全局

2.3 全局变量和局部变量的区别

• 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
• 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

三、传递方式

3.1 传值传递

函数参数如果是原始类型的值（数值、字符串、布尔值）
传递方式是传值传递（passes by value）。这意味着，在函数体内修改参数值，不会影响到函数外部。

var p = 2;
function f(p) {
  p = 3;
}
f(p);

p // 2

上面代码中，变量p是一个原始类型的值，传入函数f的方式是传值传递。因此，在函数内部，p的值是原始值的拷贝，无论怎么修改，都不会影响到原始值。

3.2 传址传递

但是，如果函数参数是复合类型的值（数组、对象、其他函数），传递方式是传址传递（pass by reference）。也就是说，传入函数的原始值的地址，因此在函数内部修改参数，将会影响到原始值。

var obj = { p: 1 };
function f(o) {
  o.p = 2;
}
f(obj);

obj.p // 2

上面代码中，传入函数f的是参数对象obj的地址。因此，在函数内部修改obj的属性p，会影响到原始值。

注意，如果函数内部修改的，不是参数对象的某个属性，而是替换掉整个参数，这时不会影响到原始值。

var obj = [1, 2, 3];
function f(o) {
  o = [2, 3, 4];//等号操作，开了一个新的位置
 
}
  f(obj);

obj // [1, 2, 3]

上面代码中，在函数f内部，参数对象obj被整个替换成另一个值。这时不会影响到原始值。这是因为，形式参数（o）的值实际是参数obj的地址，重新对o赋值导致o指向另一个地址，保存在原地址上的值当然不受影响。

四、作用域链

只要是代码都一个作用域中，写在函数内部的局部作用域，未写在任何函数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据在[内部函数可以访问外部函数变量]的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

			function f1() {
                   var num = 123;
                   function f2() {
                   console.log( num );//打印值为 123
                  }
               f2();
            }
            var num = 456;
            f1(); 

作用域链：采取就近原则的方式来查找变量最终的值。就是从当前位置向上查找元素，最近出现的那个值就是元素的值了。

  var a = 1;
      function fn1() {
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
        var a = 3;
        fn3();
        function fn3() {
            var a = 4;
            console.log(a); //4
            alert(b); //22
        }
    }
}
fn1();

五、预解析

5.1预解析的相关概念

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

• 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。也叫做变量、函数提升。

• 代码执行： 从上到下执行JS语句。

预解析会把变量和函数的声明在代码执行之前执行完成。
变量预解析

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

变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

5.3 函数预解析（函数提升）

函数的声明会被提升到当前作用域的最上面，但是不会调用函数

变量提升与函数提升是从上向下解析到谁，就提升谁，函数提升优先级高，优先提升，函数是js中的“一等公民”

 console.log(fn);//fn(){console.log('hello world!');}
    var fn =3;
    console.log(fn);//3
    function fn(){
        console.log('hello world');  
    }

六、预解析例题

		 console.log(num); //undefined;
     	 var num = 10;
        //等价于(变量提升)  声明被提升，赋值没有被提升
        //内部解析如下
        var num;
        console.log(num);//undefined;
         num=10;

 //  匿名函数  报错  fn is  not a  function
           fn();
           var fn = function(){
             alert("hello world!");
          }
        //  因为变量提升 
            // 等价于
             var fn;
             fn();
             fn = function(){
              alert("hello world!");
             }

匿名函数,函数调用要在在函数声明的后面

//  命名函数，函数调用可以被放在任何地方
        //  因为函数提升
         function fn(){
           console.log(11);
         }
          fn();
----------------------------------------
          fn();
         function fn(){
            console.log(11);
          }
        // 等价于
       //  function fn(){
       //  console.log(11);
        // }
         //fn();
        // 所以虽然你写在上面，实际上还是在下面

命名函数，函数调用可以被放在任何地方

	var num = 10;
     fun();
     function fun(){
           console.log(num); //undefined
          var num = 20;
           console.log(num);//20
      }
    //等价于
    // function fun(){
    //     var num; 
    //     // 提升到当前作用域
    //     console.log(num);
    //     num = 20;
    //     console.log(num)
    // }
    // var num;
    // num = 10;
    // fun();

 		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);
    }
   // 等价于
    function f1() {
       	 var a = b = c = 9;
        // 集体声明的写法应该为 var a=9,b=9,c=9,这样写三个才都是函数里的局部变量   		  																																														  							         
        // 这里的写法等价于 var a=9; b = 9; c = 9; 
        // var a;
        //a = 9;  
        // a用var声明，为局部变量 b,c没有var声明，为全局变量

        console.log(a);//9
        console.log(b);//9
        console.log(c);//9
    }
    f1();
    console.log(c);//9
    console.log(b);//9
    console.log(a);//报错 a is not defined

写的不好的地方，还请大佬批评指正