В чем принципиальная разница между call/apply и почему код так работает?

Question

Всем привет. Разрешите задать нубский вопрос по CALL/APPLY, может кто-то разжуёт Как следует из многих туториалов и учебников call отличается от apply тем, что в apply аргументом можно передать массив. А в call нет.

var object = {
    "arr": ["Первый элемент",2,3,4,5],
    "func": function() {
        function awayFromMe(arr){
            console.log(arr);
        }
    awayFromMe.call (this, this.arr);
    awayFromMe.apply(this, this.arr);
    }
};
object.func();

То-есть я рассчитывал что call ничего не даст, a apply отработает, но вопреки моим ожиданиям call дал вывод массива:["Первый элемент", 2, 3, 4, 5] apply дал вывод только первого элемента: "Первый элемент"

Почему так происходит?

Answer 1

foo.apply(thisArg, argsArray)
foo.call(thisArg, arg1, arg2, ...)

хотя синтаксис функции call() практически полностью идентичен функции apply(), фундаментальное различие между ними заключается в том, что функция call() принимает список аргументов, в то время, как функция apply() - одиночный массив аргументов.

Т.е. разница только в том, что в apply вы передаёте аргументы в виде массива, а в call как есть:

function test(a, b, c, d) {
  console.log(a, b, c, d);
}
// Последующие вызовы идентичны
test.apply(null, [1, 2, 3, 4]);
test.call(null, 1, 2, 3, 4);

Другой пример:

let a = [1, 2, 3];
// Один аргумент - массив
console.log.call(console, a); // [1, 2, 3]
// Три аргумента
console.log.apply(console, a); // 1, 2, 3
// функция суммирует свои аргументы
const sum = (...args) => args.reduce((c, a)=> c += a, 0);
console.info('call', sum.call(null, a)); // sum([1,2,3]) = 0+'1,2,3'
console.info('apply', sum.apply(null, a)); // sum(1,2,3) = 6

Answer 2

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

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

Код крайне простой, мы передаём два аргумента в параметры функции, а она возвращает сумму. И допустим, нам надо вызвать эту функцию для двух элементов некоего массива.

---

Если мы вызовем её как: sumTwoNumb.call(null, [100,150]), то получится так, что первый параметр a получит аргументом весь массив [100,150], а второй параметр, b не получит ничего и станет, соответственно, undefined. И в итоге функция вернёт результат сложения [100,150]+undefined, а это равно 100,150undefined.

---

А если мы её вызовем так: sumTwoNumb.apply(null, [100,150]), то при входе в функцию первый параметр a получит нулевой элемент массива = 100, а второй параметр получит первый элемент массива = 150 и в итоге функция вернёт результат сложения 100 + 150, то есть верный.

Уважаемые профессионалы, если я не прав, поправьте. Надеюсь, кому-то пригодится.

Answer 3

Всё верно, call в первом аргументе возвращает массив, а apply распределяет элементы массива по аргументам, т. е. arr будет указывать на первый элемент Первый элемент.