深入浅出call、apply、bind使用细节

2024-01-31 16:32:16

apply、call、bind的区别

在javascript中，我们可以使用apply、call和bind方法来调用一个函数，同时指定其this值。这三个方法的主要区别在于传递参数的方式不同。

apply 方法接收两个参数：第一个参数是要调用的函数，第二个参数是一个数组，其中包含要传递给函数的参数。
call 方法接收两个参数：第一个参数是要调用的函数，第二个参数是要作为this值传递的对象，第三个参数及以后的参数是要传递给函数的参数。
bind 方法接收两个参数：第一个参数是要调用的函数，第二个参数是要作为this值传递的对象，第三个参数及以后的参数是要传递给函数的参数。

手动实现call、apply和bind方法

我们还可以手动实现call、apply和bind方法。以下是实现这些方法的示例代码：

Function.prototype.myCall = function(context) {
  var args = Array.prototype.slice.call(arguments, 1);
  context.fn = this;
  var result = context.fn(...args);
  delete context.fn;
  return result;
};

Function.prototype.myApply = function(context, args) {
  context.fn = this;
  var result = context.fn(...args);
  delete context.fn;
  return result;
};

Function.prototype.myBind = function(context) {
  var fn = this;
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    fn.apply(context, args.concat(Array.prototype.slice.call(arguments)));
  };
};