Day06-Scope && Hoisting

前言

在程序语言中了解程序的周期是很重要的。

在昨日我们已经先了解variables的一些规则了,其中就有包含Scope的概念,让我们来好好了解吧!!!

Scope Chain

• 可以由内层读取外层
• 而外层不能读取内层
• function scope
• global scope

function scope(){
  var a = 1
  console.log(a); //1
}
scope()
console.log(a)//ReferenceError: a is not defined

以上的程序码中是正常的现象,相信大家经过昨日的变数区块有稍微了解。
但以下的呢?

var a = 3
function scope(){
  console.log(a); 
}
scope()
console.log(a)

你能猜到吗?

其实结果会输出2个3

var a = 3
function scope(){
  console.log(a); //3
}
scope()
console.log(a)// 3

上面的tips中「可以由内层读取外层」是很重要的观念!!!

由於scope function中没有定义a的变数,所以会一层一层往外查找,直到连global scope都没有才会跑出reference error。

下面code就可以很清楚的了解function scope

var a = 3
function scope(){
  var a = 10
  function inner(){
    console.log(a) //10
  }
  inner()
}
scope()
console.log(a)// 3

由於inner funtion被呼叫执行console.log(a),但inner中没有定义a的变数,所以往外查找,而看到scope中有定义a,於是很放心的就reference。

Hoisting

昨天的variables我们很明确的解释了以下

• var为宽松的变数宣告
• 而let、const是严谨的并且为block scope

ok,你说那为什麽JavaScript要有这麽麻烦的现象???

function sayHi(para) {
  console.log(`Hello I'm ${para}`)
}

sayHi('Ian') //Hello I'm Ian

如果function都要由上而下从头写到尾,不能有任何差错,并且都先宣告再使用其实对於开发是一件非常恼人的事情!!!

sayHi('Ian') //Hello I'm Ian

function sayHi(para) {
  console.log(`Hello I'm ${para}`)
}

最後总结一下

• 使用let、const开发
• var、let、const 、function都有hoisting,各自有各自的提升现象
• 内层可以读取外层变数,但外层不能存取内层
• 後面我们都会使用let、const宣告

今天讲得比较少,主要是小弟重感冒,等之後觉得需要补充,会再更新的