首页 > 教程

手撸call apply bind

slbcun
2025-04-07
1077 ℃

如果自己去实现call apply bind，看上去挺复杂，写起来其实就几行代码因为call和apply一样，只是传参不一样，所以我就只写一个call

实现call（其实只有2行代码）

/* 随便定义一个对象，待会将函数内的this指向指向倒这个对象 */
const obj = { name: "我是需要被绑定改变this指向的对象" };
/* 需要改变this指向的函数，没有使用call时，this指向window */
function fn(arg) {
  console.log("fn---------", this);
  console.log("fn---------", arg);
}
/*
 *
 * 重写call方法
 * target 需要把this改变到哪个目标
 * args 传递进来的参数
 */
Function.prototype.call = function (target, ...args) {
  /* 这里的this就指向上面的fn函数 */
  console.log(this);
  /* 随便定义一个变量，用于在目标对象里存fn函数，这里使用symbol更好 */
  target["vhan"] = this;
  /* 这样target目标上就有个vhan的属性，并且属性值就是fn函数 */
  console.log(target);
  /* 调用这个vhan，并把参数传入进去就实现this改变了 */
  target["vhan"](args);
  /* 防止给target上多出多余没用的参数，在将vhan删除掉 */
  delete target["vhan"];
};
fn.call(obj, "我是大帅哥");

实现bind

因为bind的调用方式，是返回一个新函数，在调用一次，例如：fn.bind(null)(options)，所以需要用到高阶函数

/* 随便定义一个对象，待会将函数内的this指向指向倒这个对象 */
const obj = { name: "我是需要被绑定改变this指向的对象" };
/* 需要改变this指向的函数，没有使用call时，this指向window */
function fn(arg) {
  console.log("fn---------", this);
  console.log("fn---------", arg);
}
/*
 *
 * 重写call方法
 * target 需要把this改变到哪个目标
 * args 传递进来的参数
 */
Function.prototype.bind = function (target) {
  target["vhan"] = this;
  /* 这里使用高阶函数接收参数 */
  return (...args) => {
    target["vhan"](args);
    delete target["vhan"];
  };
};
fn.bind(obj)("我是大帅哥！！！");