首頁 >web前端 >js教程 > 正文

深入學習es6作用域

轉載2019-11-30 17:55:140162
第十期線上培訓班
最近重新學習了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中文網其它相關文章!

php中文網最新課程二維碼
  • 相關標簽:javascript es6
  • 本文轉載于:segmentfault,如有侵犯,請聯系[email protected]刪除
  • 相關文章

    相關視頻


    網友評論

    文明上網理性發言,請遵守 新聞評論服務協議

    我要評論
  • 專題推薦

    作者信息

    青燈夜游

    今天學習一小步,明天提升一大步

    最近文章
    SQL查詢如何優化?(詳解)312
    淺談ES6中的字符串(代碼示例)1029
    鮮為人知的 JSON.stringify 用法415
    推薦視頻教程
  • Javascript - ES6實戰視頻課程Javascript - ES6實戰視頻課程
  • 尚硅谷JavaScript高級視頻教程尚硅谷JavaScript高級視頻教程
  • JavaScript入門基礎視頻教程JavaScript入門基礎視頻教程
  • JavaScript深入視頻教程JavaScript深入視頻教程
  • 視頻教程分類
    第十期線上培訓班 足彩吧合买平台