Що лежить в основі цієї ідіоми JavaScript: var self = this?

У джерелі для демонстрації нотаток зберігання SQL 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;
  // ...
}

Автор використовує себе в деяких місцях (функція тіла) і це в інших місцях (тіла функцій , визначені в списку аргументів методів). Що відбувається? Тепер, коли я помітив це один раз, я почну його бачити всюди?

Дивіться цю статтю на 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()функція закінчиться, полягає в тому, що внутрішні функції отримують контекст зовнішньої функції через закриття .

Слід також зазначити, що існує альтернативна схема проксі для підтримки посилання на оригінал 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, щоб зберегти це, що їм потрібно у внутрішній функції.

Насправді "я" - це посилання на window ( window.self), тому, коли ви говорите, що var self = 'something'ви переосмислюєте посилання на вікно на себе - тому що "self" існує в об'єкті window.

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

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

Тому вам слід використовувати щось на зразок var oldThis/ var oThis/ тощо - щоб було зрозуміло у вашому масштабі // .., це не так вже й багато, але заощадить кілька секунд та кілька циклів мозку

Як уже згадувалося кілька разів вище, "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);