JavaScript: что делает Function.call.apply(…)?

Question

[Alex Efros]

В JavaScript Garden в разделе «Functions / The arguments Object» есть вот такая строчка:

// Result: Foo.prototype.method.call(this, arg1, arg2... argN)
Function.call.apply(Foo.prototype.method, arguments);

Знатоки JS, поясните плз, в чём смысл записи Function.call.apply? Насколько я понимаю, и call и apply это обычные методы объекта Function, и вызов Function.call.apply это то же самое что вызов Function.apply. В крайнем случае, если по какой-то причине здесь важно вызвать .apply от нового пустого объекта типа Function возвращённого вызовом call, тогда получается что можно было с тем же успехом сделать и Function.apply.apply?

Answer 1

[mnasyrov]

Всё просто :). Цель этого трюка — написать обёртку foo(), которая вызывает bar() в указанном контексте context и с переданными аргументами arg1, arg2 без лишних теложвижений.

В традиционном виде, это выглядело бы так

function bar(arg1, arg2) {}

function foo(context, arg1, arg2) {
bar.call(context, arg1, arg2);
}

Или так для произвольного числа аргументов:

function bar() {}

function foo() {
var context = arguments[0];
var args = Array.prototype.slice.call(arguments, 1); //делаем массив аргументов для bar
bar.apply(context, args);
}

Вместо этого салата использовать трюк с call.apply:

function foo() {
Function.call.apply(bar, arguments);
}

Работает это так: aplly вызывает Function.call на объекте bar c переданными в foo параметрами. То есть получаем следующее для самого первого примера с context и arg1, arg2:

bar.call(context, arg1, arg2)

Что нам и нужно.

Answer 2

[Анатолий]

call изменяет this внутри вызываемой функции.
пример
var obj = {};
Array.push.call( obj, 1 );

Вызовется метод push у обьекта Array но внутри этого метода this будет указывать на обьект который я указал первым параметром, тоесть мой obj;

Зачем он и как его использовать?
Например, функции setTimeout и setInterval когда вызывают метод, то они вызывают этот метод без привязки к родителю, соответственно в вызывамых методах будет this = window
С помошью call это можно изменить и насильно указать что хочется. Это как простейший пример

Comments

[Alex Efros]

Спасибо, но я знаю как работает .call(). Я не понимаю как работает цепочка вызовов .call.apply() — чем она отличается от простого вызова .apply().

[Анатолий]

Не дочитал до конца и начал умничать =)
Да в принципе вы правы, можно было бы сделать с тем же успехом, но call отличается от apply параметрами которые им передаются.
Вообще очень часто вижу вызовы типа Array.method.apply([], params);
это делают для того чтоб скопом отдать все пришедлие параметры, пример:
есть метод obj1.qwe( param1, param2, param3 ) я хочу его вызвать, но параметры которые я ему должен указать у меня находятся в массиве, поэтому вызов будет таким
obj1.qwe.apply( obj1, arrayParams ) // но зачем дублировать обьект?
ObjectConstructor.qwe.applt( obj1, params ) // либо обьект может быть динамическим, тогда я не могу его продублировать
Я думаю как-то так.

Answer 3

[Mikhail Davydov]

В примере они сделали так, чтобы не отделять первый элемент массива — сделать красиво.

В свое время сломал мозг когда разбирал, вот примеры, которые все объясняет:

Function.prototype.call.apply(function(a,b){console.log([this,a,b])}, [NaN,{},4], {}, 0);
(function(a,b){console.log([this,a,b])}).apply(NaN, [{},4], {}, 0);
// Оба выдают [NaN {}, Object {}, 4]
// NaN будет объектом т.к. был передан в качестве первого параметра

Function.prototype.call.call(function(a,b){console.log([this,a,b])}, [NaN,{},4], {}, 0);
(function(a,b){console.log([this,a,b])}).call([NaN,{},4], {}, 0);
// Оба выдают [[NaN, Object {}, 4], Object {}, 0]
// Массив [NaN,{},4] уже объект поэтому не преобразуется в объект

Comments

[Mikhail Davydov]

Восновном эту фичу применяют для итерационных методов Array, например для приведения HTMLCollection к Array. Приводят к массиву для того, чтобы убить «живую коллекцию» либо для того, чтобы поиметь итерационные методы массива (forEach, map). Тут штука вот в чем Array.prototype.slice (и прочие нативные методы) обрабатывает «массив» через обычный цикл, точнее что подает признаки массива (в JavaScript Duck typing и нативные методы не исключение) — имеет свойство length и числовые ключи:

for (var i = 0, c = this.length; i < c; i++) {
// делает свое дело
}

var divs = document.getElementsByTagName('div');
console.log(divs instanceof HTMLCollection); // true;
console.log(divs instanceof Array); // false;
divs = Array.prototype.slice.call(divs);
console.log(divs instanceof Array); // true;

var obj = {
    1: '^',
    2: '_',
    3: '^',
    length: 5
};
obj = Array.prototype.slice.call(obj);
console.log(obj); // [undefined, "^", "_", "^", undefined]

Answer 4

[gaelpa]

Зачем: для создания метода объекта, принимающего подстановку «this» как первый параметр.
Function.apply.apply даст другой эффект ввиду того, что apply и call принимают разные параметры.

Зачем на более высоком уровне: приходит в голову только как вариант для построения библиотеки утилит для организации «красивого» вызова и незамусоривания пространства имён

При вызове происходит следующее, если кому интересно:

// в контексте примера
var a={ toString:function(){return 'a'} };
Foo.method(a,1,2,3);

1. в apply передается: объект «Foo.prototype.method», параметры [a,1,2,3]
2. вызывается Foo.prototype.method.call(a, 1,2,3), т.е. Foo.prototype.method от имени объекта a
3. вызывается console.log(a, 1,2,3); т.к. this===a

P.S. исходный пример целиком:
Another trick is to use both call and apply together to create fast, unbound wrappers.

function Foo() {}

Foo.prototype.method = function(a, b, c) {
    console.log(this, a, b, c);
};

// Create an unbound version of "method" 
// It takes the parameters: this, arg1, arg2...argN
Foo.method = function() {
    // Result: Foo.prototype.method.call(this, arg1, arg2... argN)
    Function.call.apply(Foo.prototype.method, arguments);
};