Как работает this?

Question

[Iliyaity]

function Note(){

//Зачем присваивается this  и используется в дальнейшем?
// Почему не будет работать так this.onMouseDown(e) ?
//С какой целью в конце возвращается this ?

    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?
    this.note = note;   

    var close = document.createElement('div');
    close.className = 'closebutton';
    close.addEventListener('click', function(event) { return self.close(event) }, false);
    note.appendChild(close);

    var edit = document.createElement('div');
    edit.className = 'edit';
    edit.setAttribute('contenteditable', true);
    edit.addEventListener('keyup', function() { return self.onKeyUp() }, false);
    note.appendChild(edit);


    this.editField = edit;

    var ts = document.createElement('div');
    ts.className = 'timestamp';
    ts.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
    note.appendChild(ts);
    this.lastModified = ts;

    document.body.appendChild(note);


    return this;
}

Answer 1

[Сергей Протько]

Ох...

Для начала нам стоит прояснить что в javascript "методы" это обычные функции, которые просто привязаны к объекту. Если не вдаваться в подробности работы интерпритатора, вы можете спокойно вынести содержимое конструктора и заменить this на экземпляр объекта.

Если совсем упростить - в javascript нет "методов", у объектов могут быть только свойства. "Методы" реализуются присваиванием функции (обычно анонимной) к свойству объекта.

Теперь про this. this - это контекст вызова. Это "волшебная" переменная указывает на контекст, в котором мы вызвали какую-либо функцию. Она никак не фиксируется, и мы можем крутить и вертеть ей как хотим.

По умолчанию она указывает на "владельца" функции. Тот объект, в контексте которого мы вызвали функцию.

function foo() {console.log(this);}

function MyObject() {
    this.foo = foo;
}

var hashMap = {
    foo: foo
};

var obj = {};
var instance = new MyObject();
obj.bar = instance.foo;  // мы можем даже красть методы

foo(); // выведет window, если для браузера и мы вызывали в глобальном контексте
instance.foo(); // выведет instance так как в контексте этого объекта мы это дело и вызывали
hashMap.foo(); // выведет hashMap по той же причине
obj.bar(); // выведет obj опять же потому что мы вызывали функцию в этом контексте
foo.call('my own context') //мы можем задать свой контекст

Зачем присваивается this и используется в дальнейшем?

У функции есть своя область видимости. Ей доступны все переменные/идентификаторы которые определены в ее области видимости и выше в плодь до глобальной. То есть наши обработчики событий будут всегда видеть переменные объявленные в конструкторе. Причем именно то что было на момент вызова конструктора (то есть сохраняется во времени даже после завершения работы функции). Это к слову является типичной проблемой мемориликов, так как иногда люди забывают почистить за собой ссылки на объекты.

У нас конечно есть еще функция bind, которая позволяет явно зафиксировать контекст, но иногда удобнее так.

Именно за счет областей видимости функций в javascript мы достигаем инкапсуляции, скрываля приватные штуки внутри нашей области видимости и выплевывая наружу только то, что нужно. Самая настоящая инкапсуляция, модификаторы доступа в этом плане - просто кастыли (хотя для восприятия они проще).

Comments

[Илья Пирожок]

То есть в общем говоря this указывает на объект в котором вызван метод? И не важно где этот метод\функция находилась прежде?

[Сергей Протько]

kamikadze1996: да, указывает на текущий объект владелец, и без разницы что было до момента вызова

[Iliyaity]

Сергей Протько: Спасибо!Круто объяснили! А зачем в конце возвращается this? Какой в этом смысл?

[Алексей]

Iliyaity: просто функция что-то делает с this, вот его изменённый и возвращает Например lastmodifide меняет

[Сергей Протько]

Алексей: ну это ссылка на объект, так что смысла "возвращать" ее нет, изменения всеравно будут доступны.

Iliyaity: потому что такой вот код. В Javascript конструктор это просто функция. Если вы вызываете ее через оператор new, внутри происходит немного магии с копирование прототипа, но конструктор всеравно просто функция. По умолчанию если мы явно не возвращаем значения, нам всеравно возвращается this, но мы можем вернуть все что угодно, хоть строку или другой объект если явно пропишем return. В целом обычно за return в конструкторе в приличных обществах бьют по рукам.

[Iliyaity]

Алексей: Без этой строчки тоже все работает. То есть нужно каждый раз этот прописывать если нам нужен видоизмененный объект?

[Iliyaity]

Сергей Протько: Вот теперь все встало на свои места !)

[Дмитрий Беляев]

Iliyaity: return this как правило пишут для организации цепных вызовов, чтобы можно было вызвать несколько методов у объекта по цепочке:
obj.method1().method2().method3();
вместо:
obj.method1();
obj.method2();
obj.method3();

[Сергей Протько]

Дмитрий Беляев: но не в конструкторе же объекта. Там и так идет возврат контекста.

[Дмитрий Беляев]

Сергей Протько: насчет конструктора согласен, плохо что-то ретёрнить из конструктора

[Iliyaity]

Сергей Протько: Можете мне помочь с тестовым заданием?)

[Сергей Протько]

Iliyaity: нет. Оно же ваше тестовое задание. Если я вам помогу значит вы не справились.

Answer 2

[lega]

Тут простое объяснение, 2 дня назад спрашивали.