В исходном тексте 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 в некоторых местах (тело функции) и this в других местах (тела функций, определенных в список аргументов методов). В чем дело? Теперь, когда я заметил это однажды, я начну видеть это везде?

Смотрите, это vendWidth

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

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

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

Да, вы увидеть это повсюду. Часто that = this; Глядя на вывод

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

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

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

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

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

wrappedFunc, и в качестве контекста будет использоваться ваша версия this.

Переменная фиксируется встроенными функциями, определенными в методе. this Приятно знать, что существуют альтернативные методы после загрузки, но следует понимать, что они предназначены для совершенно иной цели ;, а именно для изменения DOM после того, как он был создан и для него выделена память , Использование этих методов по своей природе более ресурсоемко, если ваш сценарий предназначен для написания HTML-кода, из которого браузер в первую очередь создает DOM. this во внешней области.

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

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

Однако теперь наступил 2018 год, и ES6 широко поддерживается всеми основными веб-браузерами. var self = this; было довольно сложным делом, но (Hairbo дал мне идею)

Теперь можно избежать var self = this; MDN docs Функции стрелок Глядя на вывод

В тех случаях, когда мы использовали бы 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 и просто принять включающую область.

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

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

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

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

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

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) ;