js的apply，call，bind区别

数组和参数列表在JavaScript中是两个不同的概念，但它们可以相互转换和使用。下面我会解释它们的区别，并给出相应的例子。

数组（Array）

数组是JavaScript中的一种数据结构，用于存储多个值（元素）。数组中的元素可以是任何类型，包括数字、字符串、对象、函数等。数组是有序的，这意味着每个元素都有一个索引，从0开始。

数组的例子：

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // 输出 'apple'

在这个例子中，fruits是一个数组，包含了三个字符串元素。

参数列表（Arguments List）

参数列表是指函数定义时括号内的参数，或者函数调用时传递给函数的值。参数列表通常用于向函数传递数据，函数可以接收任意数量的参数。

参数列表的例子：

function sum(a, b, c) {
  return a + b + c;
}

console.log(sum(1, 2, 3)); // 输出 6

在这个例子中，sum函数有一个参数列表，包含三个参数a、b和c。当我们调用sum(1, 2, 3)时，我们传递了三个参数给这个函数。

数组和参数列表的区别

1. 定义方式不同 ：
   • 数组是使用方括号[]定义的，可以存储多个值。
   • 参数列表是在函数定义时使用圆括号()定义的，用于接收函数调用时传递的值。

数组和参数列表的相互转换

将参数列表转换为数组的例子：

function listArguments() {
  // 使用Array.from方法将arguments对象转换为数组
  const argsArray = Array.from(arguments);
  console.log(argsArray); // 输出：[1, 2, 3]
}
listArguments(1, 2, 3);

在这个例子中，listArguments函数没有预定义的参数列表，但我们可以使用arguments对象（在ES6之前）来访问传递给函数的参数。Array.from方法将arguments对象转换为一个真正的数组。

将数组作为参数列表传递给函数的例子：

function sum() {
  // 使用arguments对象或rest参数...args来获取所有参数
  return Array.from(arguments).reduce((a, b) => a + b, 0);
}

// 使用apply方法将数组作为参数列表传递给函数
const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // 输出 6

在这个例子中，我们使用apply方法将numbers数组中的元素作为参数列表传递给sum函数。sum函数内部使用Array.from方法将arguments对象转换为数组，并使用reduce方法计算总和。

JavaScript 中的 apply()、call() 和 bind() 方法都用于调用函数，并且都可以指定函数体内 this 的值。它们的主要区别在于参数的传递方式和使用场景。下面我会详细解释这三个方法的区别：

1. call()

改变 this 指向后不会立即执行 ，而是返回一个临时改变 this 指向的函数

• 参数传递 ：call() 方法接受一个参数列表，即将所有参数依次排列。
• 返回值：和原函数的返回值相同。
• 用途 ：当你想要调用一个函数，并且立即指定 this 值和参数时使用。

示例：

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = {
  name: 'Kimi'
};

greet.call(person, 'Hello', '!'); // 输出：Hello, Kimi!

在这个例子中，call() 方法用于立即调用 greet 函数，并将 this 值设置为 person 对象，同时传递了两个参数 greeting 和 punctuation。

2. apply()

改变 this 指向后会立即执行 ，而是返回一个临时改变 this 指向的函数

• 参数传递 ：apply() 方法接受一个参数数组，即将所有参数放在一个数组中。
• 返回值：和原函数的返回值相同。
• 用途 ：当你想要调用一个函数，并且立即指定 this 值，但参数列表不确定或者是一个数组时使用。

示例：

function sum() {
  return Array.from(arguments).reduce((a, b) => a + b, 0);
}

const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // 输出：6

在这个例子中，apply() 方法用于调用 sum 函数，并将 this 值设置为 null（因为 sum 函数内部没有使用 this），同时传递了一个参数数组 numbers。

3. bind()

改变 this 指向后不会立即执行 ，而是返回一个永久改变 this 指向的函数

• 参数传递 ：bind() 方法用于创建一个新的函数，其 this 值被指定，参数可以预设。
• 返回值：一个新的函数，而不是原函数的返回值。
• 用途 ：当你想要创建一个新的函数，预设 this 值和/或参数，以便稍后调用时使用。

示例：

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // 输出：10

三者都可以改变函数的 this 对象指向

三者第一个参数都是 this 要指向的对象，如果如果没有这个参数或参数为 undefined 或 null，则默认指向全局 window

三者都可以传参，但是 apply 是数组，而call是参数列表，且 apply和 call 是一次性传入参数，而 bind 可以分为多次传入

bind 是返回绑定this之后的函数，apply、call 则是立即执行