JavaScript 中 `apply`、`call` 和 `bind` 的具体理解与区别

ini 体验AI代码助手 代码解读复制代码func.apply(thisArg, [argsArray]);

go 体验AI代码助手 代码解读复制代码func.call(thisArg, arg1, arg2, ...);

ini 体验AI代码助手 代码解读复制代码const boundFunc = func.bind(thisArg, arg1, arg2, ...);

arduino 体验AI代码助手 代码解读复制代码const numbers = [1, 2, 3, 4, 5];

// 求最大值
const max = Math.max.apply(null, numbers);
console.log(max); // 输出 5

// 求最小值
const min = Math.min.apply(null, numbers);
console.log(min); // 输出 1

javascript 体验AI代码助手 代码解读复制代码const person = {
  name: 'Alice',
  greet: function(greeting) {
    console.log(`${greeting}, my name is ${this.name}`);
  }
};

const anotherPerson = { name: 'Bob' };

// 动态切换上下文
person.greet.call(anotherPerson, 'Hello'); // 输出 "Hello, my name is Bob"

javascript 体验AI代码助手 代码解读复制代码const button = {
  text: 'Click Me',
  handleClick: function() {
    console.log(`Button says: ${this.text}`);
  }
};

// 在 DOM 事件中绑定上下文
const boundClickHandler = button.handleClick.bind(button);

document.getElementById('myButton').addEventListener('click', boundClickHandler);

ini 体验AI代码助手 代码解读复制代码const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

// 使用 Array.prototype.slice 将类数组对象转换为数组
const arr = Array.prototype.slice.call(arrayLike);
console.log(arr); // 输出 ['a', 'b', 'c']

c 体验AI代码助手 代码解读复制代码function multiply(a, b) {
  return a * b;
}

// 预先绑定第一个参数
const double = multiply.bind(null, 2);
console.log(double(5)); // 输出 10