当前位置：首页 > JavaScript

js 实现bind

2026-03-14 09:43:40JavaScript

实现 bind 方法

bind 方法用于创建一个新函数，当调用该函数时，其 this 值会被绑定到指定的对象，并可以预先传入部分或全部参数。

js 实现bind

基本实现思路

bind 方法需要返回一个新函数，该函数在被调用时会将 this 绑定到指定的上下文，并可以合并预先传入的参数和调用时传入的参数。

js 实现bind

Function.prototype.myBind = function(context, ...args) {
  const fn = this;
  return function(...innerArgs) {
    return fn.apply(context, [...args, ...innerArgs]);
  };
};

处理 new 操作符的情况

当使用 new 操作符调用绑定后的函数时，this 应该指向新创建的实例，而不是绑定的上下文。需要判断是否通过 new 调用。

Function.prototype.myBind = function(context, ...args) {
  const fn = this;
  const bound = function(...innerArgs) {
    return fn.apply(
      this instanceof bound ? this : context,
      [...args, ...innerArgs]
    );
  };
  bound.prototype = Object.create(fn.prototype);
  return bound;
};

完整实现示例

Function.prototype.myBind = function(context, ...args) {
  if (typeof this !== 'function') {
    throw new TypeError('绑定的对象必须是一个函数');
  }

  const fn = this;
  const bound = function(...innerArgs) {
    // 判断是否通过 new 调用
    const isNew = this instanceof bound;
    return fn.apply(
      isNew ? this : context || window,
      args.concat(innerArgs)
    );
  };

  // 保持原型链
  if (fn.prototype) {
    bound.prototype = Object.create(fn.prototype);
  }

  return bound;
};

使用示例

const obj = {
  value: 42
};

function printValue(a, b) {
  console.log(this.value, a, b);
}

const boundPrint = printValue.myBind(obj, 'hello');
boundPrint('world'); // 输出: 42 'hello' 'world'

// 测试 new 操作符
function Person(name, age) {
  this.name = name;
  this.age = age;
}

const BoundPerson = Person.myBind(null, 'John');
const p = new BoundPerson(30);
console.log(p.name, p.age); // 输出: John 30