[Day7] 提升

何谓提升(Hoisting)？

提升(Hoisting) 其实主要是为了厘清 JavaScript 的运作所提出的观念，在 ECMAScript 并未提出这个专有名词，而所谓的提升，就是先将函式与变数宣告先提到程序码最上面的动作，再接着执行程序码

执行环境的阶段

JavaScript 会在执行环境中运行程序码，而在建立一个执行环境时可以分为两个阶段：

• 创造阶段
  • 先将所有函式载入，且已可以运行
  • 再取出程序码中的变数宣告，并在记忆体上预留变数空间，此时不会赋予变数值，系统会先给予一个初始值 undefined
• 执行阶段
  • 依序执行程序码，此时可赋予变数值

在创造环境阶段优先把函式与变数的记忆体空间准备好，就叫做 提升 Hositing

变数的提升

同上面所述，在创造阶段时，会将程序码中所有变数宣告提到最前面，并在记忆体中预留空间给变数後，系统会先给予一个 undefined 的初始值，等到了执行阶段，会依序执行剩下的程序码，这时候才会赋予变数值，范例如下：

范例1：

var nickName = 'Carol';
console.log(nickName); // Carol

运行过程:

// 1. 创造阶段

// 先宣告变数 nickName，在记忆体中预留空间，预设值为 undefined
var nickName;

// 2. 执行阶段

// 赋予变数 nickName 值
nickName = 'Carol';

// 显示变数 nickName 值
console.log(nickName); // Carol

范例2：

console.log(nickName);
var nickName = 'Carol';

运行过程:

// 1. 创造阶段

// 先宣告变数 nickName，在记忆体中预留空间，预设值为 undefined
var nickName;

// 2. 执行阶段

// 显示变数 nickName 值
console.log(nickName); // undefined

// 赋予变数 nickName 值
nickName = 'Carol';

范例3：

因为系统找不到 变数 nickName，所以显示错误讯息 Uncaught ReferenceError: nickName is not defined

console.log(nickName);
// Uncaught ReferenceError: nickName is not defined

undefined 与 is not defined 差异可在 [Day6] 'undefined' vs 'not defined' 查看更多内容

参考文献

六角学院 - JavaScript 核心篇

MDN - 提升（Hoisting）