JavaScript 提升(Hoisting)概念

☛ 提升概念 hoisting

在執行環境時，會先創造環境再執行。

Var 會區域性自動於網頁載入後提升
function函式陳述式會自動於網頁載入後提升

先看看下面的範例:

console.log(a) //undefined
var a = 1;

結果會出現undefined。
在執行環境時，會先創造環境再執行。
創造環境是指將整個程式碼所有的變數挑出來。(上面的範例的執行步驟)

var a; //創造環境
console.log(a); //再執行 undefined
a=1;

Var - Hositing

練習題:

var name = 'world';
function (){
    if(typeof name === 'undefined'){
        var name = 'Jack';  
        console.log('Goodbye'+name)
    }else{
        console.log('Hi'+name)
    }
}
(); //執行function

解析 var 會區域性自動進行提升

var name = 'world';
function (){
    var name; //undefined (var 會區域性自動進行提升)
    if(typeof name === 'undefined'){
        name = 'Jack';  
        console.log('Goodbye'+name)
    }else{
        console.log('Hi'+name)
    }
}
(); //執行function

Function 函式陳述式- Hositing

練習題:

greet1();
greet2();

function greet1(){
    console.log('Hi')
} // 函式陳述式
var greet2 = function(){
    console.log('Bye')
} // 函式表達式

解析

//創造階段
//function 函式陳述式已優先載入
function greet1(){
    console.log('Hi')
}

var greet2; //Var 會自動提升，但函式表達式會在執行時才將function賦予到這個變數上!
//執行
greet1(); //Hi
greet2(); //undefined

greet2 = function(){
    console.log('Bye')
}

提升步驟

練習題一

function callName(){
    console.log('call one');
}
var callName = function(){
    console.log('call two');
}
callName(); // call two

練習題二

var callName = function(){
    console.log('call two');
}
function callName(){
    console.log('call one');
}
callName(); // call two

為什麼改變了順序結果都是一樣呢?
來看一下執行環境的步驟:
創造階段

首先function函式陳述式優先載入提升
再來是Var變數

執行階段

var 變數 = 賦與值

執行

//創造階段
function callName(){
 console.log('call one');
} //函式陳述式優先載入提升
var callName; // Var 提升，在執行階段時，callName被後面的函示覆蓋
//執行階段
callName = function(){
 console.log('call two');
}
callName();

如果將callName();往前移，結果會不同。

//創造階段
function callName(){
 console.log('call one');
} //函式陳述式優先載入提升
var callName; // 變數重複宣告沒有用。
//執行階段
callName();
callName = function(){
 console.log('call two');
}
// call one

練習題目

題(一)

callName();
function callName(){
    console.log(person);
}
var person = 'John';

解析

//創造階段
function callName(){
    console.log(person);
};
var person;
//執行階段
callName();
person = 'John';
// undefined

題(二)

function callName(){
    console.log('Jack');
}
callName();
function callName(){
    console.log('Peter');
}
callName();

解析

//創造階段
function callName(){
    console.log('Jack');
}
function callName(){
    console.log('Peter');
}
//執行階段
callName(); //Peter
callName(); //Peter

題(三)

whosName();
function whosName(){
    if(name){
        name = 'Abby';
    }
}
var name = 'Kate';
console.log(name);

解析

function whosName(){
    if(name){
        name = 'Abby';
    }
} //步驟2-這裡name是undefined，所以沒執行
var name;

whosName(); //步驟1-首先執行whosName
name = 'Kate'; //步驟3-賦予變數值
console.log(name); // Kate

題(四)

fn()
function fn(params){
    if(!a){ //若a不存在
        a=2;
    }    
}
var a = 1;
console.log(a);

解析

//創造
function fn(params){
    if(!a){ //若a不存在
        a=2;
    }    
}
var a;
//執行
fn(); //雖然執行時，因為a是undefined，而被賦予 a=2
a = 1; //但這行蓋過了舊的賦予
console.log(a); //1