JavaScript에서 'this'이해와 다양한 시나리오에서의 행동

javaScript의 키워드에 의해 혼란스러워 본 적이 있습니까? 당신은 혼자가 아닙니다! 그 뉘앙스를 잡는 것은 새로운 기술을 배우는 것과 같습니다. 연습이 필요하지만 일단 얻으면 모든 것이 클릭됩니다.

이 블로그 게시물은

를 해치고, 예시적인 예와 함께 다른 맥락에서 그 행동을 탐구합니다. 시작합시다! this ?

는 this는 함수가 속한 객체를 나타내는 키워드입니다. 런타임시 값을 결정하여 재사용 가능한 동적 기능을 가능하게합니다. 함수 호출의 컨텍스트는

의 값을 지시하여 강력하고 때로는 혼란스럽게 만듭니다.

키 포인트 : this 는 변수가 아닌 키워드입니다 당신은

값은 런타임에 동적으로 결정됩니다

this 실제 비유 : this

상상해보십시오. 미술관에서 가이드는 미술관을 나타냅니다. 역사 박물관에서 그들은 역사 박물관을 대표합니다. 마찬가지로,

는 컨텍스트에 적응합니다 다른 시나리오에서 : 1. 글로벌 컨텍스트 (기본 바인딩) :

외부 함수,

는 글로벌 객체를 나타냅니다. 이것은 환경에 따라 다릅니다
• 브라우저 (엄격한 모드 없음) : this는
객체입니다 node.js 모듈은 고유 한 범위를 가지기 때문에 this (빈 객체)입니다. 예 :
엄격한 모드 :

엄격한 모드에서는

브라우저에 가 남아 있고 node.js. 예 :

this 2. 정기적 인 기능 : this 정기적 인 함수에서 의 값은 함수가 호출되는 방식에 따라 다릅니다.

엄격한 모드가 없으면 > 브라우저에서

객체입니다. Node.js에서는 글로벌 객체입니다. 엄격한 모드에서 > this는 입니다

예 :

3. 내부 객체 메소드 (암시 적 바인딩) : 함수가 객체의 메소드 일 때 는 그 객체를 가리 킵니다. 예 :

this 4. 화살표 기능 :

화살표 함수에는 고유 한

가 없습니다. 그들은 주변 어휘 범위에서 그것을 물려받습니다 예 :

• <code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

  5. 생성자 함수 (새로운 바인딩) : 키워드를 사용하여

  는 새로 생성 된 객체를 나타냅니다. 예 :

  6. 클래스 : new ES6 클래스에서 this는 생성자 함수와 유사하게 동작합니다 예 :

  7. , ,

  (명시 적 바인딩) :

  <code class="language-javascript">'use strict';
  console.log(this); // Browser: window object; Node.js: undefined</code>

  이 방법은

  : 인수를 개별적으로 전달하여 즉시 함수를 호출합니다

  : 와 유사하지만 인수를 배열로 전달합니다. :

  가 특정 객체에 바운드가있는 새 함수를 반환합니다. this 예 :

  8. 이벤트 리스너 : 이벤트 청취자에서 는 일반적으로 이벤트를 트리거 한 요소를 나타냅니다. 예 :

  <code class="language-javascript">function showThis() {
    console.log(this);
  }
  showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

  우선 순위 : call() apply() 새로운 바인딩 bind() 명시 적 바인딩 암시 적 바인딩 기본 바인딩

  this 결론 :

  마스터 링
  • 는 깨끗하고 상황을 인식하는 JavaScript를 작성하는 데 중요합니다. 처음에는 도전적이지만 다양한 시나리오에서 행동을 이해하면보다 효과적이고 유지 관리 가능한 코드를 작성할 수 있습니다. 연습은 핵심입니다! 아래의 의견에서 와 경험을 공유하십시오! call()

위 내용은 JavaScript에서 'this'이해와 다양한 시나리오에서의 행동의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!