ES6 학습 튜 토리 얼 의 블록 급 역할 영역 에 대한 상세 한 설명

머리말
ES5 이전에 javascript 언어 는 함수 역할 영역 과 전역 역할 영역 만 있 었 고 var 를 사용 하여 변 수 를 설명 하 였 으 며,var 성명 의 변 수 는 변수 향상 이 있어 곤 혹 스 러 웠 습 니 다.우 리 는 먼저 ES5 의 var 성명 을 복습 한 다음 에 let 와 const 를 비교 학습 합 시다.
var
var 성명 의 함수 역할 영역 과 전역 역할 영역.
코드 체험:

function getName() {
 if (1 + 1 === 2) {
 var name = 'xixi';
 }

 console.log(name);
}

getName();//xixi

c 나 자바 언어 에서 name 은 if 블록 에서 만 사용 해 야 하 는데 if 의 밖에서 도 접근 할 수 있 습 니 다.이것 은 js 에 블록 급 역할 영역 이 없 는 표현 입 니 다.이 폐단 은 for 순환 에서 매우 뚜렷하게 나타난다.

for (var i = 0; i < 10; i ++) {
 // ...
}

console.log(i);// 10

var i 의 본 뜻 은 임시 변수 i 를 설명 하 는 것 입 니 다.배열 등 을 옮 겨 다 니 는 데 사 용 됩 니 다.for 순환 하 는 외부 에 접근 하지 말 았 어야 했 는데 지금 은 귀 찮 지 않 습 니까?좋 은 프로그래머 는 블록 급 역할 영역 을 즉시 실행 함수 로 모 의 할 것 입 니 다.원래 저 는 같은 변 수 를 사용 하지 않도록 주의 하 겠 습 니 다.😎。

(function() {
 for (var i = 0; i < 10; i ++) {
 // ...
 }
})();

console.log(i);// undefined

이상:js 에 블록 급 역할 영역 이 없다 는 것 을 알 게 되 었 습 니 다.
변 수 는 반복 해서 설명 할 수 있 습 니 다.

var name = 'xixi';
console.log(name);// xixi
var name= '  ';
console.log(name);//   

잘못 을 보고 하지 않 고 곤 혹 스 럽 고 곤 혹 스 럽 지 않다.이것 이 바로 변수 가 중복 성명 할 수 있 는 것 이다.
변수 향상

function getName() {
 console.log(name);
 var name = 'xixi';
 // ...
}

getName();// undefined

console.log 인쇄 name 은 undefined 입 니 다.왜 틀 리 지 않 았 을 까?js 언어 를 계속 사용 하 는 사람 에 게 는 이 현상 이 이해 하기 쉽다.백 스테이지 에서 전단 지 를 돌 리 는 사람 이 라면 욕 을 해 야 할 것 이다.이른바 변수 향상 이다.간단하게 설명해 드릴 게 요.

var name = 'xixi';

이것 은 우리 가 잘못 쓴 문장 으로 두 가지 과정 을 포함한다.var name; name = 'xixi'; 은 각각 변수 성명 과 변수 초기 화 이다.
변수 향상:변수 성명 var name 에 관 계 없 이;어떤 위치 에 있 든 지 작용 역 의 상단 에 언급 되 어 진행 된다.
let
ES6 는 변수의 생명 주 기 를 더욱 제어 할 수 있 도록 두 가지 좋 은 특성 let,const 를 도입 합 니 다.블록 급 역할 영역,중복 성명 불가,임시 사구 등 특성 은 var 변수 에 존재 하 는 여러 가지 문 제 를 해결 하 는 데 사용 된다.
블록 급 역할 영역

function getName4ES6() {
 if (1 + 1 === 2) {
 let name = 'xixi';
 }

 console.log(name);
}

getName4ES6(); // undefined

드디어{}밖에서 name 에 접근 할 수 없습니다.for 순환 도 쉬 워 졌 습 니 다.for 순환 의 var 를 let 로 바 꿔 보 세 요.
같은 블록 급 역할 영역 에서 성명 변 수 를 중복 할 수 없습니다.

function redefineValue() {
 let name = 'xixi';
 let name = '  ';
}

redefineValue();// Uncaught SyntaxError: Identifier 'name' has already been declared

중복 성명 은 잘못 보 고 될 것 이다.

{
 let name = 'xixi';
 console.log(name);// xixi
 {
 let name = 'yibu';
 console.log(name); // yibu
 }
}

주의:ES6 에서{}은 블록 급 역할 영역 입 니 다.
임시 성 사구

function getName4ES6() {
 console.log(name);
 for (let i = 0; i < 10; i ++) {

 }
 let name = 'xixi';
 // ...
}

 
getName4ES6();// Uncaught ReferenceError: name is not defined

위의 ES5 에 서 는 name 에 변수 향상 이 존재 합 니 다.값 은 undefined 입 니 다.ES6 에서 또 잘못 보 고 했 습 니 다.어떻게 설명 할 까요?이것 이 바로 임시 사각 지대 의 개념 입 니 다.역할 도 메 인 블록 에서 변수 성명 전에 변 수 를 사용 할 수 없습니다.사용 하면 오류 가 발생 할 수 있 습 니 다.
javascript 엔진 은 변수 성명 을 발 견 했 을 때,변수 성명 을 역할 영역의 맨 위(var 성명 변수)로 올 리 거나,변 수 를 임시 사구(let,const 성명 변수)에 놓 거나,임시 사구 에 접근 하면 실행 중 오류 가 발생 합 니 다.

const
const 와 let 역시 블록 급 역할 도 메 인 을 가지 고 있 으 며,임시 적 인 사각 지대 라 는 개념 을 반복 할 수 없습니다.성명 과 동시에 초기 화 되 어야 하 며 변수 인용 은 바 꿀 수 없습니다.
성명 과 동시에 초기 화 해 야 합 니 다.

const name;//Uncaught SyntaxError: Missing initializer in const declaration

값 을 부여 하지 않 으 면 잘못 을 보고한다.이것 도 const 의 본 뜻 이 상수,가 변 적 이지 않 은 값 을 정의 하 는 데 쓰 인 다 는 것 을 잘 이해 할 수 있다.성명 할 때 초기 값 을 제시 하지 않 으 면 다 시 는 기회 가 없다.
가 변 할 가치 가 없다

const name = 'x9x9'；
name = 'yyy';// Uncaught SyntaxError: Invalid or unexpected token

그럼 상 대 는 어떻게 될까요?

const person = {
 name: 'lala',
 age: 40
};

person = {};// VM1042:6 Uncaught TypeError: Assignment to constant variable. at <anonymous>:6:8

인용 은 가 변 적 이지 않 습 니 다.대상 의 속성 치가 어떤 지 살 펴 보 겠 습 니 다~

person.name = 'yoyo';
console.log(person);// {name: "yoyo", age: 40}

오류 가 없 으 면 대상 인용 은 변경 할 수 없고 대상 속성 은 변경 할 수 있 습 니 다.
let vs const
언제 let 을 사용 하고 언제 const 를 사용 하 는 지 곤 혹 스 러 울 수 있 습 니 다.let 할 수 있 는 const 다 될 것 같 아 요.인터넷 에 서 는 const 를 사용 할 수 있 으 면 let 를 사용 하지 않 고 간단 하고 거 칠 지만 사용 하기 좋다 는 유행 방법 이 있다.
개인 적 인 견해:변수 가 후속 방법 에서 바 뀌 면 let 를 사용 합 니 다.일부 상수 성명 은 const,const 성명 의 변수 이름 을 모두 대문자 로 사용 합 니 다.코드 에 있 는 변 수 는 let 성명 이 라면 가 변 을 의미 합 니 다.const 성명 이 라면 간단 한 데이터 형식 이 든 인용 형식 변수 든 값 을 바 꾸 지 마 십시오.이렇게 하면 절차 가 더욱 건장 해 지고 모두 가 합작 하기에 도 비교적 편리 하 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.