Нужно расшифровать код

@koderman · Регистрация: 27.11.2012

Студворк — интернет-сервис помощи студентам

Нашёл код.
Некоторые вещи в нём непонятны, хочется очень их расшифровать.
То что код делает, понятно, вопросы в самом коде.
Помогите пожалуйста.

http://learn.javascript.ru/play/is4l8

Что делается тут?

JavaScript
1
this.onClick.bind(this);

При клике должно выполняться это

JavaScript
1
this.onClick.bind(this);

Это значит так

JavaScript
1
dom.onClick.bind(dom);

Зачем dom передаётся в метод bind ?
----------------------
И как к этой всей функции применяется метод .init() ? Это ведь метод объекта dom и писаться он должен так

JavaScript
1
dom.init();

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
({
    dom: {
        window: window,
        document: document
    },
    writeToConsole: function() {
        console.log.apply(console, arguments);
    },
    showModalWindow: function() {
        alert.apply(this.dom.window, arguments);
    },
    onClick: function(event) {
        var msg = 'x=' + event.pageX + ', y=' + event.pageY;
        this.writeToConsole(msg);
        this.showModalWindow(msg);
    },
    init: function() {
        this.dom.document.onclick = this.onClick.bind(this);
    }
}).init();

@vovandr · 21.04.2014, 20:47

Это значит так

JavaScript
1
dom.onClick.bind(dom);

Вот отсюда ваше непонимание и пошло. В метод bind передаётся контекст объекта в котором есть 4 метода и свойство dom. С помощью bind выполняется привязка контекста для того, чтобы при клике по document в методе onClick нашего объекта this ссылался на сам объект, а не на document (за кадром привязка осуществляется через замыкание с использованием apply).

И как к этой всей функции применяется метод .init() ? Это ведь метод объекта dom

Каким боком init относится к dom непонятно. dom в данном случае нужен всего лишь для обозначения самого объекта к которому подключается обработчик события onclick.
Что касается метода init, то здесь используется так называемый шаблон немедленной инициализации объекта. То есть следующие конструкции допустимы:

JavaScript
1
2
({...}).init(); // вызываем сразу же метод init у созданного объекта
({}.init()); // тоже самое

Фактически такая инициализация избавляет нас от необходимости создания переменной и последующего вызова нужного метода инициализации.

@koderman · 22.04.2014, 07:18 **[ТС]**

Что это за конструкция?
({})
Объект без имени? Как он используется и как к нему обращаться?
Как используется слово this в этой конструкции? К чему оно обращается?

@vovandr · 22.04.2014, 10:25

Сообщение от koderman

Что это за конструкция?
({})

Эта конструкция называется немедленной инициализацией объекта. Она аналогична
функции вызываемой на месте: (function(){})();
В контексте данной задачи можно обойтись без имени объекта, чтобы
не плодить еще одну переменную. Поэтому здесь уместно использовать
данную конструкцию. Один раз вызвали init на месте, обработчик проинициализировался
получил доступ ко всем методам и всё замечательно.
Технически получить доступ извне к данному объекту сейчас нельзя. Но можно сделать
так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var obj = ({
    dom: {
        window: window,
        document: document
    },
    writeToConsole: function() {
        console.log.apply(console, arguments);
    },
    showModalWindow: function() {
        alert.apply(this.dom.window, arguments);
    },
    onClick: function(event) {
        var msg = 'x=' + event.pageX + ', y=' + event.pageY;
        this.writeToConsole(msg);
        this.showModalWindow(msg);
    },
    init: function() {
        this.dom.document.onclick = this.onClick.bind(this);
        return this;
    }
}).init();
 
console.log(obj); // возвратили объект

Ключевое слово this здесь используется как и везде. Ничего нового.
Внутри метода при непосредственном вызове ссылается на сам объект:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
({
    dom: {
        window: window,
        document: document
    },
    writeToConsole: function() {
        console.log.apply(console, arguments);
    },
    showModalWindow: function() {
        alert.apply(this.dom.window, arguments);
    },
    onClick: function(event) {
        var msg = 'x=' + event.pageX + ', y=' + event.pageY;
        this.writeToConsole(msg);
        this.showModalWindow(msg);
    },
    init: function() {
        this.dom.document.onclick = this.onClick.bind(this);
        console.log(this); // здесь this ссылается на сам объект
    }
}).init();

При вызове с обработчиком события без использования bind:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
({
    dom: {
        window: window,
        document: document
    },
    writeToConsole: function() {
        console.log.apply(console, arguments);
    },
    showModalWindow: function() {
        alert.apply(this.dom.window, arguments);
    },
    onClick: function(event) {
        var msg = 'x=' + event.pageX + ', y=' + event.pageY;
        console.log(this); // здесь this ссылается на this.dom.document - на объект перед точкой перед onclick и ниже будет ошибка
        this.writeToConsole(msg);
        this.showModalWindow(msg);
        
    },
    init: function() {
        this.dom.document.onclick = this.onClick;
    }
}).init();

И с привязкой нужного контекста через bind:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var obj = ({
    dom: {
        window: window,
        document: document
    },
    writeToConsole: function() {
        console.log.apply(console, arguments);
    },
    showModalWindow: function() {
        alert.apply(this.dom.window, arguments);
    },
    onClick: function(event) {
        var msg = 'x=' + event.pageX + ', y=' + event.pageY;
         console.log(this); // здесь this ссылается на наш объект так как привязку сделали через bind и правило this - объект перед точкой выполняться не будет
        this.writeToConsole(msg);
        this.showModalWindow(msg);
    },
    init: function() {
        this.dom.document.onclick = this.onClick.bind(this);
        return this;
    }
}).init();

@koderman · 22.04.2014, 12:20 **[ТС]**

Сообщение от vovandr

console.log(this); // здесь this ссылается на this.dom.document

Что определяет на что ссылается this? Тут вообще непонятно почему this ссылается на this.dom.document.
Почему если через bind() вызвали функцию, то в функции onClick, this ссылаются на объект?

@vovandr · 22.04.2014, 12:21

Что определяет на что ссылается this?

Определяется контекстом вызова...this определяется в момент вызова.

@koderman · 22.04.2014, 12:26 **[ТС]**

Я как раз этот контекст тут и не понял.

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

@koderman 2 / 2 / 0 Регистрация: 27.11.2012 Сообщений: 131
	22.04.2014, 07:18 [ТС]
	Что это за конструкция? ({}) Объект без имени? Как он используется и как к нему обращаться? Как используется слово this в этой конструкции? К чему оно обращается? 0

@koderman 2 / 2 / 0 Регистрация: 27.11.2012 Сообщений: 131
	22.04.2014, 12:26 [ТС]
	Я как раз этот контекст тут и не понял. 0