JS中预解析案例分析

案例一:

1 var a = 25;
2 function abc () {
3     alert(a);//undefined
4     var a = 10;
5 }
6 abc();
7 console.log(a);//25

结果是:undefined  10,代码实际逻辑如下:

1 var a;//声明变量
2 a = 25;//赋值
3 function abc () {
4     var a;//声明变量
5     alert(a);//a只是声明了,但没有赋值,所以是undefined
6     a = 10;//赋值
7 }
8 abc();
9 console.log(a);//25

案例二:

console.log(a);
function a() {
  console.log('aaaaa');
}
var a = 1;
console.log(a);

结果:

ƒ a() {
      console.log('aaaaa');
    }
1

代码实际逻辑如下:

var a;
function a() {
  console.log('aaaaa');
}
console.log(a);//这里的a是函数名的a,所以输出就是函数代码
a = 1;
console.log(a);//1

案例三:

var a = 18;
f1();
function f1() {
  var b = 9;
  console.log(a);
  console.log(b);
  var a = '123';
}

结果:undefined9,代码实际逻辑如下:

var a;
a = 18;
function f1() {
  var b;
  var a;
  b = 9;
  console.log(a);//a只有声明,没有赋值,所以是undefined
  console.log(b);//9
  a = '123';
}
f1();

案例四:

f1();
console.log(c); //9
console.log(b); //9
console.log(a); //报错
function f1() {
  var a = b = c = 9;
  console.log(a); //9
  console.log(b); //9
  console.log(c); //9
}

结果是:

 代码实际逻辑如下:

function f1() {
  var a;
  a=9;//局部变量,用var声明了
  b=9;//隐式全局变量,没有用var声明
  c=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); //报错

案例五:

f1();
var f1 = function () {
  console.log(a);
  var a = 10;
}

结果会报错,代码实际逻辑如下:

var f1;//声明变量
f1();//f1是一个变量,并不是函数,所以会报错 f1 is not a function
f1 = function () {
  console.log(a);//这里不会执行
  var a = 10;
}

 案例六:

var num1 = 55;
var num2 = 66;

function f1(num, num1) {
  num = 100;
  num1 = 100;
  num2 = 100;//num2并不是函数内部的变量
  console.log(num);//100  
  console.log(num1);//100
  console.log(num2);//100
}
f1(num1, num2);
console.log(num1);//55
console.log(num2);//100
console.log(num);//报错

结果是:100  100  100  55  100  报错

实际代码逻辑如下:

var num1 = 55;
var num2 = 66;
num2 = 100;
function f1(num, num1) {
  num = 100;//局部变量,这里的num是函数体内的局部变量
  num1 = 100;//局部变量
  console.log(num);
  console.log(num1);
  console.log(num2);
}
f1(num1, num2);
console.log(num1);
console.log(num2);
console.log(num);//并没有num的全局变量
原文地址:https://www.cnblogs.com/muzidaitou/p/12455671.html