https://repl.it/D9QA/14 created by ncer

LoftBlog - Шаблоны вызова функции и this.js

/*
Стенограмма видео https://www.youtube.com/watch?v=xydnbUZqzto

В яваскрипте функции имеют такую особенность, как различные способы вызова.

После вызова функции, она получает 2 доп параметра: 
- Ключевое слово this
- Псевдомассив arguments

Всего есть 4 шаблона (паттерна) вызова функций:

Вызов метода — Method Invocation
Вызов функции — Function Invocation
Вызов конструктора — Constructor Invocation
Вызов apply и call — Apply And Call Invocation

Главное отличие между ними: способ инициализации ключевого слова this

Подробнее про паттерны вызова: https://habrahabr.ru/post/155815/
*/

// Вызов функции — Function Invocation
var functionInvocation = function(a, b) {
	console.log( '// Вызов функции — Function Invocation Function \nthis ссылается на: ' + this ); // Ссылается на объект Window {…}
	return a + b;
}
console.log( 'Invocation возвращает: ' + functionInvocation(0, 1) + '\n' );

/*
В данном случае this связывается с глобальным объектом, а не с функцией - это ошибка конструкции языка.

Из комментов:
Lego VanoГод назад
this == window в функции - это не "ошибка конструкции языка". 
Вы создали функцию в глобальном контексте (window), соответственно функция стала методом объекта window, то есть имеет контекст window.

Исправить это поведение this можно только, если перейти к ООП. В этой связи перейдем к шаблону вызова метода.
*/

// Вызов метода — Method Invocation
var MYAPP = {
	method: function(a, b) {
		console.log( '// Вызов метода — Method Invocation \nthis ссылается на: ' + this );
		return a + b;
	}
};
console.log( 'MYAPP.method возвращает: ' + MYAPP.method(0,2) + '\n' );

/*
В яваскрипте функции, которые являются свойствами объекта, называются методами. Методы бывают публичными (открытыми) и приватными (закрытыми). Публичные - методы, которые получают контекст от this. Приватные - не получают.

Для того, чтобы написать приватный и публичный метод в одном объекте, придется прибегнуть к паттерну модуля, который является базовым паттерном в ООП на яваскрипте.
*/

// Паттерн модуля 
var MYAPP2 = (function() {
	console.log('// Паттерн модуля MYAPP2');
	// Приватный метод, которому не доступен контекст MYAPP2
	var privateMethod = function() {
		// console.log('privateMethod'); // Uncaught SyntaxError: Unexpected token var
		console.log( 'this в privateMethod ссылается на: ' + this );
		return 'privateMethod';
	};
	
	return {
		// Публичный метод
		method: function(a, b) {
			console.log( 'this в MYAPP2.method ссылается на: ' + this );
			// Даже записанный в публичном методе паттерн вызова функции будет контекстом относиться к объекту Window
			var innerFunc = function(a, b) {
				console.log('this в MYAPP2 innerFunc ссылается на - ' + this);
			};
			innerFunc();
			// Решение простое - нужно просто закешировать this.
			var that = this;
			var innerFunc2 = function(a, b) {
				console.log('that в MYAPP2 innerFunc2 ссылается на - ' + that); // Благодаря хоистингу мы найдем that вне области видимости innerFunc2.
			};
			innerFunc2();
			return a + b;
		},
		publicMethod: privateMethod // Обратиться к приватному методу можно только через создание публичного
	}
})();
console.log( 'MYAPP2.method возвращает: ' + MYAPP2.method(0,3) );
console.log( 'MYAPP2.publicMethod возвращает: ' + MYAPP2.publicMethod() + '\n' );

// Вызов apply — Apply Invocation. Встроенный метод apply позволяет выбирать и передавать контекст.
var arr = [3, 5];
var add = function(a, b) {
	console.log('// Вызов apply — Apply Invocation' );
	console.log( 'Публичный метод MYAPP2.method возвращает ' + this.method(10, 5) ); // Мы можем получить доступ к публичным методам MYAPP2
	return a + b;
}
/*
function.apply(context, arguments); 
context - передаваемый контекст (если необходим глобальный контекст - пишем null)
arguments - массив аргументов
*/
var sum = add.apply( MYAPP2, arr );
console.log( sum );

LoftBlog - Шаблоны вызова функции и this_console_dump.txt

Babel Compiler v6.4.4
Copyright (c) 2014-2015 Sebastian McKenzie
>>> // Вызов функции — Function Invocation Function 
this ссылается на: [object Window]
Invocation возвращает: 1

// Вызов метода — Method Invocation 
this ссылается на: [object Object]
MYAPP.method возвращает: 2

// Паттерн модуля MYAPP2
this в MYAPP2.method ссылается на: [object Object]
this в MYAPP2 innerFunc ссылается на - [object Window]
that в MYAPP2 innerFunc2 ссылается на - [object Object]
MYAPP2.method возвращает: 3
this в privateMethod ссылается на: [object Object]
MYAPP2.publicMethod возвращает: privateMethod

// Вызов apply — Apply Invocation
this в MYAPP2.method ссылается на: [object Object]
this в MYAPP2 innerFunc ссылается на - [object Window]
that в MYAPP2 innerFunc2 ссылается на - [object Object]
Публичный метод MYAPP2.method возвращает 15
8
=> undefined