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

Я видел следующее в источнике для WebKit HTML 5 SQL хранения отмечает демо: 

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;
  // ...
}

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

334
closures javascript scope

10 ответов

посмотреть этот статья о alistapart.com

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

410

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

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

93

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

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

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

34

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

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

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

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

28

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

9

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

9

как пояснил var self = this; позволяет код закрытие вернуться к родительской области.

однако теперь 2018 и ES6 широко поддерживаются всеми основными веб-браузерами. The 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 и просто предположить видимости.

6

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

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

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

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

5

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

0
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.это очень просто.call (thatt);

-1