JavaScript에서 이 키워드 이해하기

JavaScript의 this 키워드

this 키워드는 JavaScript의 가장 강력하지만 오해를 받는 기능 중 하나입니다. 함수가 실행되는 맥락을 말하며, 함수가 어떻게 호출되는지에 따라 달라질 수 있습니다.

1. 이게 뭐죠?

이 값은 실행 컨텍스트, 즉 함수가 실행되는 환경에 따라 결정됩니다. 일반적으로 객체를 참조하지만 정확한 값은 함수가 호출되는 방법과 위치에 따라 다릅니다.

2. 작동 원리

아. 글로벌 컨텍스트

전역 실행 컨텍스트(함수 외부)에서 이는 전역 개체를 나타냅니다.

• 브라우저에서: 창
• Node.js: 전역

예:

console.log(this); 
// In a browser: window
// In Node.js: global

베. 일반 함수 내부

전역 범위에서 함수가 호출되면 기본값은 전역 개체(비엄격 모드)입니다. 엄격 모드에서는 정의되지 않습니다.

예:

function showThis() {
  console.log(this);
}

showThis(); 
// Non-strict mode: window (global object)
// Strict mode: undefined

ㄷ. 객체 메소드 내부

객체의 메소드로 함수를 호출할 경우 객체 자체를 의미합니다.

예:

const obj = {
  name: "JavaScript",
  getName: function () {
    console.log(this.name);
  },
};

obj.getName(); // Output: JavaScript

디. 생성자 함수 내부

생성자 함수에서는 새로 생성된 객체를 의미합니다.

예:

function Person(name) {
  this.name = name;
}

const john = new Person("John");
console.log(john.name); // Output: John

E. 화살표 함수 내부

화살표 함수에는 자체 this가 없습니다. 대신 주변 어휘 범위에서 이를 상속받습니다.

예:

const obj = {
  name: "JavaScript",
  getName: function () {
    const arrowFunc = () => console.log(this.name);
    arrowFunc();
  },
};

obj.getName(); // Output: JavaScript

3. 이것을 바인딩

호출, 적용 또는 바인드를 사용하여 이 값을 명시적으로 설정할 수 있습니다.

아. 통화 이용

개별적으로 제공된 특정 this 값과 인수를 사용하여 함수를 호출합니다.

예:

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Alice" };
greet.call(user, "Hello"); // Output: Hello, Alice

베. 적용 사용

호출처럼 작동하지만 인수를 배열로 사용합니다.

예:

greet.apply(user, ["Hi"]); // Output: Hi, Alice

ㄷ. 바인딩 사용

지정된 개체에 영구적으로 설정된 새 함수를 반환합니다.

예:

const boundGreet = greet.bind(user);
boundGreet("Hey"); // Output: Hey, Alice

4. 일반적인 사용 사례

아. 이벤트 핸들러

이벤트 리스너에서는 이벤트를 발생시킨 요소를 의미합니다.

예:

console.log(this); 
// In a browser: window
// In Node.js: global

베. 동적 객체 방법

이를 통해 객체는 동적으로 메소드를 공유할 수 있습니다.

예:

function showThis() {
  console.log(this);
}

showThis(); 
// Non-strict mode: window (global object)
// Strict mode: undefined

ㄷ. 수업방법

클래스에서는 현재 인스턴스를 의미합니다.

예:

const obj = {
  name: "JavaScript",
  getName: function () {
    console.log(this.name);
  },
};

obj.getName(); // Output: JavaScript

5. 일반적인 함정과 모범 사례

아. 맥락 상실

메서드를 변수에 할당하면 원래 컨텍스트가 손실될 수 있습니다.

예:

function Person(name) {
  this.name = name;
}

const john = new Person("John");
console.log(john.name); // Output: John

해결책: 바인드 또는 화살표 기능을 사용하세요.

const obj = {
  name: "JavaScript",
  getName: function () {
    const arrowFunc = () => console.log(this.name);
    arrowFunc();
  },
};

obj.getName(); // Output: JavaScript

베. 콜백 함수에서

콜백 내부의 이 내용은 종종 컨텍스트를 잃습니다.

예:

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Alice" };
greet.call(user, "Hello"); // Output: Hello, Alice

해결책: 화살표 기능을 사용하세요.

greet.apply(user, ["Hi"]); // Output: Hi, Alice

6. 요약

• 이는 함수의 실행 컨텍스트를 나타냅니다.
• 화살표 함수에서 이는 어휘 범위에서 상속됩니다.
• 이 값을 명시적으로 설정하려면 호출, 적용 또는 바인딩을 사용하세요.
• 코드의 버그를 방지하려면 이것이 다양한 상황에서 어떻게 작동하는지 이해하세요.

이것을 마스터하면 JavaScript의 동작을 더 깊이 이해하고 더욱 명확하고 예측 가능한 코드를 작성할 수 있습니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

위 내용은 JavaScript에서 이 키워드 이해하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!