ES6 학습 노트 의 블록 급 역할 영역 귀속 깊이 이해

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.임시 데 드 존(임시 데 드 존)
JavaScript 엔진 은 코드 를 스 캔 하여 변수 성명 을 발 견 했 을 때,이 를 역할 영역 맨 위로 올 리 거나(var 성명 을 만 났 을 때)TDZ 에 성명 을 올 리 거나(let 과 const 성명 을 만 났 을 때)TDZ 에 접근 하 는 변 수 는 실행 중 오류 가 발생 합 니 다.변수 성명 문 구 를 실행 한 후에 만 변 수 를 TDZ 에서 이동 할 수 있 고,정상적으로 접근 할 수 있 습 니 다.
다음 코드 는 if 블록 급 역할 영역 에서 console.log 를 실 행 했 을 때 value 가 TDZ 에 있 었 기 때 문 입 니 다.이전 type of 는 상대 적 으로 오류 가 발생 하기 쉬 운 조작 자 였 으 나 엔진 의 오 류 를 막 을 수 없 었 습 니 다.
성명 전에 블록 급 바 인 딩 에 접근 하 는 것 은 오류 가 발생 할 수 있 습 니 다.임시 사각 지대 에 바 인 딩 되 어 있 기 때 문 입 니 다.

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

let 성명 의 역할 역외 에서 이 변수 에 type:of 를 사용 하면 오류 가 발생 하지 않 습 니 다.

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 회 출력 됩 니 다.
따라서 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)

최 적 실천:
var 대신 let 사용
기본적으로 const 를 사용 합 니 다.변수의 값 을 바 꿔 야 할 때 만 let 를 사용 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.