자바 스크립트 클래스 구문 및이를 메서드에 바인딩 [중복]

Question

아래 구문이 작동하는 방식의 기본적인 차이점을 이해하고 싶었습니다.

// Syntax 1
class Component extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    // ...
  }
}

// Syntax 2

handleClick = () => {
  console.log('this is:', this)
}
<button onClick={this.handleClick}>
  {'Click me'}
</button>

구문 1은 생성자 내부에 명시 적 바인딩을 지정해야합니다. 그러나 구문 2에서는 필요하지 않은 것처럼 보입니다. 구문 2는 어떻게 자동으로 바인딩을 수행 할 수 있습니까?

이 이해 / 구문은 React, Angular, Ember 등을 포함한 모든 프레임 워크에 대해 확장 될 수 있다고 가정합니다.

Answer 1

클래스 필드 (즉, 클래스 본문 내부에 직접 정의 된 속성)는 기본적으로 생성자 내부의 동일한 항목에 대한 구문 설탕 일뿐입니다. 그래서 이건:

class Something {
  handleClick = () => {
    console.log('this is:', this)
  }
}

is, desugared :

class Something {
  constructor() {
    this.handleClick = () => {
      console.log('this is:', this)
    };
  }
}

슈가 링이 제거되면 무슨 일이 일어나고 있는지 명확해야합니다. 화살표 함수 는 인스턴스 자체 인 생성자에있는 this것을 참조하며 this바인딩이 필요하지 않음을 의미합니다.

이것은 단순한 React 또는 프레임 워크가 아니라 바닐라 JavaScript의 표준 규칙입니다.

메서드를 바인딩하지 않거나 화살표 함수 또는 이와 유사한 것을 사용하지 않는 경우 :

<button onClick={this.handleClick}>

같은 이유로 실패

someButton.addEventListener('click', myObj.someFn)

또한 다음 someFn과 같은 호출 컨텍스트 로 호출에 실패 myObj합니다. 브라우저가 알고있는 모든 것은 클릭 리스너에 전달 된 콜백을 호출하는 것입니다. 이렇게 myObj전달되면 의 호출 컨텍스트 가 손실됩니다.