\'this\' 키워드가 일반 함수와 화살표 함수에서 다르게 동작하는 이유

JavaScript의 this 키워드는 일반 함수와 화살표 함수에서 다르게 동작하기 때문에 혼동될 수 있습니다. 이 블로그 게시물에서는 이것이 두 가지 유형의 함수에서 어떻게 작동하는지 설명하고, 이러한 차이점이 존재하는 이유를 탐색하고, JavaScript에서 이를 이해하는 데 필요한 기본 지식을 제공합니다.

일반 함수

JavaScript의 일반 함수는 function 키워드를 사용하여 정의됩니다. 이러한 함수에서 this의 값은 함수가 호출되는 방식에 따라 달라집니다. 다음은 몇 가지 예입니다.

1. 글로벌 컨텍스트

• 비엄격 모드:

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

  regularFunction(); // Logs the global object (window in browsers)

• 설명: 비엄격 모드에서 함수가 전역 컨텍스트(객체의 메서드가 아님)에서 호출될 때 이는 전역 객체(브라우저의 창 또는 노드의 전역)를 나타냅니다. .js).

  • 엄격 모드:

  'use strict';

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

  regularFunction(); // Logs undefined

• 설명: 엄격 모드에서는 전역 컨텍스트에서 함수가 호출될 때 정의되지 않은 상태로 유지되어 실수로 전역 개체가 수정되는 것을 방지하여 더 안전한 환경을 제공합니다.

2. 메소드 호출

객체의 메소드로 함수를 호출할 경우 해당 객체를 참조합니다.

• 예:

  const obj = {
      method: function() {
          console.log(this);
      }
  };

  obj.method(); // Logs obj

• 설명: 이 경우 함수가 obj의 메소드로 호출되기 때문에 이는 obj를 가리킵니다.

  • 엄격 모드: 엄격 모드에서도 동작은 동일하게 유지됩니다.

3. 생성자 호출

함수를 생성자로 사용하는 경우(new 키워드로 호출) 새로 생성된 인스턴스를 참조합니다.

• 예:

  function Person(name) {
      this.name = name;
      this.sayHello = function() {
          console.log(`Hello, my name is ${this.name}`);
      };
  }

  const person1 = new Person('Alice');
  person1.sayHello(); // Logs "Hello, my name is Alice"

  const person2 = new Person('Bob');
  person2.sayHello(); // Logs "Hello, my name is Bob"

• 설명: new로 호출할 때 Person 생성자 함수 내부의 this는 생성되는 새 인스턴스를 참조합니다. 각각의 새 인스턴스(person1 및 person2)는 고유한 이름 속성과 sayHello 메서드를 갖습니다.

  • 엄격 모드: 엄격 모드에서도 동작은 동일하게 유지됩니다.

4. 명시적 바인딩

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

• 예:

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

  const obj = { value: 42 };

  regularFunction.call(obj);  // Logs obj
  regularFunction.apply(obj); // Logs obj

  const boundFunction = regularFunction.bind(obj);
  boundFunction();            // Logs obj

• 설명: 호출하고 적용하면 이 값이 obj로 설정된 함수가 즉시 호출되고, 바인딩은 이 값이 obj에 영구적으로 바인딩된 새 함수를 생성합니다.

  • 엄격 모드: 엄격 모드에서도 동작은 동일하게 유지됩니다.

화살표 기능

ES6에 도입된 화살표 함수에는 자체 this 컨텍스트가 없습니다. 대신, 주변(어휘) 범위에서 이를 상속받습니다. 이는 특정 상황에서 화살표 기능을 유용하게 만듭니다.

1. 어휘적

화살표 함수는 정의된 범위에서 이를 상속받습니다.

• 비엄격 모드:

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs the global object (window in browsers)

• 설명: 화살표 함수에는 자체 this가 없습니다. 그들은 이것을 주변 범위에서 사용합니다. 여기서는 함수가 전역 범위에 정의되어 있으므로 전역 개체를 참조합니다.

  • 엄격 모드:

  'use strict';

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs undefined

• 설명: 엄격 모드에서 주변 범위가 전역인 경우 주변 범위에서 상속되어 정의되지 않은 상태로 유지됩니다.

2. 메소드 호출

일반 함수와 달리 화살표 함수는 메서드로 호출될 때 자체 this를 가져오지 않습니다. 이는 바깥쪽 범위에서 상속됩니다.

• 예:

  const obj = {
      method: () => {
          console.log(this);
      }
  };

  obj.method(); // Logs the global object (window in browsers) or undefined in strict mode

• 설명: 화살표 함수는 자체 this를 바인딩하지 않고 어휘 범위에서 상속합니다. 이 예에서는 obj가 아닌 전역 객체 또는 엄격 모드에서 정의되지 않은 객체를 나타냅니다.

  • 엄격 모드: obj가 아닌 정의되지 않은 로그

3. 다른 함수 안의 화살표 함수

화살표 함수가 다른 함수 내부에 정의되면 외부 함수에서 이를 상속받습니다.

• 예:

  function outerFunction() {
      const arrowFunction = () => {
          console.log(this);
      };

      arrowFunction();
  }

  const obj = { value: 42, outerFunction: outerFunction };

  obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction

• 설명: 이 경우 화살표 함수 내부의 this는 externalFunction의 this와 동일한 것을 의미하며 obj입니다.

  • 엄격 모드: 엄격 모드에서도 동작은 동일하게 유지됩니다.

4. 이벤트 핸들러의 화살표 기능

이벤트 핸들러의 화살표 함수는 이벤트를 트리거하는 요소가 아닌 주변 어휘 범위에서 이를 상속합니다.

• Example:

  const button = document.querySelector('button');

  button.addEventListener('click', () => {
      console.log(this);
  }); // Logs the global object (window in browsers) or undefined in strict mode

• Explanation: The arrow function does not bind this to the button element; it inherits it from the surrounding scope, which is the global scope or undefined in strict mode.

  • Strict Mode: Logs undefined, not the button element.

Why These Differences?

The difference between regular functions and arrow functions lies in how they handle this:

• Regular Functions: The value of this is dynamic and determined by the call-site (how the function is called).
• Arrow Functions: The value of this is lexical and set at the time the function is defined, based on the this value of the enclosing execution context.

Key Concepts to Understand

To understand the behavior of this in JavaScript, you need to know the following concepts:

1. Execution Context: The context in which code is executed, affecting how this is determined.
2. Call-site: The location in code where a function is called, influencing the value of this in regular functions.
3. Lexical Scoping: How this is inherited in arrow functions from the surrounding scope.
4. Strict Mode: How strict mode changes the default behavior of this in certain contexts.

Summary

• Regular Functions: this is dynamic and determined by the call-site.
• Arrow Functions: this is lexical and determined by the surrounding scope when the function is defined.

Understanding these distinctions will help you write more predictable and maintainable JavaScript code. Whether you're using regular functions or arrow functions, knowing how this works is crucial for effective JavaScript development.

위 내용은 \'this\' 키워드가 일반 함수와 화살표 함수에서 다르게 동작하는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!