提升(Hoisting) 指的是在創造環境階段時就把變數準備好，這時值還沒被賦予到變數上
此類型的概念可以使用執行環境的「創造階段」與「執行階段」來理解
建立執行環境有分成兩階段
- 創造環境：先不賦予值，只將所有變數都先挑出來，賦予記憶體，所以變數在此階段都會是
undefined - 執行：將值賦予到變數上
console.log(ming); //undefined
var ming = "小明";
如果以執行環境兩階段的概念來說明：
//創造階段
var ming;
//執行階段
console.log(ming);
ming = "小明";
函式陳述式在創造階段就會優先載入
在創造階段函式陳述式優先載入
範例
callName();
function callName() {
console.log("呼叫小明");
}
以創造和執行階段來說明：
//創造階段
function callName() {
console.log("呼叫小明");
}
//執行階段
callName();
函式表達式
函式表達式則是和變數相同，一開始創造階段只有變數，到執行階段才會將函式（值）賦予到變數上
範例一：函式表達式
console.log(callName); //undefined
callName(); //error: callName() is not a function
var callName = function () {
console.log("呼叫小明");
};
以創造和執行階段來說明：
//創造階段
var callName;
//執行階段
console.log(callName);
callName();
callName = function () {
console.log("呼叫小明");
};
範例二：同時出現函式陳述式和函式表達式
function callName() {
console.log("呼叫小明1");
}
var callName = function () {
console.log("呼叫小明2");
};
callName(); //呼叫小明2
以創造和執行階段來說明：
//創造
function callName() {
console.log("呼叫小明1");
}
var callName;
//執行
callName = function () {
console.log("呼叫小明2");
};
callName();
範例三：同時出現函式陳述式和函式表達式
var callName = function () {
console.log("呼叫小明2");
};
function callName() {
console.log("呼叫小明1");
}
callName(); //呼叫小明2
以創造和執行階段來說明：
//創造
//函式優先：函式陳述式在創造階段會優先載入
function callName() {
console.log("呼叫小明1");
}
var callName;
//執行
callName = function () {
console.log("呼叫小明2");
};
callName();
提升 Hoisting 練習題
第一題
callName();
function callName() {
console.log(Ming); //undefined
}
var Ming = "小明";
以創造和執行階段來說明：
//創造
function callName() {
console.log(Ming);
}
var Ming;
//執行
callName();
Ming = "小明";
第二題
function callName() {
console.log("小明");
}
callName(); //杰倫
function callName() {
console.log("杰倫");
}
callName(); //杰倫
以創造和執行階段來說明：
//創造
function callName() {
console.log(Ming);
}
function callName() {
console.log("杰倫");
}
//執行
callName();
callName();
第三題
whosName();
function whoName() {
if (name) {
name = "杰倫";
}
}
var name = "小明";
console.log(name);
用創造和執行階段來詮釋：
- 在創造階段就會載入函式陳述式和變數宣告
- 之後執行函式，並將 "小明" 賦予到 name 變數上，最終 console.log 印出來是小明
//創造階段
function whoName() {
if (name) {
name = "杰倫";
}
}
var name;
//執行階段
whosName();
name = "小明";
console.log(name);
總結
- 在創造階段只有宣告變數，還沒賦予值，要等到執行後，才會將值賦予到變數上，在還沒執行以前，如果呼叫變數，就會得到 undefined
- 函式陳述式會在創造階段就優先載入；函式表達式則是在創造階段宣告變數，執行階段才賦予到變數上
