ES6 입문 강좌 의 let,const 사용 방법

전제
ES5 에서 전역 작용 역 과 함수 작용 역 만 있 고 블록 급 작용 역 이 없어 서 가 져 온 불합리한 장면 을 해결한다.
let
기본 용법
용법 은 var 와 마찬가지 로 let 성명 의 변 수 는 let 명령 이 있 는 코드 블록 에서 만 유효 합 니 다.

{
 let a = 10;
 var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

var 성명 의 변 수 는 코드 블록 외 에 도 호출 할 수 있 고 let 성명 의 변 수 는 호출 오류 임 을 알 수 있 습 니 다.그래서 let 성명 은 현재 코드 블록 에서 만 호출 할 수 있 습 니 다.
변수 향상
var 를 사용 할 때'변수 향상'현상 이 나타 납 니 다.즉,변 수 는 성명 하기 전에 사용 할 수 있 고 값 은 undefined 입 니 다.let 는 이러한 상황 을 바 꾸 었 으 나,먼저 사용 을 성명 해 야 하 며,성명 전에 사용 하면 오류 가 발생 할 수 있 습 니 다.다음 과 같다.

// var    
console.log(foo); //   undefined
var foo = 2;

// let    
console.log(bar); //   ReferenceError
let bar = 2;

일시 적 사구
블록 급 역할 영역 내부 에 let 또는 const 명령 이 존재 하면 설명 한 변 수 는 이 영역 에 연결 되 어 외부 영향 을 받 지 않 습 니 다.또한 일시적인 사각 지대 의 본질은 현재 역할 영역 에 들 어가 면 사용 할 변 수 는 이미 존재 하지만 가 져 올 수 없습니다.변 수 를 설명 하 는 줄 코드 가 나타 날 때 까지 기 다 려 야 이 변 수 를 가 져 오고 사용 할 수 있 습 니 다.다음 과 같다.

var tmp = 123;

if (true) {
 tmp = 'abc'; // ReferenceError
 let tmp;
}

ES6 는 블록 에 let 와 const 명령 이 존재 하면 이 블록 이 이 명령 성명 에 대한 변 수 는 처음부터 폐쇄 적 인 역할 영역 을 형성 하도록 명 확 히 규정 하고 있다.성명 하기 전에 이 변 수 를 사용 하면 잘못 보고 할 수 있다.
한 마디 로 하면 코드 블록 에서 let 명령 으로 변 수 를 설명 하기 전에 이 변 수 는 사용 할 수 없습니다.이 는 문법 적 으로'일시 적 사구'(temporal dead zone·TDZ 로 약칭)라 고 한다.다음 과 같다.

if (true) {
 // TDZ  
 tmp = 'abc'; // ReferenceError
 console.log(tmp); // ReferenceError

 let tmp; // TDZ  
 console.log(tmp); // undefined

 tmp = 123;
 console.log(tmp); // 123
}

주의:
+let 성명 변 수 를 사용 할 때 변수 가 성명 이 완료 되 기 전에 사용 하면 오류 가 발생 합 니 다.위 에 있 는 이 줄 은 이 상황 에 속 합 니 다.변수 x 의 성명 문 이 실행 되 기 전에 x 의 값 을 가 져 와 서'x 가 정의 되 지 않 았 습 니 다.'+
중복 성명 허용 하지 않 음
let 는 같은 역할 영역 에서 같은 변 수 를 설명 하 는 것 을 허용 하지 않 습 니 다.다음 과 같 습 니 다.

//   
function func() {
 let a = 10;
 var a = 1;
}

//   
function func() {
 let a = 10;
 let a = 1;
}

또는 다음 과 같 습 니 다.

function func(arg) {
 let arg;
}
func() //   

function func(arg) {
 {
 let arg;
 }
}
func() //    

블록 급 역할 영역
위 에서 도 언급 한 바 와 같이 es5 에서 블록 급 작용 역 이 없다 는 개념 은 함수 작용 역 과 전역 작용 역 만 있 기 때문에 몇 가지 문 제 를 가 져 왔 다.다음 과 같다.

var tmp = new Date();

function f() {
 console.log(tmp);
 if (false) {
 var tmp = 'hello world';
 }
}

f(); // undefined


            ，           ，         undefinded

두 번 째:전체 유출 을 계산 합 니 다.다음 과 같 습 니 다.

var s = 'hello';

for (var i = 0; i < s.length; i++) {
 console.log(s[i]);
}

console.log(i); // 5

      ，           1 2 3 4 5      5

ES6 의 블록 급 역할 영역 은 실제 let 에서 새로 추 가 된 것 입 니 다.다음 과 같 습 니 다.

function f1() {
 let n = 5;
 if (true) {
 let n = 10;
 }
 console.log(n); // 5
}

     n     

ES6 에 서 는 역할 영역 을 임의로 끼 워 넣 을 수 있 고 서로 간섭 하지 않 습 니 다.다음 과 같 습 니 다.

       

{{{{
 let insane = 'Hello World';
 {let insane = 'Hello World'}
}}}};

  

{{{{
 {let insane = 'Hello World'}
 console.log(insane); //   
}}}};

블록 급 역할 필드 의 등장 은 다음 과 같은 함수 의 쓰기 가 필요 하지 않 습 니 다.다음 과 같 습 니 다.

// IIFE   
(function () {
 var tmp = ...;
 ...
}());

//        
{
 let tmp = ...;
 ...
}

블록 급 역할 영역 과 함수 설명
ES5 에서 함 수 는 최상 위 역할 영역 과 함수 역할 영역 에서 만 설명 할 수 있 고 블록 급 역할 영역 에서 설명 할 수 없습니다.그러나 브 라 우 저 는 호환성 을 위해 블록 급 역할 영역 에서 설명 할 수 있 습 니 다.이론 적 으로 ES6 에서 블록 급 역할 영역 에서 설명 하 는 함 수 는 외부 호출 에서 오 류 를 보고 하고 환경의 문 제 를 고려 하여 블록 급 역할 영역 에서 함 수 를 설명 하 는 것 을 피해 야 합 니 다.필요 하 다 면 함수 성명 문 대신 함수 표현 식 으로 써 야 합 니 다.다음 과 같 습 니 다.

//       
{
 let a = 'secret';
 function f() {
 return a;
 }
}

//      
{
 let a = 'secret';
 let f = function () {
 return a;
 };
}

const
const 가 설명 한 것 은 상수 입 니 다.다음 과 같 습 니 다.

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

성명 후 할당 하면 오 류 를 보고 할 수 있 습 니 다.또한 성명 은 상수 이기 때 문 입 니 다.즉,const 성명 후 할당 해 야 합 니 다.그렇지 않 으 면 오 류 를 보고 할 수 있 습 니 다.
const 는 let 와 마찬가지 로 성명 도 현재 블록 급 역할 영역 에서 만 유효 합 니 다.마찬가지 로 향상 을 성명 하지 않 고 일시 적 인 사각 지대 도 존재 합 니 다.성명 후에 만 사용 할 수 있 고 let 와 마찬가지 로 중복 성명 을 할 수 없 으 며 다시 할당 할 수 없습니다.
중요:
const 가 변경 할 수 없 는 것 은 값 이 아니 라 변수 가 가리 키 는 메모리 주소 에 저 장 된 값 은 변경 할 수 없습니다.간단 한 형식(수치,문자열,불 값)에 대해 서 는 변수 가 가리 키 는 메모리 주소 에 저 장 됩 니 다.따라서 상수 와 같 습 니 다.한편,복합 형식(배열,대상)에 대해 변수 가 가리 키 는 메모리 주 소 는 실제 데 이 터 를 가리 키 는 지침 일 뿐 const 는 이 지침 이 고정 되 어 있 음 을 보증 할 수 밖 에 없다(즉,항상 고정된 주 소 를 가리 키 는 것).그것 이 가리 키 는 데이터 구 조 는 제어 할 수 없다.다음 과 같다.

const foo = {};

//   foo       ，    
foo.prop = 123;
foo.prop // 123

//   foo        ，    
foo = {}; // TypeError: "foo" is read-only

  foo        ，          。          ，
    foo       ，         ，             。

혹은

const a = [];
a.push('Hello'); //    
a.length = 0; //    
a = ['Dave']; //   

  a     ，          ，             a，    

만약 정말로 성명 대상 을 동결 하고 싶다 면,변경 할 수 없 으 면 사용 해 야 한다object.freeze()

const foo = Object.freeze({});

//      ，        ；
//      ，     
foo.prop = 123;

       

var constantize = (obj) => {
 Object.freeze(obj);
 Object.keys(obj).forEach( (key, i) => {
 if ( typeof obj[key] === 'object' ) {
 constantize( obj[key] );
 }
 });
};

ES6 변수 설명 6 가지 방법
1. function
2. var
3. let
4. const
5. import
6. class
최상 위 개체 의 속성
브 라 우 저 환경 에 서 는 window 대상 을 말 하 며,Node 에 서 는 global 대상 을 말 하 며,ES5 에 서 는 최상 위 대상 의 속성 과 전역 변 수 는 등가 입 니 다.

window.a = 1;
a // 1

a = 2;
window.a // 2

글로벌 대상
ES5 의 최상 위 대상 자체 도 문제 다.여러 가지 실현 에서 통일 되 지 않 기 때문이다.

브 라 우 저 에 서 는 최상 위 대상 이 window 이지 만 Node 와 Web Worker 에는 window 가 없습니다.

브 라 우 저 와 웹 Worker 에서 self 도 최상 위 대상 을 가리 키 지만 Node 에는 self 가 없습니다.

Node 에 서 는 최상 위 대상 이 global 이지 만 다른 환경 은 지원 하지 않 습 니 다.

같은 코드 는 여러 환경 에서 최상 위 대상 을 찾 을 수 있 도록 현재 일반적으로 this 변 수 를 사용 하지만 한계 가 있 습 니 다.

전역 환경 에서 this 는 최상 위 대상 으로 돌아 갑 니 다.그러나 Node 모듈 과 ES6 모듈 에서 this 는 현재 모듈 을 되 돌려 줍 니 다.

함수 안의 this 는 함수 가 대상 으로 하 는 방법 이 아니 라 단순히 함수 로 실행 된다 면 this 는 꼭대기 층 대상 을 가리킨다.그러나 엄격 한 모드 에서 이 때 this 는 undefined 로 돌아 갑 니 다.

엄격 한 모델 이 든 일반 모델 이 든new Function('return this')() 항상 전체 대상 으로 돌아간다.단,브 라 우 저가 CSP(Content Security Policy,콘 텐 츠 보안 정책)를 사용 했다 면 eval,new Function 같은 방법 을 사용 할 수 없 을 수도 있 습 니 다.

총결산
이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.