深入學習es6作用域

最近重新學習了es6的知識。根據影片和一些資料做出自己理解中的一些筆記，希望能幫到大家。

作用域？

幾乎所有的程式語言的最基礎模型之一就是在變數中儲存值，並且取出修改這些的值的能力，事實上，在變數中儲存值和取出值的能力，給程序賦予了狀態。如果沒有這樣的概念，一個程式雖然可以執行一些任務，但是它們將會受到極大的限製而且不會非常有趣。但是這些變數該儲存在哪，又給如何讀取呢？為了完成這個目標，需要製定一些規則，這個規則就是：作用域;

【相關課程推薦：JavaScript影片教學】

作用域主要有哪幾種？

作用域主要分为全局作用域、函数作用域、动态作用域、块级作用域；

##window全域作用域fn函數作用域##{}this

物件	#類型
#區塊級作用域
動態作用域

作用域尋找規則？

1、執行環境有全域作用域和函數作用域之分；

2、每次進入一個新的執行環境，都會建立一個用於搜尋變數和函數的作用域鏈；

3、函數的局部環境不僅可以存取函數作用域內的變量，還可以存取包含起父級環境乃至全域環境；
4、全域環境只能存取全域宣告的變數和函數，而不能直接存取局部環境重的任何資料。

全域作用域

變數在函數外定義，即為全域變數。

全域變數有全域作用域: 網頁中所有腳本和函數皆可使用。

如果變數在函數內沒有宣告（沒有使用var關鍵字），則變數為全域變數。

// 以下实例中 carName 在函数内，但是为全局变量。
// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

在函數內部或程式碼區塊中沒有定義的變數上是作為 window/global 的屬性存在，沒有使用 var 定義的變數可以被 delete 的，而全域變數則不行。

函數作用域

函數內部宣告的變量，稱為函數作用域。函數內部的變數外部無法

直接訪問，可以透過retun 或閉包的方式去存取。

// 此处不能调用 carName 变量
function myFunction() {
    let carName = "Volvo";
    // 函数内可调用 carName 变量
}
<!--rerurn-->
function myFunction() {
    let carName = "Volvo";
    rerurn carName;
    // 函数内可调用 carName 变量
}
let fn=myFunction()//Volvo;

<!--闭包-->
function myFunction() {
    let carName = "Volvo";
    function getName(){
        console.log(carName)
    }
    return getName();
    // 函数内可调用 carName 变量
}
myFunction() //Volvo

區塊級作用域

es6出現後，以let指令新增了區塊級作用域，外層作用域無法取得內層作用域，非常安全明了.即使外層和內層都使用相同變數名，也都互不干擾。

关于暂时性死区
* 在使用let命令声明变量之前，该变量都是不可用的。如果去调用这种情况被称为暂时性死区。
let 特性
*  let不存在变量提升
*  let不允许重复声明
*  拥有块级作用域
*  不可以使用window去调用
const 特性
*  定义常量
*  不允许修改常量的值
*  不允许先声明后赋值
*  同上
if(1){
  let a = 1
  console.log(a)
}

動態作用域

動態作用域不關心函數和作用域是如何宣告以及在何處宣告的，只關心它們從何處呼叫。而this的機制就很像;

其實這裡就有延伸出js的詞法作用域（靜態作用域），而與詞法作用域相對的是動態作用域，函數的作用域是在函數呼叫的時候才決定的

let name='youzi';
function getName(){
    let name="tuzi";
    function getAge(){
        console.log(name)
    }
    return getAge();
}
getName() //tuzi

詞法作用域

JavaScript採用的是詞法作用域，函數的作用域在函數定義的時候就決定了。

<!--  这段代码执行就是按照词法作用域去执行的。在函数定义时已经被决定了 -->
let name='youzi';

function getName(){
   console.log(name)
}
function getAge(){
    let name='tuzi';
    getName()
}
getAge() //youzi

本文來自 

js教學

 欄目，歡迎學習！

以上是深入學習es6作用域的詳細內容。更多資訊請關注PHP中文網其他相關文章！