'이'는 무엇입니까? JavaScript의 키워드 및 컨텍스트에 따라 가치가 어떻게 변합니까?

JavaScript의 "이"키워드를 이해합니다

JavaScript this 키워드는 현재 함수를 실행하는 객체를 나타냅니다. 그 값은 고정되지 않으며 함수 호출 방식에 따라 동적으로 변경됩니다. JavaScript 프로그래밍에서 일반적인 오류를 피하기 위해 이러한 동적 동작을 이해하는 것이 중요합니다. this 의 값은 컴파일 타임이 아닌 런타임 에 결정됩니다. 이는 그 값이 함수가 호출되는 컨텍스트에 따라 결정된다는 것을 의미합니다. 단일 정적 정의는 없습니다. 대신, 그것은 네 가지 주요 맥락에 따라 다릅니다.

1. 글로벌 컨텍스트 : 비 스트릭 모드 환경에서 객체 (예 : 독립형 함수 호출)와 관련이없는 함수가 호출되면 this 글로벌 객체 (브라우저의 창 또는 node.js의 글로벌)를 나타냅니다. 엄격한 모드 ( 'use strict'; )에서는 this 시나리오에서 undefined .
2. 메소드 컨텍스트 : 함수를 객체 (예 : object.method() )의 메소드로 호출하면 this 자체를 나타냅니다. 이것은 가장 일반적이고 간단한 사용법입니다.
3. 생성자 컨텍스트 : new 키워드로 호출 된 생성자 함수 내부에서는 새로 생성 된 개체 this 를 나타냅니다. 이것은 JavaScript의 객체 지향 프로그래밍의 기본입니다.
4. 명시 적 바인딩 : call() , apply() 및 bind() 와 같은 메소드를 사용 하여이 this 을 명시 적으로 설정할 수 있습니다. 이 방법을 사용하면 기본 컨텍스트 결정을 재정의하여 지정된 this 값으로 함수를 호출 할 수 있습니다.

화살표 기능 과이 바인딩

예, 화살표 기능 ( => ) this 바인딩을 관리 할 때 중요한 이점을 제공합니다. 일반 함수와 달리 화살표 함수에는 자체 this 없습니다 . 대신, 그들은 this 주변 (공동) 범위에 어휘를 묶습니다. 이것은 화살표 함수 내부의 this 이 화살표 함수가 정의 되는 위치에 따라 결정되는 위치가 아니라 결정되는 것을 의미합니다. 이 동작은 this 관련된 공통된 많은 함정을 제거합니다.

예를 들어:

 <code class="javascript">const obj = { method: function() { setTimeout(function() { // Regular function, this will be the global object console.log(this); }, 1000); setTimeout(() => { // Arrow function, this will be obj console.log(this); }, 1000); } }; obj.method();</code>

이 코드에서는 일반 setTimeout 콜백이 전역 객체를 기록하는 반면 Arrow 함수 콜백은 obj 객체를 올바르게 기록합니다. 화살표 함수가 주변 범위 ( method 함수) 에서이 this 을 상속하기 때문입니다.

직접 기능 호출 대 메소드 호출

this 값은 함수가 직접 호출 될 때와 메소드로 호출 될 때 크게 다릅니다.

• 직접 기능 호출 : 위에서 설명한 바와 같이, 비 스트릭 모드에서, this 종종 글로벌 객체를 가리킨다. 엄격한 모드에서는 undefined .
• 메소드 호출 : 함수가 객체 (예 : myObject.myMethod() )의 메소드로 호출되면 객체 (이 경우 myObject )를 this 냅니다.

이 예를 고려하십시오 :

 <code class="javascript">function myFunction() { console.log(this); } const myObject = { myMethod: myFunction }; myFunction(); // this likely refers to the global object (or undefined in strict mode) myObject.myMethod(); // this refers to myObject</code>

복잡한 응용 프로그램에서 "이것"을 관리합니다

대형 JavaScript 응용 프로그램에서 this 관리하려면 신중한 계획과 일관된 코딩 관행이 필요합니다. 몇 가지 일반적인 전략은 다음과 같습니다.

• 화살표 기능 : this 바인딩 문제를 피하기 위해 가능할 때마다 자유롭게 화살표 기능을 사용하여 자유롭게 사용합니다.
• 명시 적 바인딩 ( .bind() , .call() , .apply() ) : 이 메소드를 사용하여 필요할 때이 this 을 명시 적으로 설정하여 특히 함수를 콜백 또는 인수로 전달할 때 명시 적으로 설정하십시오. bind() this 값을 영구적으로 바운드로 새로 만든다. call() 및 apply() 지정된 this 값으로 즉시 함수를 호출하십시오.
• 클래스 : ES6 클래스를 사용하면 객체 지향 코드 내에서 this 관리하는 더 깨끗하고 구조화 된 방법이 제공됩니다. 클래스 메소드 내의이 this 는 클래스의 인스턴스를 올바르게 나타냅니다.
• 컨텍스트 보존 라이브러리 : Lodash와 같은 일부 라이브러리는 컨텍스트 및 콜백을보다 효과적으로 관리하는 데 도움이되는 유틸리티 기능을 제공합니다.
• 일관된 코딩 스타일 : 팀 내에서 this 사용하여 일관성을 높이고 오류를 줄이는 명확한 지침을 설정하십시오. 가능한 경우이 this 에 의존하지 마십시오. 명확성 및 예측 가능성을 위해 명시 적 바인딩 또는 화살표 기능을 선호합니다.

이러한 전략을 사용하면 JavaScript 응용 프로그램 의이 this 와 관련된 예기치 않은 동작의 위험을 크게 줄여서보다 강력하고 유지 관리 가능한 코드로 이어질 수 있습니다.

위 내용은 '이'는 무엇입니까? JavaScript의 키워드 및 컨텍스트에 따라 가치가 어떻게 변합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!