JavaScript «это» Gotchas

В моем предыдущем посте мы рассмотрели this Сегодня мы рассмотрим несколько ситуаций, в которых this

1. Забыть «новое»

Рассмотрим следующий код:

 
window.WhoAmI = "I'm the window object";

function Test() {
  this.WhoAmI = "I'm the Test object";
}

var t = Test();
alert(window.WhoAmI); // I'm the Test object
alert(t.WhoAmI); // t is undefined

Что мы действительно имели в виду:

 
var t = new Test();

Пропуск new Другие языки выдают ошибку, когда сталкиваются с прямым вызовом конструктора, но JavaScript просто воспринимает это как любой другой вызов функции. thisTest()tundefined

Эту ситуацию можно исправить, если вы пишете библиотеку JavaScript для сторонних разработчиков. См. Исправление экземпляров объектов в JavaScript .

2. Модуль безумия

Этот даст вам головную боль. Изучите следующий код, который использует шаблон модуля:

 
window.WhoAmI = "I'm the window object";

var Module = function() {

  this.WhoAmI = "I'm the Module object";

  function Test() {
    this.WhoAmI = "I'm still the Module object";
  }

  return {
    WhoAmI: WhoAmI,
    Test: Test
  };

}();

alert(Module.WhoAmI); // I'm the Module object
alert(window.WhoAmI); // I'm the Module object
Module.Test();
alert(Module.WhoAmI); // I'm still the Module object

Код выглядит логичным — так почему же window.WhoAmI

Нам нужно помнить, что у нас есть самореализуемая функция. Его результаты возвращаются в переменную Module следовательно, это глобальный объект окна. Другими словами, thisthis.WhoAmIwindow.WhoAmI

Функция возвращает объект JavaScript со свойством "I'm the Module object"WhoAmI Но к чему это относится? В этом случае интерпретатор JavaScript 'WhoAmI'window.WhoAmI"I'm the Module object"

Наконец, мы запускаем метод Test() Тем не менее, ModuleTestthisModuleWhoAmI

Таким образом, избегайте использования this Тебе это никогда не нужно.

3. Метод заблуждений

Вот еще один шаблон JavaScript, который будет связан с вашими синапсами:

 
var myObject = {};

myObject.method = function() {

  this.WhoAmI = "I'm myObject.method";

  function Test() {
    this.WhoAmI = "I'm myObject.method.Test()";
  }

  Test();

  return this.WhoAmI;
};

alert(myObject.method()); // I'm myObject.method

В этом примере Test()myObject.method() На первый взгляд, вы ожидаете, что thisTest()myObject Это не так: это относится к глобальному объекту окна, так как это просто другая функция.

Если вы хотите сослаться на myObject

 
var myObject = {};

myObject.method = function() {

  this.WhoAmI = "I'm myObject.method";
  var T = this;

  function Test() {
    T.WhoAmI = "I'm myObject.method.Test()";
  }

  Test();

  return this.WhoAmI;
};

alert(myObject.method()); // I'm myObject.method.Test()

4. Методы ссылок

Вот небольшой код, который, к счастью, будет работать именно так, как вы ожидаете:

 
var myObject = {};

myObject.WhoAmI = "I'm myObject";

myObject.method = function() {
  this.WhoAmI = "I'm myObject.method";
};

// examine properties
alert(myObject.WhoAmI); // I'm myObject
myObject.method();
alert(myObject.WhoAmI); // I'm myObject.method

Давайте сделаем небольшое изменение и назначим myObject.method

 
// examine properties
alert(myObject.WhoAmI); // I'm myObject
var test = myObject.method;
test();
alert(myObject.WhoAmI); // I'm myObject

Почему myObject.WhoAmI В этом случае вызов test()thismyObject

Если вы думаете, что это противно, подождите, пока мы не взглянем на обработчики событий JavaScript в моем следующем посте!