ES6 수업은 왜 올리지 않나요?

ES6 수업은 왜 올리지 않나요?

---

ES6 클래스는 JavaScript의 기존 프로토 타입 기반 상속 [1]에 대한 구문 적 설탕 일 뿐이므로 (IMO) 정의를 끌어 올리는 것이 합리적입니다.

var foo = new Foo(1, 2); //this works

function Foo(x, y) {
   this.x = x;
   this.y = y;
}

그러나 다음은 작동하지 않습니다.

var foo = new Foo(1, 2); //ReferenceError

class Foo {
   constructor(x, y) {
      this.x = x;
      this.y = y;
   }
}

ES6 수업은 왜 올리지 않나요?

---

ES6 수업은 왜 올리지 않나요?

사실 그들이 하는 것처럼 (바인딩 변수는 전체 범위에서 사용할 수 있습니다) 게양 let하고 const있는 그들은 단지 초기화되지 않습니다 -.

정의를 올리는 것이 합리적입니다.

아니요. 클래스를 정의하기 전에 사용하는 것은 결코 좋은 생각이 아닙니다. 예를 고려하십시오

var foo = new Bar(); // this appears to work
console.log(foo.x)   // but doesn't

function Bar(x) {
    this.x = x || Bar.defaultX;
}
Bar.defaultX = 0;

그것을 비교

var foo = new Bar(); // ReferenceError
console.log(foo.x);

class Bar {
    constructor (x = Bar.defaultX) {
        this.x = x;
    }
}
Bar.defaultX = 0;

예상대로 오류가 발생합니다. 이것은 정적 속성, 프로토 타입 믹스 인, 데코레이터 및 모든 것에 대한 문제입니다. 또한 조정되지 않은 프로토 타입이있는 클래스를 사용할 때 ES5에서 완전히 중단되었지만 extended 클래스가 아직 초기화되지 않은 경우 오류가 발생하는 서브 클래 싱에도 매우 중요합니다 .

---

자바 스크립트에서는 모든 선언 (var, let, const, function, function *, class)이 호이스트 되지만 동일한 범위 에서 선언되어야합니다 .

"ES6 클래스는 JavaScript의 기존 프로토 타입 기반 상속에 대한 구문상의 설탕 일뿐입니다."

그래서 그것이 무엇인지 이해합시다?

여기서 실제로 "특수 함수"인 클래스를 선언했습니다. 함수 Foo ()와 클래스 Foo가 모두 전역 범위에 있다고 가정 해 보겠습니다.

class Foo {
   constructor(x, y) {
      this.x = x;
      this.y = y;
   }
}

다음은 Foo 클래스의 컴파일 된 코드입니다.

var Foo = (function () {
    function Foo(x, y) {
        this.x = x;
        this.y = y;
    }
    return Foo;
}());

내부적으로 클래스는 래퍼 함수 (iife) 내에서 동일한 이름을 가진 함수로 변환되고 해당 래퍼 함수는 함수를 반환합니다.

함수 (클래스) 범위가 변경 되었기 때문입니다. 그리고 당신은 실제로 존재하지 않는 전역 범위에서 기능의 대상을 만들려고합니다.

컴파일이 이루어지면 변수 Foo에서 함수를 얻습니다. 나중에 var에 함수가 있으므로 그 객체를 만들 수 있습니다.

---

공개되지 않은 클래스 ( let바인딩 처럼 작동한다는 의미에서 )는 더 안전한 사용으로 이어지기 때문에 선호되는 것으로 간주 될 수 있지만 ( Bergi의 답변 참조 ) 2ality 블로그 에서 찾은 다음 설명 은 이에 대한 약간 더 근본적인 이유를 제공하는 것 같습니다 이행:

The reason for this limitation [non-hoisting] is that classes can have an extends clause whose value is an arbitrary expression. That expression must be evaluated in the proper “location”, its evaluation can’t be hoisted.

ReferenceURL : https://stackoverflow.com/questions/35537619/why-are-es6-classes-not-hoisted