ECMAScript 6 입문 학습 노트

1. let 명령
그것 의 용법 은 var 와 유사 하지만, 설 명 된 변 수 는 let 명령 이 있 는 코드 블록 에서 만 유효 합 니 다.

{
    let a = 10;
    var b =a;
}
a // ReferenceError: a is not defined.
b // 1

또한 for 순환 에는 또 하나의 특별한 점 이 있다. 즉, 순환 문 부분 은 부모 역할 영역 이 고 순환 체 내 부 는 단독 적 인 서브 역할 영역 이다.

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

위의 코드 는 abc 를 세 번 출력 했 는데 이것 은 함수 내부 의 변수 i 와 외부 변수 i 가 분 리 된 것 을 나타 낸다.
변수의 향상 이 존재 하지 않 습 니 다.

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

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

일시 적 사구

          let  ，        “  ”（binding）    ，        。
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 는 같은 역할 영역 에서 같은 변 수 를 반복 적 으로 설명 하 는 것 을 허용 하지 않 습 니 다.

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

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

따라서 함수 내부 에서 파 라 메 터 를 다시 설명 할 수 없습니다.

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

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

ES6 의 블록 급 역할 영역
ES5 는 전역 작용 역 과 함수 작용 역 만 있 고 블록 급 작용 역 이 없어 불합리한 장면 을 많이 가 져 온다.
첫 번 째 장면 에서 내부 변 수 는 외부 변 수 를 덮어 쓸 수 있 습 니 다.두 번 째 장면 에서 계산 하 는 순환 변 수 는 전체 변수 로 유출 된다.

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

ES6 는 블록 급 역할 영역의 임의의 끼 워 넣 기 를 허용 합 니 다.

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

블록 급 역할 영역 이 나타 나 면 실제 적 으로 광범 위 하 게 응용 되 는 즉시 실행 함수 표현 식 (IIFE) 이 필요 하지 않 습 니 다.

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

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

환경 으로 인 한 행위 차이 가 너무 큰 것 을 감안 하여 블록 급 역할 영역 에서 함 수 를 설명 하 는 것 을 피해 야 합 니 다.필요 하 다 면 함수 성명 문 대신 함수 표현 식 으로 써 야 합 니 다.

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

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

do 표현 식

let x = do {
  let t = f();
  t * t + 1;
};

위의 코드 에서 변수 x 는 전체 블록 급 작용 역 의 반환 값 을 얻 을 수 있 습 니 다.
const 명령
const 는 읽 기 전용 상수 입 니 다.일단 성명 하면 상수 의 값 은 바 꿀 수 없다.

const foo;
// SyntaxError: Missing initializer in const declaration

const 의 역할 영역 은 let 명령 과 같 습 니 다. 성명 이 있 는 블록 급 역할 영역 에서 만 유효 합 니 다.

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

const 명령 성명 의 상수 도 향상 되 지 않 고 일시 적 인 사각 지대 가 존재 하 며 성명 의 위치 뒤에서 만 사용 할 수 있 습 니 다.

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

const 성명 의 상수 도 let 와 마찬가지 로 중복 성명 할 수 없습니다.

var message = "Hello!";
let age = 25;

//         
const message = "Goodbye!";
const age = 30;

const foo = {};
foo.prop = 123;

foo.prop
// 123

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

     ，  foo        ，          。          ，    foo       ，         ，             。

          ，    Object.freeze  。

const foo = Object.freeze({});

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

최상 위 개체 의 속성
최상 위 대상 의 속성 은 전역 변수 와 연결 되 어 자바 스 크 립 트 언어 에서 가장 큰 디자인 실패 중 하나 로 여 겨 집 니 다.이러한 디자인 은 몇 가지 큰 문 제 를 가 져 왔 습 니 다. 먼저 컴 파일 할 때 변수 가 설명 되 지 않 은 오 류 를 보고 할 수 없고 실행 할 때 만 알 수 있 습 니 다 (전체 변 수 는 최상 위 대상 의 속성 이 창조 할 수 있 고 속성의 창 조 는 동태 적 이기 때 문 입 니 다).그 다음으로 프로그래머 는 자신 도 모 르 게 전역 변 수 를 만 들 기 쉽다 (예 를 들 어 타자 오류).마지막 으로 꼭대기 층 대상 의 속성 은 곳곳에서 읽 고 쓸 수 있 는데 이것 은 모듈 화 프로 그래 밍 에 매우 불리 하 다.다른 한편, window 대상 은 실체 적 의미 가 있 습 니 다. 브 라 우 저의 창 대상 을 말 합 니 다. 맨 위 대상 은 실체 적 의미 가 있 는 대상 이자 적합 하지 않 습 니 다.
ES6 는 이 점 을 바 꾸 기 위해 한편 으로 는 호환성 을 유지 하기 위해 var 명령 과 function 명령 성명 의 전역 변 수 는 여전히 최상 위 대상 의 속성 이 라 고 규정 하고 있다.다른 한편, let 명령, const 명령, class 명령 성명 의 전역 변 수 는 최상 위 대상 의 속성 에 속 하지 않 습 니 다.ES6 부터 전역 변수 가 점차 최상 위 대상 의 속성 과 연결 되 는 셈 이다.

var a = 1;
//    Node REPL  ，    global.a
//         ，  this.a
window.a // 1

let b = 1;
window.b // undefined

위의 코드 에서 전역 변 수 는 var 명령 으로 설명 되 기 때문에 최상 위 대상 의 속성 입 니 다.전역 변수 b 는 let 명령 으로 설명 되 기 때문에 최상 위 대상 의 속성 이 아니 라 undefined 로 돌아 갑 니 다.