Функциональный контекст

[markelov666]

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Функции в JavaScript выполняются в определенном контексте, и с помощью ключевого слово this мы получаем к нему доступ.

Все стандартные функции браузера выполняются в контексте окна. Функции, определенные в объекте или классе (другой функции), будут использовать контекст объекта, в котором они были созданы. Однако мы также можем изменить контекст функции во время выполнения, либо до, либо во время выполнения функции.​

Привязка метода к объекту

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

let person = {
    name : 'Иван'
};

function printName() {
    console.log(this.name);
}

Очевидно, мы не можем вызвать printName(), не связав функцию с объектом person. Для этого мы должны создать связанный метод функции printName с person, используя следующий код:

let boundPrintName = printName.bind(person);
boundPrintName(); // Иван

Вызов функции с другим контекстом

Мы можем использовать call и apply функцию для вызова функции, как если бы она была привязана к объекту. Разница между call и apply функциями только тем , как они получают свои аргументы - call функция принимает this аргумент первым, а затем аргументы функции, в то время как apply функция принимает this аргумент первым, и массив аргументов, чтобы перейти к функции как второй аргумент функции.

printName.call(person); // Иван

call/apply против bind

Разница между call/apply и bind заключается в том, что bind возвращает новую функцию, идентичную старой, за исключением того, что значение this в новой функции теперь является объектом, к которому она была привязана. call/apply вызывает функцию с this привязанным объектом, но она не возвращает возврат новой функции или не изменяет оригинал, а вызывает ее с другим значением для this.

let boundPrintName = printName.call(person);    // boundPrintName получает возвращаемое значение printName (null)
boundPrintName();                               // не работает, потому что это не функция, это null

printName.bind(person);                         // возвращает новую функцию, но ее никто не использует, поэтому она бесполезна
printName();

Можно сказать что call - это выполнения возвращаемого значение bind

Например:

printName.call(person);     // это то же самое, что
printName.bind(person)();   // выполняет функцию, возвращаемую bind

Или можно сказать, что bind - возвращает ярлык для call.

Например:

let boundPrintName = printName.bind(person);
let boundPrintName = function() {
    printName.call(person);
};