Ecmascript 6 화살표 함수를 클래스의 메서드로 사용하는 올바른 방법은 무엇입니까?

Question

Ecmascript 6 arrow 함수는 "this"참조를 사용하는 호출 컨텍스트에 종속되지 않으므로 클래스의 메서드로 사용하는 것이 이상적입니다. 하지만 예상대로 사용하는 방법을 알 수 없습니다. 콜백을 필요로

class Person { 

constructor(aName) { 
    this.name = aName; 
    this.say2 =() => console.log(this.name); 
} 

say() { console.log(this.name) } 

say3() {() => consolve.log(this.name) } 

} 

모두 say2 및 say3이 취급 새로운를 사용하고 하나는 핸들러를 클릭하여 통과 할 수 있어야하고, 다른 기능 : 다음 두 가지 방법으로 내가 그들을 사용하는 볼 수를 표시하는 클래스 "this"가 예기치 않게 객체의 적절한 인스턴스가 아닌 다른 것을 가리키는 원인으로 인해 호출되는 콜백에 대해 걱정할 필요가 없습니다.

say2와 say3 모두 어색해 보입니다. say2는 생성자에 정의되어 있으며 say3은 실제로 화살표 함수에 대한 래퍼입니다. 나는 나를

say:() => console.log(this.name) 

같은 것을 함께 말() 라인을 대체하지만 같은 근처 내가 말할 수있는,이 같은 아무것도 할 수 있도록 할 몇 가지 sytax를 기다리고 있었다. 그래서 문제는 화살표 함수를 메소드로 사용하는 것이 say2 또는 say3의 접근 방식이라는 것입니다. 더 좋은 방법이 있습니까?

입력 해 주셔서 감사합니다.

Answer 1

ES6 문법에서 the body of a class은 method definitions으로 만 구성 될 수 있으므로 여기서는 화살표 함수 표현식을 사용할 수 없습니다. 귀하의 예제에서 그래서

ClassBody : 
    ClassElementList 

ClassElementList : 
    ClassElement 
    ClassElementList ClassElement 

ClassElement : 
    MethodDefinition 
    static MethodDefinition 
    ; 

MethodDefinition : 
    PropertyName (StrictFormalParameters) { FunctionBody } 
    GeneratorMethod 
    get PropertyName () { FunctionBody } 
    set PropertyName (PropertySetParameterList) { FunctionBody } 

:

class Person { 

    constructor(aName) { 
     this.name = aName; 
     this.say2 =() => console.log(this.name); 
    } 

    say() { console.log(this.name) } 

    say3() {() => console.log(this.name) } 

} 

• say이 this 바인딩과 같은 문제를 앓고 정상적인 방법 정의이며,이 문법의 관련 부분의 단순화 된 조각이다 정상적인 기능으로. 그러나 element.addEventListener('click', this.say.bind(this));처럼 전달할 때 bind을 사용하면 문제를 해결할 수 있습니다.
• say2가 작동하지만 생성자 외부에서 메소드를 지정하는 편의를 잃게됩니다.
• say3은 구문 적으로 유효하지만 몸체가 단일 화살표 함수로 구성된 메서드로 파싱됩니다. 명확히하기 위해, say3() {() => console.log(this.name) }과 say3() { return() => console.log(this.name) }은 앞에서 아무 것도하지 않고 undefined을 반환하지만, 후자는 호출 될 때 콘솔에 인쇄 할 화살표 함수 표현식을 반환합니다.