[js] 72.变量提升

[qiilee]

答案：

变量提升

A、js 代码执行的过程

• 1 变量提升
• 2 代码从上到下依次执行

var 关键字和 function 关键字声明的变量会进行变量提升

B、变量提升发生的环境：发生在代码所处的当前作用域。

• 变量提升
• 1 var 关键字进行的变量提升，会把变量提前声明，但是不会提前赋值 。
• 2 function 关键字对变量进行变量提升，既会把变量提前声明，又会把变量提前赋值，也就是把整个函数体提升到代码的顶部
• 3 有一些代码是不会执行的但是仍旧会发生变量提升,规则适用于 1,2
• 3.1 return 之后的代码依旧会发生变量提升，规则适用于 1，2
• 3.2 代码报错之后的代码依旧会发生变量提升，规则适用于 1，2
• 3.3 break 之后的代码依旧会发生变量提升，规则适用于 1,2
• 4 有一些代码是不会执行但是仍旧会发生变量提升，但是规则要发生变化
• 4.1 if 判断语句 if 判断语句中 var 关键字以及 function 关键字声明的变量只会发生提前声明，不会发生提前赋值,也就是不会吧函数体整体提升到当前作用域顶部。规则跟 1,2 不适用
• 4.2 switch case 规则跟 1,2 不适用
• 4.3 do while 规则跟 1,2 不适用
• 4.4 try catch catch 中声明的变量只会发生提前声明，不会发生提前赋值。
• Ps:在条件判断语句和 try catch 中的声明的变量不管是否能够执行，都只会发生提前
• 声明，不会发生提前赋值。

解析：

// 如果一个变量声明了但是未赋值，那么输出这个变量就会输出 undefined
var num;
console.log(num);

// 如果一个变量没有声明也没有赋值，那么就会报一个错：
console.log(num); // 输出一个不存在的变量 Uncaught ReferenceError: num is not defined

// var 关键字进行的变量提升
console.log(num);
var num = 123;
console.log(num);
var num = 456;
console.log(num);

// 变量提升之后的代码：
var num;
console.log(num);
num = 123;
console.log(num);
num = 456;
console.log(num);

// function 关键字的变量提升
console.log(fn);
function fn() {
  console.log(1);
}

// 变量提升之后的代码：
function fn() {
  console.log(1);
}
console.log(fn); // 输出fn的函数体

// 3.1 return 之后的代码依旧会发生变量提升  规则适用于1，2
function fn() {
  console.log(num);
  return;
  var num = 123;
}
fn();

// 变量提升之后的代码：
function fn() {
  var num;
  console.log(num);
  return;
  num = 123;
}
fn(); // undefined

function fn() {
  console.log(fo);
  return;
  function fo() {}
}
fn();

// 变量提升之后的代码：
function fn() {
  function fo() {}
  console.log(fo);
  return;
}
fn(); //输出fo的函数体

//3.2 代码报错之后的代码依旧会进行变量提升，规则适用于1,2
console.log(num);
xsasfgdsfqdfsdf; //报一个错
var num = 123;
console.log(num);

// 变量提升之后的代码：
var num;
console.log(num); //输出 undefined
dsagdsqghdwfh; // 报一个错误 ，错误之后的代码不会被执行
num = 123;
console.log(num);

//function 关键字
console.log(fn);
sasgfdhwhsdqg;
function fn() {}
console.log(fn);

// 变量提升之后的代码：
function fn() {}
console.log(fn); // 输出 fn 的函数体
asdgsdgdfgfdg; // 报一个错误，报错之后的代码不会被执行
console.log(fn);

//4 代码不执行，但是会进行变量提升，不过规则不适用于1,2
//4.1 if判断语句
console.log(num);
if (false) {
	var num = 123;
}
console.log(num)

//  变量提升之后的代码：
var num;
console.log(num); //undefined
if (false) {
	num = 123;
}
console.log(num) //undefined

console.log(fn);
if (false) {
	function fn() {}
}
console.log(fn);

// 变量提升之后的代码：
var fn;
function fn;
console.log(fn) //undefined
if (false) {
	function fn() {}
}
console.log(fn) //undefined
/*function fn//Uncaught SyntaxError: Unexpected end of input*/

// try catch
try {
  console.log(num);
} catch (e) {
  var num = 123;
}
console.log(num);

var num;
try {
  console.log(num); // undefined
} catch (e) {
  num = 123;
}
console.log(num); // undefined

try {
  console.log(fn);
} catch (e) {
  function fn() {}
}
console.log(fn);

var fn;
try {
  console.log(fn); // undefined
} catch (e) {
  num = 123;
}
console.log(fn); // undefined