学习JS的心路历程-范围Scope和提升(Hoisting)
Posted lannyQ_Q
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习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
以上是关于学习JS的心路历程-范围Scope和提升(Hoisting)的主要内容，如果未能解决你的问题，请参考以下文章