js變量提升總結

JavaScript 中，函數及變量的聲明都将被提升到函數的最頂部。

JavaScript 中，變量可以在使用後聲明，也就是變量可以先使用再聲明。

例1

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();           

在自運作函數内，存在

var name = 'jack'

，是以name會提升到目前作用域最前邊，是以 name為undefined。當程式運作到變量的時候，會先在目前作用域内查找該變量，如果找不到，則會向父級作用域查找，如果還是找不到，就會報錯

例2

var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2;
相當于：
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y           

例3

(function(){
    a = 4;
    console.log(a);
    console.log(window.a);
    var a = 3;
    console.log(a);
})()
輸出
4
undefined
3           

變量提升到目前作用域，window作用域内沒有定義a，是以undefined

例4 變量與函數提升

console.log(foo);
function foo(){};
var foo = '12';
console.log(foo);

輸出 ƒ foo(){} 和 12；

console.log(foo);
var foo = function(){};
var foo = '12';
輸出 undefined           

原來函數提升分為兩種情況：

一種：函數申明。就是上面A，function foo(){}這種形式

另一種：函數表達式。就是上面B，var foo=function(){}這種形式

第二種形式其實就是var變量的聲明定義，是以上面的B輸出結果為undefined應該就能了解了。

而第一種函數申明的形式，在提升的時候，會被整個提升上去，包括函數定義的部分

例5

var sayHello;
console.log(typeof (sayHey));//=>function    
  console.log(typeof (sayHo));//=>undefined
  if (true) {
      function sayHey() {
          console.log("sayHey");
      }
      sayHello = function sayHo() {
          console.log("sayHello");
  }
  } else {
      function sayHey() {
          console.log("sayHey2");
      }
      sayHello = function sayHo() {
          console.log("sayHello2");
      }
  }    
  sayHey();// => sayHey2    
  sayHello();// => sayHello           

函數聲明整體提升，js解析從上到下，提升

sayHey

,接着提升下面的

sayHey

，把第一個覆寫了，是以執行sayHey()輸出sayHey2

函數表達式不會整體提升，是以輸出sayHello

例6

function aa(a,b,c) {
    console.log(a);
    console.log(aa);
    console.log(arguments);
    var a = function(){
        console.log(12);
    };
    var aa = '444';
    arguments = 6;
    console.log(a);
    console.log(aa);
    console.log(arguments);
    function a(){};
}
aa(1,2,3);

VM2311:3 ƒ a(){}
VM2311:4 undefined
VM2311:5 Arguments(3) [ƒ, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
VM2311:11 ƒ (){
        console.log(12);
    }
VM2311:12 444
VM2311:13 6
undefined


var num1 = 1;
function   fn(num3){
    var num4;
    console.log(num1);    //output    undefined
    console.log(num3);    //output  4
    console.log(num4);    //throw error  “num4 is not defined”
    console.log(num2);    //throw error  “num2 is not defined”
    var num1 = num4 = 2;
    num2 = 3;
    var num3= 5;
}
fn(4);           

例7

window.val = 1;
var obj = {
    val: 2,
    dbl: function () {
        this.val *= 2;
        val *= 2;
        console.log(val);
        console.log(this.val);
    }
};
// 說出下面的輸出結果
obj.dbl();
var func = obj.dbl;
func();

2\4\8\8