国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

深入理解ES6之《塊級作用域綁定》

Nosee / 3339人閱讀

摘要:眾所周知,中的聲明存在變量提升機制,因此引用了塊級作用域來強化對變量生命周期的控制聲明不會被提升,有幾個需要注意的點不能被重復聲明假設作用域中已經存在某個標識符無論該標識符是通過聲明還是變量聲明,此時再使用或關鍵定聲明會拋錯此處則會拋出錯誤

眾所周知,js中的var聲明存在變量提升機制,因此ESMAScript 6引用了塊級作用域來強化對變量生命周期的控制
let const 聲明不會被提升,有幾個需要注意的點
1、不能被重復聲明

假設作用域中已經存在某個標識符(無論該標識符是通過var聲明還是let、const變量聲明),此時再使用let或const關鍵定聲明會拋錯
var count=10
let count=20// 此處則會拋出錯誤,因為同一作用域內不能重復聲明

如果當前作用域內嵌另一個作用域,便可在內嵌的作用域中用let聲明同名變量

var count=10
if(true){
    let count=20
}

2、const聲明的常量必須進行初始化
像下面這樣聲明就會報錯

const name;//語法錯誤,常量未初始化

3、不可以為const定義的常量再賦值,真正的本質是const聲明不允許修改綁定,但允許修改值(也就是說const聲明對象后,可以修改該對象的屬性值)

const person={
  name:"angela"
}
//可以修改對象屬性的值
person.name="yun"
// 修改綁定則會拋出語法錯誤
person={
  "name":"Shining"
}

4、臨時性死區(Temporal Dead Zone)
JavaScript引擎在掃描代碼發現變量聲明時,要么將它們提升至作用域頂部(遇到var聲明),要么將聲明放到TDZ中(遇到let和const聲明),訪問TDZ中的變量會觸發運行時錯誤,只有執行過變量聲明語句后,變量才會從TDZ中移出,才能正常訪問
如下代碼就因為在if塊級作用域內執行console.log時value已經在TDZ中了,以前typeof是一個相對不易出錯的操作符,但其實也無法阻擋引擎拋出錯誤
在聲明前訪問塊級綁定會導致錯誤,因為綁定在臨時死區中

if (true) {
  console.log(typeof value)//引用錯誤
  let value = "blue"
}

而在let聲明的作用域外對該變量使用typeof則不會報錯

console.log(typeof value)
if (true) {  
  let value = "blue"
}

5、塊級作用域綁定
之前在循環中創建函數都有些不可言狀

var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}
funcs.forEach(function (func) {
  func()
})

因為循環內部創建的函數全部都保留了對相同變量的引用,循環結束時變量i的值為10,所以結果會輸出10次10
于是大家會在循環中使用立即調用函數表達式,以強制生成計數器變量的副本,以便輸出1、2、3......

var funcs = []
for (var i = 0; i < 10; i++) {

  funcs.push((function (value) {
    return function () {
      console.log(value)
    }
  })(i))

}
funcs.forEach(function (func) {
  func()
})

有了let,立即調用函數表達式則可以簡化,其實每次迭代循環都會創建一個新變量,并以之前迭代中同名變量的值將其初始化

var funcs = []
for (let i = 0; i < 10; i++) {
//其實是每次循環的時候let聲明都會創建一個新變量i并將其初始化為i的當前值,所以在循環內部創建的每個函數都能得到屬于它們自己的i的副本
  funcs.push(function () {
    console.log(i)
  })
}
funcs.forEach(function (func) {
  func()//這里輸出是0 然后是1、2....9
})

這個特性同樣適用于for in中,舉例來說

var funcs = [],
  obj = {
    a: true,
    b: true,
    c: true
  }
for (let key in obj) {
  funcs.push(function () {
    console.log(key)
  })
}
funcs.forEach(function (func) {
  func()//輸出的是a  b  c
})

6、循環中的let聲明特性同樣適用于const聲明,唯一的區別是const不能更改綁定
上面的例子中把let換成const同樣輸出a b c

var funcs = [],
  obj = {
    a: true,
    b: true,
    c: true
  }
//之所以可以運用for in 和for of循環中,是因為每次迭代不會修改已有綁定,而是會創建一個新綁定
for (const key in obj) {
  funcs.push(function () {
    console.log(key)// 同樣輸出a b c  唯一的區別是循環內不能更改key的值
  })
}
funcs.forEach(function (func) {
  func()
})

下面的這個例子則會報錯,因為在for循環中更改了i的綁定而const常量不能更改綁定

var funcs = []
for (const i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}
funcs.forEach(function (func) {
  func()
})

7、全局作用域綁定
當var被作用于全局作用域時,它會創建一個新的全局變量作用全局對象(瀏覽器環境中的window對象)的屬性,這意味著用var很可能會無意中覆蓋一個已經存在的全局變量

從上圖代碼中看出即便是全局對象RegExp Array都會被覆蓋
但是let或const會在全局作用域下創建一個新的綁定,但該綁定不會添加為全局對象的屬性,換句話說用let或const不能覆蓋全局變量,而只能遮蔽它

這個時候的RegExp和window.RegExp是不相同的

let RegExp="hello"
console.log(RegExp) //hello
console.log(window.RegExp===RegExp)//false

const ncz="hi"
console.log(ncz)
console.log("ncz" in window)

最佳實踐:
默認使用let而不是var
默認使用const,只有確實需要改變變量的值時使用let

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87372.html

相關文章

  • 深入理解ES6》筆記——塊級作用綁定(1)

    摘要:沒有聲明的情況和都能夠聲明塊級作用域,用法和是類似的,的特點是不會變量提升,而是被鎖在當前塊中。聲明常量,一旦聲明,不可更改,而且常量必須初始化賦值。臨時死區的意思是在當前作用域的塊內,在聲明變量前的區域叫做臨時死區。 本章涉及3個知識點,var、let、const,現在讓我們了解3個關鍵字的特性和使用方法。 var JavaScript中,我們通常說的作用域是函數作用域,使用var聲...

    2bdenny 評論0 收藏0
  • 【進階2-3期】JavaScript深入閉包面試題解

    摘要:閉包面試題解由于作用域鏈機制的影響,閉包只能取得內部函數的最后一個值,這引起的一個副作用就是如果內部函數在一個循環中,那么變量的值始終為最后一個值。 (關注福利,關注本公眾號回復[資料]領取優質前端視頻,包括Vue、React、Node源碼和實戰、面試指導) 本周正式開始前端進階的第二期,本周的主題是作用域閉包,今天是第8天。 本計劃一共28期,每期重點攻克一個面試重難點,如果你還不了...

    alanoddsoff 評論0 收藏0
  • 小白學《深入理解es6》--塊級作用綁定

    摘要:塊級聲明前是沒有塊級作用域的,比如外可以訪問內部的變量。循環中的塊作用域綁定我們經常使用循環發現了什么在循環執行后,我們仍然可以訪問到變量。 var聲明及變量提升機制 在ES6之前,在函數作用域中或者全局作用域中通過var關鍵字來聲明變量,無論是在代碼的哪個位置,這條聲明語句都會提到最頂部來執行,這就是變量聲明提升。 注意:只是聲明提升,初始化并沒有提升。 看一個例子: functio...

    fox_soyoung 評論0 收藏0

發表評論

0條評論

Nosee

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<