Javascript中bind、call、apply區別

在JavaScript中，bind、call、apply 都是用于改变函数执行时上下文（即函数体内 this 的指向）的方法，但它们之间有一些关键的区别。

区别

1. call 和 apply
   • 两者都用于立即执行函数，并且都可以改变函数执行时 this 的指向。
   • 参数区别：call 方法接受一个参数列表，而 apply 方法接受一个包含多个参数的数组（或类数组对象）。

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

const person = { name: 'John' };  

greet.call(person, 'Hello', '!'); // Hello, John!  
greet.apply(person, ['Hello', '!']); // Hello, John!

2. bind

• bind 方法创建一个新的函数，在 bind 被调用时，这个新函数的 this 被指定为 bind 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
• 重要的是，bind 不会立即执行函数，而是返回一个新的函数供后续调用。

const greetBound = greet.bind(person, 'Hello');  
greetBound('!'); // Hello, John!

实现一个 bind

实现一个基本的 bind 函数需要考虑多个方面，包括正确处理 this 上下文、参数传递以及新函数的返回值等。以下是一个简化的实现示例：

Function.prototype.myBind = function(context, ...boundArgs) {  
  if (typeof this !== 'function') {  
    throw new TypeError('What is trying to be bound is not callable');  
  }  
  
  const self = this; // 保存原函数  
  
  return function boundFunction(...args) {  
    // 使用 apply 来调用原函数，传入正确的 this 上下文和参数  
    // 合并 bind 时的参数和调用时的参数  
    return self.apply(context, boundArgs.concat(args));  
  };  
};  
  
// 使用示例  
const greet = function(greeting, punctuation) {  
  console.log(greeting + ', ' + this.name + punctuation);  
};  
  
const person = { name: 'John' };  
  
const greetBound = greet.myBind(person, 'Hello');  
greetBound('!'); // Hello, John!

这个 myBind 实现是基本的，它没有处理诸如构造函数调用（即使用 new 关键字）时的特殊情况，也没有处理 new.target 属性的情况。在完整的 bind 实现中，还需要考虑这些因素以确保行为的全面性和一致性。不过，这个示例为理解 bind 的基本工作原理提供了一个很好的起点。

原生JavaScript实现call、apply和bind - Web前端工程师面试题讲解_哔哩哔哩_bilibili