bind, call, apply в чём разница?

#javascript #jquery

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

Ответы

Ответ 1

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

Вкратце:

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


Ответ 2

// Создадим простой объект, чтобы использовать его в качестве контекста
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