중첩 함수 수수께끼의 Javascript "this" 포인터

웹 개발 시나리오에서 중첩 함수 내의 "this" 포인터 동작 당황스러울 수 있다. 다음 코드를 고려하십시오.

var std_obj = {
  options: {rows: 0, cols: 0},
  activeEffect: "none",
  displayMe: function() {
    // this refers to std_obj
    if (this.activeEffect == "fade") {}

    var doSomeEffects = function() {
      // this surprisingly refers to window object
      if (this.activeEffect == "fade") {}
    }

    doSomeEffects();
  }
};

std_obj.displayMe();

위 코드에서 중첩 함수 "doSomeEffects()" 내부의 "this" 포인터가 예기치 않게 "window" 개체를 가리킵니다. 이 동작은 중첩된 함수가 "this"가 "std_obj"를 참조하는 외부 함수의 범위를 상속할 것이라는 기대와 모순됩니다.

Javascript 함수 호출 및 범위 이해

Javascript 함수에서 "this"의 동작은 함수가 호출되는 방식에 따라 달라집니다. 일반적으로 세 가지 방법이 있습니다:

1. 메서드 호출: someThing.someFunction(arg1, arg2, argN)
2. Function.call 호출: someFunction.call(someThing, arg1, arg2, argN)
3. Function.apply 호출: someFunction.apply(someThing, [arg1, arg2, argN])

이 모든 호출에서 "this " 개체는 "someThing"이 됩니다. 그러나 상위 상위 개체 없이 함수를 호출하면(예: 이 예에서는 doSomeEffects()) 일반적으로 "this" 개체가 전역 개체로 설정되며, 대부분의 브라우저에서는 "window" 개체입니다.

예제 코드에서 중첩된 함수 "doSomeEffects()"는 상위 개체 없이 호출되므로 전역 범위를 상속하고 "this" 포인터가 "window" 개체를 가리킵니다. 이것이 예상치 못한 동작을 관찰하는 이유입니다.

중첩 함수가 "std_obj" 범위에 액세스할 수 있는지 확인하려면 "std_obj" 개체를 함수로 사용하여 Function.call() 메서드를 사용하여 이를 호출할 수 있습니다. 첫 번째 인수:

var doSomeEffects = function() {
  // this now refers to std_obj
  if (this.activeEffect == "fade") {}
}

doSomeEffects.call(std_obj);

Javascript에서 "this" 포인터 동작의 미묘한 차이를 이해하는 것은 강력하고 유지 관리 가능한 애플리케이션을 구축하는 데 중요합니다.