Clark Cui

Appearance

js变量提升

🕒 Published at:

https://juejin.im/post/6844903607066689550

这篇文章讲的还可以，但是有一点讲错了，我在这里补充一下，再加几个常见的面试题。

要点 ​

  • 变量声明 var 和函数声明 function 都会有声明的提升，提升到函数作用域或者全局作用域的顶端，后面提升的排在之前提升的后面，重复的会覆盖之前的声明。
  • 先提升变量，相同的变量合并，赋值 undefined，再提升函数。

举几个例子 ​

变量声明与函数声明的提升顺序 ​

javascript
console.log(a); //Function
function a() {
  return 4;
}
var a = 3;
console.log(a); //3

//相当于
var a = undefined; //先提升变量，变量全部提升完后，再提升函数
function a() {
  return 4;
}
console.log(a);
a = 3;
console.log(a);
console.log(a); //Function
function a() {
  return 4;
}
var a = 3;
console.log(a); //3

//相当于
var a = undefined; //先提升变量，变量全部提升完后，再提升函数
function a() {
  return 4;
}
console.log(a);
a = 3;
console.log(a);

变量声明的合并 ​

javascript
console.log(a)      //Function
var a=3;
function a(){
    return 4
}
var a=4;
console.log(a)      //4

//相当于
var a =undefined；   //变量声明合并
function a(){
    return 4
}
console.log(a)
a=3;
a=4;
console.log(a)
console.log(a)      //Function
var a=3;
function a(){
    return 4
}
var a=4;
console.log(a)      //4

//相当于
var a =undefined；   //变量声明合并
function a(){
    return 4
}
console.log(a)
a=3;
a=4;
console.log(a)

提升到函数作用域顶部 ​

javascript
var a = 4;
(function () {
  if (typeof a == undefined) {
    var a = 5;
    console.log(a); //5
  } else {
    console.log(a);
  }
})();

//相当于
var a = undefined;
a = 4;
(function () {
  var a = undefined; //提升变量到函数作用域顶端，并覆盖之前的声明
  if (typeof a == undefined) {
    a = 5;
    console.log(a);
  } else {
    console.log(a);
  }
})();
var a = 4;
(function () {
  if (typeof a == undefined) {
    var a = 5;
    console.log(a); //5
  } else {
    console.log(a);
  }
})();

//相当于
var a = undefined;
a = 4;
(function () {
  var a = undefined; //提升变量到函数作用域顶端，并覆盖之前的声明
  if (typeof a == undefined) {
    a = 5;
    console.log(a);
  } else {
    console.log(a);
  }
})();

函数声明提升 ​

javascript
foo(); //'foo'
bar(); //TypeError bar is not a function

function foo() {
  console.log("foo");
}

var bar = function () {
  console.log("bar");
};

//相当于
var bar = undefined; //先提升变量
function foo() {
  //提升函数声明
  console.log("foo");
}
foo();
bar();
bar = function () {
  console.log("bar");
};
foo(); //'foo'
bar(); //TypeError bar is not a function

function foo() {
  console.log("foo");
}

var bar = function () {
  console.log("bar");
};

//相当于
var bar = undefined; //先提升变量
function foo() {
  //提升函数声明
  console.log("foo");
}
foo();
bar();
bar = function () {
  console.log("bar");
};