js的预解析(var 声明的变量和 function)

261 阅读2分钟

一 :预解析的定义 :

预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。 代码执行: 从上到下执行JS语句。 预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined,为什么在函数声明之前就可以调用函数。

二 预解析的分类:

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

三 预解析的案例

案例1:

// 案例1
var num = 10;
fun();
function fun() {
  console.log(num);
  var num = 20;
}
**************************
预解析后的结果 :
var num;
function fun() {
  var num;
  console.log(num);//按照作用域链的就近原则 结果为:undifined
  num = 20;
}
num = 10fun()

案例2:

// 案例2
var num = 10;
function fn(){
    console.log(num);
    var num = 20;
    console.log(num);
} 
fn();
*************************
预解析后的结果:
var num;
function fn(){
    var num;
    console.log(num);//undifined 
    num = 20;
    console.log(num);//20
} 
num = 10;
fn();

案例3:

// 案例3
var a = 18;
f1();
function f1() {
  var b = 9;
  console.log(a);
  console.log(b);
  var a = '123';
}
*************************
预解析后的结果:
var a;
function f1() {
  var b;
  var a;
  b = 9;
  console.log(a);//undifined
  console.log(b);//9
  a = '123';
}
a = 18
f1();

案例4:

// 案例4
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
//等同于 var a = 9;b= 9;c = 9 这时候 b和c是赋值但未声明的变量相当于全局变量
// 不要和集体声明混淆,var a = 9,b = 9,c = 9才是集体声明要用逗号隔开
  var a = b = c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}
*************************
预解析后的结果:
function f1() {
  var a;
  a = 9b = 9c = 9;
  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 不是全局变量; 错误语句: Uncaught ReferenceError: a is not defined