Skip to content

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);

变量声明的合并

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)

提升到函数作用域顶部

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);
  }
})();

函数声明提升

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");
};