> 웹 프론트엔드 > JS 튜토리얼 > Arrow 함수는 JavaScript에서 `this` 키워드를 어떻게 처리합니까?

Arrow 함수는 JavaScript에서 `this` 키워드를 어떻게 처리합니까?

Patricia Arquette
풀어 주다: 2024-12-10 10:19:10
원래의
514명이 탐색했습니다.

How Do Arrow Functions Handle the `this` Keyword in JavaScript?

화살표 함수와 'this'

ES6에서 화살표 함수는 메소드 정의에 대한 새로운 접근 방식을 도입합니다. 그러나 'this' 키워드에 액세스할 때 화살표 함수와 기존 함수 사이에는 눈에 띄는 차이가 있습니다.

문제:

다음 코드를 고려하세요.

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

person.shout() // Should print out my name is jason
로그인 후 복사

의도된 결과는 "my name is jason"을 인쇄하는 것이지만 콘솔에서는 "my name is jason"만 출력합니다. 이다." 이는 화살표 함수가 'this' 바인딩 측면에서 기존 함수와 다르게 동작하기 때문입니다.

설명:

기존 함수와 달리 화살표 함수는 ' this' 키워드를 포함 범위에 추가합니다. 대신, 주변 컨텍스트에서 'this' 바인딩을 상속합니다. 위의 예에서 화살표 함수의 'this'는 'person' 객체가 아닌 전역 객체를 참조합니다.

해결책:

여러 가지가 있습니다. 이 문제를 해결하는 방법:

  1. 경계 사용 기능:
// Bind 'this' to the 'person' object
var shoutBound = function() { console.log("my name is ", this.name); }.bind(person);

// Assign the bound function to the 'shout' property
person.shout = shoutBound;
로그인 후 복사
  1. 기존 기능 사용:
// Define a traditional function with 'this' bound to 'person'
person.shout = function() { console.log("my name is ", this.name); };
로그인 후 복사
  1. 사용 ES6 방법 선언:
// ES6 method declaration implicitly binds 'this' to the object
person = {
  name: "jason",

  shout() {
    console.log("my name is ", this.name);
  }
};
로그인 후 복사

'this' 바인딩과 관련된 화살표 함수의 다양한 동작을 이해하면 ES6에서 효과적이고 유연한 코드를 작성할 수 있습니다.

위 내용은 Arrow 함수는 JavaScript에서 `this` 키워드를 어떻게 처리합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿