Что лежит в основе этой идиомы JavaScript: var self = this?

В исходном тексте для WebKit HTML 5 SQL Storage Notes Demo я увидел следующее :

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

Автор использует себя в некоторых местах (функция тела) и это в других местах (тела функций , определенные в списке аргументов методов). В чем дело? Теперь, когда я заметил это однажды, я начну видеть это везде?

Смотрите эту статью на alistapart.com . (Ред .: статья была обновлена ​​с момента ссылки)

selfиспользуется для сохранения ссылки на оригинал, thisдаже если контекст меняется. Эта техника часто используется в обработчиках событий (особенно в замыканиях).

Изменить: Обратите внимание, что использование selfтеперь не рекомендуется, поскольку window.selfсуществует и может привести к ошибкам, если вы не будете осторожны.

То, что вы называете переменной, не имеет особого значения. var that = this;хорошо, но в названии нет ничего волшебного.

Функции, объявленные внутри контекста (например, обратные вызовы, замыкания), будут иметь доступ к переменным / функциям, объявленным в той же области видимости или выше.

Например, простой обратный вызов события:

function MyConstructor(options) {
  let that = this;

  this.someprop = options.someprop || 'defaultprop';

  document.addEventListener('click', (event) => {
    alert(that.someprop);
  });
}

new MyConstructor({
  someprop: "Hello World"
});

Я думаю, что имя переменной «self» больше не следует использовать таким образом, поскольку современные браузеры предоставляют глобальную переменную,self указывающую на глобальный объект либо обычного окна, либо WebWorker.

Чтобы избежать путаницы и потенциальных конфликтов, вы можете написать var thiz = thisили var that = thisвместо.

Да, вы увидите это повсюду. Это часто that = this;.

Посмотрите, как selfиспользуется внутри функций, вызываемых событиями? У тех был бы собственный контекст, поэтому selfон используется для удержания того, thisчто вошло Note().

Причина selfпо-прежнему доступна для функций, даже если они могут выполняться только послеNote() завершения выполнения функции, в том, что внутренние функции получают контекст внешней функции из-за закрытия .

Следует также отметить, что существует альтернативный шаблон Proxy для сохранения ссылки на оригинал thisв обратном вызове, если вам не нравится эта var self = thisидиома.

Поскольку функцию можно вызывать с заданным контекстом с помощью function.applyили function.call, вы можете написать оболочку, которая возвращает функцию, которая вызывает вашу функцию с использованием applyили callс использованием данного контекста. См. proxyФункцию jQuery для реализации этого шаблона. Вот пример его использования:

var wrappedFunc = $.proxy(this.myFunc, this);

wrappedFuncзатем может быть вызван и будет иметь вашу версию в thisкачестве контекста.

Как уже объяснили другие, var self = this;позволяет коду в замыкании возвращаться к родительской области.

Тем не менее, сейчас 2018 год, и ES6 широко поддерживается всеми основными веб-браузерами. var self = this; идиома не так важна, как раньше.

Теперь можно избежать var self = this;с помощью функций стрелок .

В случаях, когда мы бы использовали var self = this:

function test() {
    var self = this;
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", function() {
        console.log(self.hello); // logs "world"
    });
};

Теперь мы можем использовать функцию стрелки без var self = this:

function test() {
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", () => {
        console.log(this.hello); // logs "world"
    });
};

Функции со стрелками не имеют своих собственных thisи просто принимают вмещающую область.

Переменная фиксируется встроенными функциями, определенными в методе. thisв функции будет ссылаться на другой объект. Таким образом, вы можете заставить функцию содержать ссылку на thisвнешнюю область видимости.

Это причуда JavaScript. Когда функция - это свойство объекта, более точно называемое методом, это относится к объекту. В примере обработчика события содержащий объект является элементом, который вызвал событие. Когда стандартная функция вызывается, это будет относиться к глобальному объекту. Когда у вас есть вложенные функции, как в вашем примере, это вообще не относится к контексту внешней функции. Внутренние функции делят область действия с содержащей функцией, поэтому разработчики будут использовать варианты var that = this, чтобы сохранить то, что им нужно во внутренней функции.

На самом деле self - это ссылка на window ( window.self), поэтому, когда вы говорите, var self = 'something'вы переопределяете ссылку на себя, потому что self существует в объекте window.

Вот почему большинство разработчиков предпочитают var that = thisболееvar self = this;

Тем не мение; var that = this;не соответствует хорошей практике ... предполагая, что ваш код будет пересмотрен / изменен позже другими разработчиками, вы должны использовать самые распространенные стандарты программирования в отношении сообщества разработчиков

Поэтому вы должны использовать что-то вроде var oldThis/ var oThis/ etc - чтобы быть понятным в вашей области действия // .. это не так уж много, но сэкономит несколько секунд и несколько циклов мозга

Как уже упоминалось несколько раз выше, «я» просто используется, чтобы сохранить ссылку на «это» до входа в функцию. Однажды в функции «это» относится к чему-то другому.

function Person(firstname, lastname) {
  this.firstname = firstname;

  this.lastname = lastname;
  this.getfullname = function () {
    return `${this.firstname}   ${this.lastname}`;
  };

  let that = this;
  this.sayHi = function() {
    console.log(`i am this , ${this.firstname}`);
    console.log(`i am that , ${that.firstname}`);
  };
}

let thisss = new Person('thatbetty', 'thatzhao');

let thatt = {firstname: 'thisbetty', lastname: 'thiszhao'};

thisss.sayHi.call (thatt);