在上一篇提到了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