作用域和预解析

1.4 作用域和预解析

1.4.1 作用域

作用域：变量或函数的有效使用范围（全局作用和局部作用域）

• 全局变量/函数

  全局变量/函数： 在函数外声明的变量/函数，叫全局变量/函数，可以在当前页面内任意地方使用和修改，会一直存储在内存，知道页面关闭

   //全局变量
  var x = 10;
  console.log(x); //10;
  
  x = 30;
  console.log(x); //30
  
  
  function fun(){
      console.log(x);//30
      x = 100;
  }
  fun();
  console.log(x); //100
  

• 局部变量/函数

  在函数内声明的变量/函数，叫局部变量/函数，只能在函数内部使用，出了函数的{}就销毁了

   //局部变量
  function fun2(m){//var m;
      var y = 1;
      console.log(y);
  }
  fun2(10);
  //console.log(y);// y is not defined  没有声明变量y
  //console.log(m);
  

• 作用域链：

  js中的一种查找机制，先查找自己作用域范围内是否存在，有就使用自己的，没有就往上一级作用域查找，依次往上查找，一直找到全局，全局没有报错，is not defined

  var n = 10;
  function fun3(){
      var n = 40;
      function inner(){
          // var n = 100;
          console.log(n);
      }
      inner();
  }
  fun3();
  

1.4.2预解析

浏览器在解析js的过程中，至少有两步，预解析，逐行执行

• 预解析：找一些东西，找var function，把var 和function的声明提到最前面， 所有作用域代码在执行之前都会进行预解析

  • 找var：提前声明一下变量，存储在内存中，如果变量同名声明一次
  • function:提前声明函数，存储在内存中，如果同名会多次声明

• 逐行执行：声明已经提到了最前面，逐行执行的时候将不会再声明

  //找var
  console.log(a);//undefined
  var a = 10;
  console.log(a);//10
  var a = 20;
  console.log(a);//20
  

  //找function
  console.log(sum); //函数2
  function sum(){
      console.log("函数1");
  }
  console.log(sum); //函数2
  function sum(){
      console.log("函数2");
  }
  console.log(sum);//函数2
  

• 普通函数声明方式和表达式声明方式的区别？

- add(); //和
function add(){
    console.log("和");
}

// addd();  预解析的时候，变量只声明，不赋值，undefined
var addd = function(){
    console.log("addd");
}

笔试题

 console.log(c);//函数2 
var c = 10;
function c(){
    console.log("函数1");
}
console.log(c);   //10 
var c = 20;
function c(){
    console.log("函数2");
}
console.log(c); //20
//c(); //c is not a function


//局部作用域预解析
function sum(){
    console.log(a);//undefined
    var a = 10;
}
sum();

var x = 10;
function fun1(){
    console.log(x); //undefined
    var x = 20;
}
fun1();

function fun2(a){//var a,函数执行的第一步，就是给参数赋值  a =100
    console.log(a);//100
    var a = 20;
    console.log(a);//20
}
fun2(100);