6 가지 JavaScript를 바인딩하는 6 가지

키 포인트

javaScript의 키워드는 특히 콜백 함수 내에서 혼란 스러울 수 있습니다. React에서 는 구성 요소의 컨텍스트를 참조하여 기능 컨텍스트가 이동할 때 문제를 일으킬 수 있습니다 (예 : 약속 콜백). 바인딩 :

바인딩 : 최상위 수준

참조 (별명 this) 생성, 런타임에서 올바른 컨텍스트를 주입하고 (바인드), ES2015 화살표 기능을 사용하여 ES2016을 사용하여 반응 구성 요소 방법을 활용합니다. 구문 바인드 (지원되는 경우) 또는 명시 적 인수를 수용하는 메소드를 사용하십시오. 최적의 방법은 성능, 디버깅 편의성 및 개인 선호도와 같은 요소에 따라 다릅니다. 앨리어싱
• 성능을 우선시합니다. 구성 요소 방법 또는 명명 된 기능이 디버깅을 향상시킵니다. 화살표 기능은 짧은 인라인 함수에 대해 간결합니다 this javaScript의 this 키워드는 종종 개발자를 트립합니다. 엄격한 클래스 모델이있는 언어와 달리, 특히 통화 사이트가 귀하가 통제 할 수없는 콜백 기능에서 동작을 항상 예측할 수있는 것은 아닙니다. 외부 코드는 또는 를 사용하여 함수의 컨텍스트를 쉽게 다시 반응 할 수 있습니다. 이것은 예측할 수없는 행동으로 이어지고 종종 콜백이 많은 코드 전체에서 과도한
호출을 초래합니다. 문제 <.> 반응의
• 의 사용은 구성 요소 컨텍스트를 참조 하여이 모호성을 상속합니다. 이 일반적인 반응 패턴을 고려하십시오 : this this 는 this가 함수가 아니기 때문에 a
를 생성합니다. Promise Callback은 함수의 내부 컨텍스트를 변경하여
• 가 잘못된 객체를 참조하게합니다. 솔루션을 탐색합시다. 솔루션 this 이러한 솔루션은 확립 된 JavaScript 기술에서부터 반응 특정 방법 및 새로운 (잠재적으로 지원되지 않는) 기능에 이르기까지 다양합니다. 1. 별칭
장기적인 접근 방식은 구성 요소의 최상위 레벨에서 두 번째

참조를 작성하는 것과 관련이 있습니다.

단순하고 쉽게 이해할 수있는 이것은 올바른 맥락에 대한 명확한 시각적 보장을 제공합니다. 반 직관적 인 것처럼 보이지만 효과적이고 간단합니다. this new 2. 이것을 Function.prototype에 묶으십시오 이 메소드는 런타임시 콜백에 올바른 컨텍스트를 주입합니다. .bind(this) 모든 JavaScript 함수에는

를 지정하는 메소드가 있습니다. 일단 결합되면 컨텍스트를 재정의 할 수 없으므로

가 올바른 객체를 참조하십시오. 그러나이 접근법은 덜 읽기 쉬우 며 깊게 중첩 된 비동기 코드에서 번거롭게되며 각 함수에 대한 수동 바인딩이 필요합니다. 3. 반응 구성 요소 메소드

반응 구성 요소는 를 사용할 때 올바른 컨텍스트와 자동으로 바인딩되는 메소드를 정의 할 수 있습니다. 이를 통해 콜백 로직을 구성 요소로 이동할 수 있습니다 간단한 구성 요소에 우아한 이는 클리너 코드를 촉진하고 컨텍스트 문제를 제거합니다. 이 자서전

는

es2015 클래스에 적용되지 않습니다. 대체 방법이 필요합니다. 불필요하게 this 구성 요소 방법에 대해 RECT가 경고합니다. React.createClass 4. ES2015 화살표 함수

es2015 화살표 함수 ()는 간결하고

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
});

를 상속받는 범위에서 <🎜

를 상속합니다 : <🎜 🎜> <<>는 둥지 레벨에 관계없이 정확하게 유지됩니다. 단점은 기능 명명, 방해 디버깅 (스택 트레이스 표시 "(익명 함수)")의 손실입니다. 바벨 컴파일은 종종 별칭을 사용 하여이 접근법을 사용하여 컨텍스트를 유지합니다. .bind(this) <🎜 🎜> <<> 5. ES2016 BIND 구문 (제안) <🎜 🎜> <🎜 🎜> 제안 된 ES2016 (ES7) BAND 삭스는

를 사용하여 함수를 주어진 <🎜 값에 바인딩합니다. 예를 들면 :

흥미롭지 만,이 구문은 널리 지원되지 않으며 와 비슷한 단점을 겪고 종종 동일한 결과로 컴파일합니다.

.

<<> 6. 메소드 별 접근 방식 <🎜 🎜> => 일부 함수는 명시 적 this 인수를 전달할 수 있습니다 (예 : <🎜 🎜>의 최종 인수) : <🎜 🎜>

이것은 일관성이 없습니다. 대부분의 기능에는이 기능이 부족합니다.

const component = this;
component.setState({ loading: true });

fetch('/').then(function loaded() {
  component.setState({ loading: false });
});

결론

this 컨텍스트를 관리하기위한 여러 접근법이 존재합니다. 별칭으로 성능의 우선 순위를 정하고 구성 요소 메소드 또는 명명 된 기능으로 쉽게 디버깅하고 짧은 인라인 코드를 위해 화살표 기능과의 간결합니다. 최선의 선택은 우선 순위와 코딩 스타일에 따라 다릅니다. 가독성과 유지 관리를 방해하는 지나치게 복잡한 솔루션을 피하십시오

자주 묻는 질문 (faqs)

(FAQ는 원래 텍스트로 크게 다루어서 이미 포괄적 인 응답의 길이를 크게 증가시킬 것이므로 간결하게 생략됩니다. 원래 FAQ는이 주제에 대한 우수한 적용 범위를 제공합니다.)

위 내용은 6 가지 JavaScript를 바인딩하는 6 가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!