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