JS 學習筆記 #1 - 提升 Hoisting

提升(Hoisting) 指的是在創造環境階段時就把變數準備好，這時值還沒被賦予到變數上

此類型的概念可以使用執行環境的「創造階段」與「執行階段」來理解

建立執行環境有分成兩階段​

1. 創造環境：先不賦予值，只將所有變數都先挑出來，賦予記憶體，所以變數在此階段都會是 undefined
2. 執行：將值賦予到變數上

範例​

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

用創造和執行階段來詮釋：

1. 在創造階段就會載入函式陳述式和變數宣告
2. 之後執行函式，並將 "小明" 賦予到 name 變數上，最終 console.log 印出來是小明

//創造階段
function whoName() {
  if (name) {
    name = "杰倫";
  }
}
var name;

//執行階段
whosName();
name = "小明";
console.log(name);

總結

• 在創造階段只有宣告變數，還沒賦予值，要等到執行後，才會將值賦予到變數上，在還沒執行以前，如果呼叫變數，就會得到 undefined
• 函式陳述式會在創造階段就優先載入；函式表達式則是在創造階段宣告變數，執行階段才賦予到變數上