Введение §

this - это специальный идентификатор, который определяется в области видимости функции.

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

function foo(num) {
  console.log("foo" + num);
  this.count++;
}
 
foo.count = 0;
var i;
 
for (i = 0; i < 10; i++) {
  if (i > 5) {
    foo(i);
  }
}
 
// foo: 6
// foo: 7
// foo: 8
// foo: 9

Функция foo() была вызвана 0 раз!!!

Это так, потому что this.count указывает не на объект , а на созданную глобальную переменную.

this не связана с областью видимости так, как мы это понимаем.

Что такое this ? §

При вызове функции активируется “запись активации”, также называемая контекстом выполнения.

Запись содержит информацию откуда была вызвана функция (стек вызовов) , как она вызвана, какие параметры были переданы и так далее.

Одни из свойств этой записи при передачи является ссылка this .

Первое правило: use strict §

#useStrict Если действует режим strict : глобальный объект на момент исполнения используется для связывания по умолчанию, поэтому, вместо этого присваивается undefined.

function foo() {
  "use strict";
  console.log(this.a);
}
 
var a = 2;
foo(); // TypeError this is undefined

Но, при этом

 
function foo () {
	console.log(this.a)
	var a = 2
}
 
...
 
(function) () {
	"use strict"
	foo() //2
} ()
 

Второе правило: Неявное связывание §

1. Наличие у места вызова контекстного объекта - владельца.

function foo() {
  console.log(this.a);
}
 
var obj = {
  a: 2,
  foo: foo, // вызывает функцию foo
};
 
obj.foo(); //2

2. Для теста вызова важен только верхний и последний уровень

function foo() {
  console.log(this.a);
}
 
var obj2 = {
  a: 42,
  foo: foo, // вызывает функцию foo()
};
 
var obj1 = {
  a: 2,
  obj2: obj2, // вызывает var obj2
};
 
obj1.obj2.foo; //42

3. Неявная потеря this

ключевое: теряется связывание, возвращается связывание по умолчанию - глобального объекта или undefined.

function foo() {
  console.log(this.a);
}
 
var obj = {
  a: 2,
  foo: foo,
};
 
var bar = obj.foo;
var a = "oops, Global!"; // глобальное свойство
bar(); // oops, Global!

4. Потеря связывания this обратными вызовами.

Третье правило: Явное связывание §

1. Явное связывание Существуют методы#call и#apply

В первом параметре метода содержится объект, который используется для this Мы напрямую указываем какое значение должно использоваться для this

function foo() {
  console.log(this.a);
}
 
var obj = {
  a: 2,
};
 
foo.call(obj); //2

2. Жёсткое связывание

function foo() {
  console.log(this.a);
}
 
var obj = {
  a: 2,
};
 
var bar = function () {
  foo.call(obj);
};
 
bar(); //2
setTimeOut(bar, 1000); //2
bar.call(window); //2

3. Контексты вызовов API

Функции многих библиотек , а также многие … поддерживают context, который избавляет нас от необходимости использовать#bind, чтобы функция гарантировала использование this.

function foo(el) {
  console.log(el, this.id);
}
 
var obj = {
  id: "awesome",
}[(1, 2, 3)].forEach(foo, obj);

Четвёртое правило: Связывание с new §

Когда функция вызывается после оператора new (такие вызовы называются вызовами-конструкторами), они автоматически выполняют следующие действия:

1. Конструируются как новый объект
2. Производят его связывание с [[Prototype]]
3. Сконструированный объект назначается в качестве связывания this для этого вызова функции
4. Если функция не возвращает свой альтернативный объект, то вызов функции автоматически возвращает сконструированный объект.

function foo(a) {
  this.a = a;
}
 
var bar = new foo(2);
console.log(bar.a); //2

Определение this §

• Функция вызова с new
• Функция вызвана с call и apply
• Функция вызвана с контекстом
• this по умолчанию при use strict либо undefined или global

Исключения:

Если передать в this (call, bind и apply) значение null или undefined , то значения фактически игнорируются.

function foo() {
  console.log(this.a);
}
 
var a = 2;
foo.call(null); //2

Лексическое поведение this §

Лексическая область видимости стрелочной функции:

function foo() {
  return (a) => {
    //`this` здесь лексически наследуется от foo()
    console.log(this.a);
  };
}
 
var obj1 = {
  a: 2,
};
 
var obj2 = {
  a: 3,
};
 
var bar = foo.call(obj1);
bar.call(obj2); // 2, а не 3!

Лексическое связывание стрелочной функции не может быть переопределено даже с new. Распространённое использование - это колбеки.

call, bind, apply §

Объекты существуют в двух форматах:

• литеральной

var myObj = {
  key: value,
};

• конструированной

var myObj = new Object();
 
myObj.key = value;
 
var myObj = {
  a: 4,
  writable: true,
  configurable: false,
  enumerable: true,
};