JavaScript 화살표 기능과 '이'바인딩을 이해합니다

이 바인딩에서 화살표 함수와 일반 기능 사이에는 주요 차이점이 있습니다. 1. 화살표 함수는 자체적으로 결합하는 것이 아니라 주변 범위, 즉 어휘 범위에서 물려받습니다. 2. 일반적인 기능 의이 기능은 통화 방법에 따라 다르며, 이는 종종 콜백의 글로벌 객체를 가리 키게합니다. 3. 화살표 기능을 사용하면 이러한 문제를 피할 수 있으며, 이는 이러한 일관성을 유지하는 데 적합합니다. 4. 화살표 함수가 권장되지 않는 상황에는 객체 방법, 생성자 및 이벤트 처리와 같은 동적이 필요한 시나리오가 포함됩니다. 5. 프로토 타입 방법에서 화살표 함수를 사용하면 인스턴스가 아니라 외부 범위를 가리 킵니다.

JavaScript의 화살표 기능은 기능 표현을 작성하는 더 짧은 방법처럼 보일 수 있지만 많은 개발자를 여행하는 한 가지 주요 차이점이 있습니다. 즉, this 키워드를 처리하는 방법.

일반 함수와 달리 화살표 기능에는 자체 this 없습니다. 대신, 그들은 주변 상황에서 그것을 물려받습니다. 사용 방법과 위치에 따라 매우 편리하거나 혼란 스러울 수 있습니다.

'이것'이 정기적으로 작동하는 방법

정상 함수에서, this 의 값은 함수가 호출되는 방식 에 따라 다릅니다. 그렇기 때문에이 내부 this 또는 메소드를 사용할 때 종종 혼란을 겪는 이유입니다.

예를 들어:

 const user = {
  이름 : "Alex",
  인사 : function () {
    settimeout (function () {
      Console.log ( "Hello,"this.name); 
    }, 100);
  }
};

user.greet (); // 안녕하세요, 정의되지 않았습니다

setTimeout 내부에서는 this 이상 user 객체를 의미하지 않습니다. 비 스트릭 모드에서는 글로벌 객체 (브라우저의 window )을 가리 킵니다. 즉, this.name undefined .

이를 해결하기 위해 개발자는 다음과 같은 작업을 수행했습니다.

 const self = this;
settimeout (function () {
  Console.log ( "hello,"self.name); 
}, 100);

또는 this 명시 적으로 묶습니다.

화살표 기능은 '이'어휘를 캡처합니다

이제 화살표 기능을 입력하십시오. 그것은 자체적 this 묶지 않습니다. 대신, 가장 가까운 비 인식 상위 기능 에서이 this 을 사용합니다. 이것을 어휘 스코핑이라고합니다.

화살표 기능으로 이전 예제를 다시 작성하십시오.

 const user = {
  이름 : "Alex",
  인사 : function () {
    settimeout (() => {
      Console.log ( "Hello,"this.name); 
    }, 100);
  }
};

user.greet (); // 안녕하세요, 알렉스

훨씬 깨끗합니다. 화살표 함수는 자체 this 를 생성하지 않으므로 this.name user 객체를 올바르게 나타냅니다.

이 동작은 화살표 기능이 this 보존하려는 짧은 콜백에 이상적입니다.

화살표 기능을 사용하지 않을 때

화살표 기능은 this 에 적합하지만 항상 올바른 선택은 아닙니다.

다음은 피해야 할 몇 가지 상황입니다.

• 객체 방법으로 ( this 외부를 캡처하지 않는 한)
• 생성자로서 - 화살표 함수는 new 와 함께 사용할 수 없습니다.
• 이벤트 핸들러 또는 DOM 메소드와 같이 this 가 필요할 때

예를 들어:

 const button = document.querySelector ( 'button');

button.addeventListener ( 'click', () => {
  Console.log (this); // 버튼이 아닌 Window/Global
});

클릭 된 요소를 참조 할 것으로 예상 this 경우 대신 일반 기능을 사용하십시오.

 button.adeventListener ( 'click', function () {
  Console.log (this); // 버튼 요소
});

프로토 타입 방법에 대한 빠른 메모

또한 인스턴스를 참조 할 것으로 예상 this 경우 프로토 타입 메소드를 정의 할 때 화살표 기능을 사용할 수 없습니다.

 기능인 (이름) {
  this.name = 이름;
}

person.prototype.sayhi = () => {
  Console.log ( "Hi,"this.name);
};

const p = 새로운 사람 ( "Jamie");
p.sayhi (); // 안녕하세요, 정의되지 않았습니다

다시 말하지만, 화살표 함수에는 this 가 없기 때문에 외부 범위를 나타냅니다. 여기에는 전역 객체 일 수 있습니다.

예, 화살표 기능은 .bind() 또는 self = this 사용하지 않고도 일관성 this 유지하는 데 좋습니다. 그러나 그들은 모든 곳에서 드롭 인 교체품이 아닙니다. 특히 기능이 호출되는 방식에 따라 this 변경되기를 원할 때.

어휘 this 사용하면 코드를 단순화하는 데 도움이되고 역동적 this 경우 일반 기능을 고수하십시오.

기본적으로 그게 다야.

위 내용은 JavaScript 화살표 기능과 '이'바인딩을 이해합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!