this.buttonClick = this.buttonClick.bind(this);
this.eventChange = this.eventChange.bind(this);
this.buttonClick3 = this.buttonClick3.bind(this);
this.eventChange1 = this.eventChange1.bind(this);
둘 이상의 이벤트 핸들러를이 함수에 함께 바인딩하는 방법은 무엇입니까? 이와 같은 이벤트 처리기 함수가 많은 경우 어떻게해야합니까? 옵션이 있습니까?
이러한 호출이 생성자에 있다고 가정하면 화살표 함수를 사용할 때이 현재 인스턴스에 자동으로 바인딩되는 공용 클래스 필드 를 사용할 수 있습니다 .
class Something {
buttonClick = (...args) => {
// code that uses `this` ...
};
}
위의 코드를 사용하면 this.buttonClick = this.buttonClick.bind(this)바인딩 을 건너 뛸 수 있습니다 .
공용 클래스 필드를 사용하는 것은 프로토 타입 수준이 아닌 인스턴스 수준에 바인딩되므로 일반 함수보다 효율성이 떨어집니다. 따라서 어쨌든 현재 인스턴스 컨텍스트에 함수를 바인딩 할 때만 이것을 사용하는 것이 좋습니다. 모든 기능을이 접근 방식으로 바꾸지 마십시오.
Babel과 같은 트랜스 파일러를 사용하지 않거나 다른 이유로이 3 단계 기능을 사용할 수없는 경우. 대안은 바인딩해야하는 메서드를 포함하는 미리 정의 된 배열을 반복하는 것입니다.
const methodsToBind = ["buttonClick", "eventChange", "buttonClick3", "eventChange1"];
methodsToBind.forEach(method => this[method] = this[method].bind(this));
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다