JavaScript의 &#this&#가 다른 OOP 언어와 다른 이유

JavaScript의 this 키워드는 특히 self가 현재 개체 인스턴스를 일관되게 참조하는 C#, Java 또는 Python과 같은 언어를 사용하는 개발자에게 혼란을 야기하는 경우가 많습니다. 이러한 언어와 달리 JavaScript의 this은 동적이며 해당 값은 함수의 호출 컨텍스트에 따라 결정됩니다. 이 가이드에는 this의 행동에 영향을 미치는 다양한 시나리오가 요약되어 있습니다.

1. 글로벌 범위:

• 비엄격 모드: this는 전역 개체(브라우저에서는 window, Node.js에서는 global)를 가리킵니다.

<code class="language-javascript">console.log(this); // window or global</code>

• 엄격 모드: this는 undefined입니다.

<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

2. 내부 기능:

• 정규 함수: 비엄격 모드에서 this는 전역 객체를 참조합니다. 엄격 모드에서는 undefined입니다.

<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

3. 객체 메소드:

• 객체 메소드로 함수를 호출할 때 this는 해당 객체를 참조합니다.

<code class="language-javascript">const myObj = {
  name: "JavaScript",
  greet() {
    console.log(this.name); // this refers to myObj
  }
};
myObj.greet(); // Output: JavaScript</code>

4. 화살표 기능:

• 화살표 함수에는 자체 this가 부족합니다. 어휘 범위(주변 컨텍스트)에서 this을 상속합니다.

<code class="language-javascript">const myObj = {
  name: "JavaScript",
  arrowFunc: () => {
    console.log(this.name); // Inherits this from the global scope
  }
};
myObj.arrowFunc(); // undefined (in browsers, this is window)</code>

5. 생성자:

• 생성자 함수 또는 클래스 내에서 this는 새로 생성된 인스턴스를 나타냅니다.

<code class="language-javascript">class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const person = new Person("Alice");
person.greet(); // Output: Hello, Alice</code>

6. 명시적 바인딩(call, apply, bind):

JavaScript 함수는 call을 명시적으로 설정하기 위한 메서드(apply, bind, this)가 있는 개체입니다.

• call 및 apply는 지정된 this 값을 사용하여 함수를 호출합니다. call 쉼표로 구분된 인수를 사용합니다. apply은 배열을 사용합니다.

<code class="language-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</code>

• bind은 this이 영구적으로 바인딩된 새 함수를 반환합니다.

<code class="language-javascript">const boundGreet = greet.bind(user);
boundGreet("Hello"); // Output: Hello, Alice</code>

7. 이벤트 리스너:

• 일반 함수: this는 이벤트를 트리거하는 요소를 나타냅니다.

<code class="language-javascript">const btn = document.querySelector("button");
btn.addEventListener("click", function() {
  console.log(this); // The button element
});</code>

• 화살표 함수: this는 요소가 아닌 주변 범위에서 상속됩니다.

<code class="language-javascript">btn.addEventListener("click", () => {
  console.log(this); // this depends on the arrow function's definition context
});</code>

8. setTimeout / setInterval:

• 일반 함수: this 기본값은 전역 개체입니다.

<code class="language-javascript">setTimeout(function() {
  console.log(this); // window in browsers
}, 1000);</code>

• 화살표 기능: this은 어휘적으로 상속됩니다.

<code class="language-javascript">setTimeout(() => {
  console.log(this); // Inherits this from surrounding context
}, 1000);</code>

9. 수업:

• 클래스 메소드 내에서 this는 클래스 인스턴스를 의미합니다.

<code class="language-javascript">console.log(this); // window or global</code>

10. 컨텍스트 손실(메소드 추출):

메서드를 변수에 할당하거나 이를 콜백으로 전달하면 this바인딩 손실이 발생할 수 있습니다.

<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

해결책: .bind(obj) 또는 화살표 기능을 사용하여 상황을 유지하세요.

11. new 키워드:

함수와 함께 new을 사용하면 새로운 객체가 생성되고 this는 해당 객체를 참조합니다.

<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

요약 표:

컨텍스트

Context	this Refers To
Global (non-strict)	Global object (window/global)
Global (strict)	undefined
Object Method	The object owning the method
Arrow Function	Lexical scope (surrounding context)
Constructor/Class	The instance being created
call, apply, bind	Explicitly defined value
Event Listener	The element triggering the event
setTimeout/setInterval	Global object (regular function), lexical scope (arrow function)
new Keyword	The newly created object

참조 전역(비엄격) 전역 개체(창/전역) 전역(엄격) 정의되지 않음 객체 방법 메소드를 소유한 객체 화살표 기능 어휘 범위(주변 컨텍스트) 생성자/클래스 생성 중인 인스턴스 호출, 적용, 바인딩 명시적으로 정의된 값 이벤트 리스너 이벤트를 실행하는 요소 setTimeout/setInterval 전역 객체(일반 함수), 어휘 범위(화살표 함수)

키워드

새로 생성된 개체 this올바르고 예측 가능한 JavaScript 코드를 작성하려면 이러한 시나리오를 이해하는 것이 중요합니다. 예상치 못한 동작을 방지하려면 필요한 경우 명시적 바인딩과 같은 기술을 활용하는 것을 잊지 마세요.

위 내용은 JavaScript의 &#this&#가 다른 OOP 언어와 다른 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!