Указатель this в Javascript в загадке вложенных функций

В сценарии веб-разработки поведение указателя 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();

В приведенном выше коде указатель «this» внутри вложенной функции «doSomeEffects()» неожиданно указывает на объект «окно». Такое поведение противоречит ожиданию того, что вложенная функция унаследует область действия внешней функции, где «this» относится к «std_obj».

Понимание вызова и области действия функции Javascript

Поведение «this» в функциях Javascript зависит от того, как функция вызывается. Как правило, существует три способа:

1. Вызов метода: someThing.someFunction(arg1, arg2, argN)
2. Вызов функции.call: someFunction.call(someThing, arg1, arg2, argN)
3. Function.apply Вызов: someFunction.apply(someThing, [arg1, arg2, argN])

Во всех этих вызовах " объект будет "someThing". Однако вызов функции без ведущего родительского объекта (например, doSomeEffects() в примере) обычно приводит к тому, что объекту «this» присваивается глобальный объект, который в большинстве браузеров является объектом «окно».

В примере кода вложенная функция «doSomeEffects()» вызывается без родительского объекта, поэтому она наследует глобальную область видимости, а ее указатель «this» указывает на объект «окно». Вот почему вы наблюдаете неожиданное поведение.

Чтобы гарантировать, что вложенная функция имеет доступ к области «std_obj», вы можете вызвать ее с помощью метода Function.call() с объектом «std_obj» в качестве объекта первый аргумент:

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

doSomeEffects.call(std_obj);

Понимание тонких нюансов поведения указателя this в Javascript имеет решающее значение для создания надежных и удобных в обслуживании приложений.