12

Собственно, сабж. Есть информация на английском, но хотелось бы осветить это и для тех, кто английский не знает.

2 ответа 2

31

Информация на русском есть, и очень много.

Вкратце:

call - вызов функции с подменой контекста - this внутри функции. Пример:

function f(arg) {
    alert(arg);
    alert(this);
}

f('abc');             // abc, [object Window]

f.call('123', 'abc'); // abc, 123

apply - вызов функции с переменным количеством аргументов и с подменой контекста. Пример:

function f() {
    alert(this);
    for (var i = 0; i < arguments.length; i++) {
        alert(arguments[i]);
    }
}

f(1, 2, 3);                   // [object Window], 1, 2, 3

f.apply('abc', [1, 2, 3, 4]); // abc, 1, 2, 3, 4

bind - создаёт "обёртку" над функцией, которая подменяет контекст этой функции. Поведение похоже на call и apply, но, в отличие от них, bind не вызывает функцию, а лишь возвращает "обёртку", которую можно вызвать позже. Пример:

function f() {
    alert(this);
}

var wrapped = f.bind('abc');

f();         // [object Window]
wrapped();   // abc

Также bind умеет подменять не только контекст, но и аргументы функции, осуществляя каррирование:

function add(a, b) {
    return a + b;
}

var addOne = add.bind(null, 1);

alert(add(1, 2));   // 3

alert(addOne(2));   // 3

1
  • самое путевое и просто объяснение, спасибо) 15 ноя 2021 в 11:53
4
// Создадим простой объект, чтобы использовать его в качестве контекста
var context = { foo: "bar" };

// Функция, которая возвращает свойство «foo» контекста «this»
function returnFoo () {
  return this.foo;
}

// Свойства не существует в текущей области видимости, поэтому undefined
returnFoo(); // => undefined

// Но если мы свяжем эту функцию с контекстом
var bound = returnFoo.bind(context);

// Свойство теперь в области видимости
bound(); // => "bar"

// Существует несколько способов связывания функции с контекстом
// Call и apply позволяют вам вызывать функцию с нужным контекстом
returnFoo.call(context); // => bar
returnFoo.apply(context); // => bar

// Так же можно вложить функцию в объект
context.returnFoo = returnFoo;
context.returnFoo(); // => bar

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.