学习JS的心路历程-范围Scope和提升(Hoisting)

在上一篇提到了JS有三种声明变量的方式，分别是var、const及let，var和const let最大区别就是范围（scope）的限制。所以在这一篇我们会详谈何谓范围链及他们的复写优先级。

范围Scope

我们先来看一个例子：

var globalVar = 'global'；

function scopeFun（）{

globalVar =“change in scopeFun”；

console.log（“1.”，globalVar）；//1.change in scopeFun

var funVar = 'Im in fun'；

console.log（“2.”，funVar）；//2.Im in fun

}

scopeFun（）；

console.log（“3.”，globalVar）；//3.change in scopeFun

console.log（“4.”，funVar）；//funVar is not defined

在function中所声明的var在全局是没办法作呼叫的，但是在全局声明的在function中却可以用。

这边我们可以确定两件事情：

var是函数级作用域（function-level scope）由function的{}所区隔。

变量会由内往外寻找直到全局，我们称这行为为范围链（Scope Chain）。

那我们再来看ES6新增的let及const的范围：

let globalLet = true；

function scopeFun（）{

if（globalLet）{

let localLet =“local let”；

const localConst =“local const”；

console.log（localLet，localConst）；

}

console.log（localLet，localConst）；

}

scopeFun（）；

由这个例子我们可以得知：

let及const的是内存块作用域（Blocak-level scope）由{}所区隔。

提升（Hoisting）

在讲解变量复写优先级前，我们还需要先了解什么是Hoisting:

在执行代码前，JS会把函式声明放进內存里面，可以在代码声明该函式之前使用它。

function myName（name）{

console.log（“my name is”+name）；

}

myName（“John”）；//my name is John

一般在撰写一个函式时候都会这样作，但我们前面有提到说可以在声明该函式之前使用它，所以我们也可以这样作：

myName（“John”）；//my name is John

function myName（name）{

console.log（“my name is”+name）；

}

当然提升也适用于变量，但是跟函式就有很大的区别了。

如果我们在声明前就先给初始化的话，是可以正常使用的：

price = 10；

price +=1；

console.log（price）；//11

var price = 20；

但是如果在声明后才初始化，则前面使用将会得到undefined:

console.log（price）；//undefined

var price = 20；

这段代码可以理解成这样：

var price；

console.log（price）；//undefined

var price = 20；

这边要注意的是，ES6提供的变量声明let及const是无法做到的，会回报错误：

console.log（price）；//ReferenceError: price is not defined

let price= 20；

那如果我们用变量声明函式的话，会发生什么事情呢：

console.log（price）；//undefined

price（20）；//TypeError: price is not a function

var price = function（amount）{

console.log（20*amount）；

}

可以看到只有变量被提升到最上面且是undefined，所以无法当成函式使用。

总结：

var是函数级作用域（function-level scope）由function的{}所区隔。

let及const的是内存块作用域（Blocak-level scope）由{}所区隔。

变量会由内往外寻找直到全局，我们称这行为为范围链（Scope Chain）。

可以在声明该函式之前使用它，这行为称为提升（Hoisting）。

变量var也有提升，但如果使用时没有初始化将会得到undefined。

用var声明函式无法在之前使用，因为var提升是undefined。

参考资料：

https://developer.mozilla.org/zh-TW/docs/Glossary/Hoisting

https://ithelp.ithome.com.tw/articles/10198485