(Day2) 范围链与提升

范围链 (Scope Chain)

范围链在 JavaScript 一堆奇奇怪怪的观念中算是简单好懂的，简单来说就是：

『函示内没有对应的变数、常数或是函示时，他会往外层寻找』

这边一样用程序码来说明。

  function playGame(){
		const gaming = 'PS5'
    console.log(`我要用 ${gaming} 玩游戏`)
  }
  playGame() //我要用 PS5 玩游戏

上面这段 gaming 在函示内，因此能正确显示，这段好像废话，不过接下来我们试者把 gaming 移到外层全域看看结果如何：

const gaming = 'PS5'
  function playGame(){
    console.log(`我要用 ${gaming} 玩游戏`)
  }
  playGame() //我要用 PS5 玩游戏

结果是一样的，上面 playGame() 函式中因为本身没有 gaming 常数，因此他会到外层也是全域 (window) ，来获得 gaming 常数的资料。

接下来便是在函示内外都新增两个 gaming 来看看结果如何

const gaming = 'PS5'
  function playGame(){
	const gaming = 'Switch'
    console.log(`我要用 ${gaming} 玩游戏`)
  }
  playGame() //我要用 Switch 玩游戏

所以结果就是当函示内有相关资料时，变不会往外层寻找，而是直接使用函示内资料。

提升(Hoisting)

(因为 const、 let 提升的状况不一样，这边范例先改为使用 var ， const、 let 会到介绍他们的章节再来提及)

JavaScript 实际编译并执行程序码时，会分为两种阶段:

• 创造阶段
• 执行阶段

等创造阶段执行完毕，才会进入执行阶段，创造阶段有几个重点：

• 优先建立函示（执行环境） 但不运行，只是建立环境。
• 再来建立变数，但不会为变数赋值，只是建立一个空值 (undefined) 的变数。
• 用言语形容这个阶段的话就是一个先建立容器，因为这个创造阶段的特性，所以这个状况被称做 Hoisting (提升)。

而执行阶段的重点则是：

• 执行 呼叫函式 的 XX() 。
• 为变数赋予实际的值。

这边使用上面程序码，并稍微调一下顺序就可验证上面提到的创造阶段。

console.log(gaming) // undefined
var gaming = 'PS5'
playGame() //我要用 PS5 玩游戏
  function playGame(){
    console.log(`我要用 ${gaming} 玩游戏`)
  }

console.log(gaming) 这段会因为变数被提升，但尚未赋值因此是 cosnole 会回传 undefined

playGame() 则是 function playGame() 函示会因为提升效果，而先比被呼叫函示的 playGame() 建立，因此 console 可以正确显示。

因为提升这个 特性 会让上面的程序码，在编译顺序变为:

// 创造阶段
//函示优先提升
function playGame(){
  console.log(`我要用 ${gaming} 玩游戏`)
}
var gaming 

// 执行阶段
console.log(gaming) // undefined
gaming = 'PS5'
playGame() //我要用 PS5 玩游戏

最後要说的是，Hoisting 只是概念，只是帮助我们理解，程序码在编译时会这麽做，但他仍只是一种概念， 这点 MDN 文件也有说明到：

提升（Hoisting）是在 ECMAScript® 2015 Language Specification 里面找不到的专有名词。它是一种厘清 JaveScript 在执行阶段内文如何运行的思路（尤其是在创建和执行阶段）。

参考文献

• JavaScript 核心篇 (六角学院）
• JavaScript 核心观念(6)-执行环境与作用域-提升
• MDN 文件(提升)