手写实现bind方法

问题

bind() 是 JavaScript 中一个重要的函数方法，它创建一个新函数，在调用时将 this 关键字设置为提供的值，并在调用新函数时，将给定的参数序列作为原函数的参数序列的前若干项。

需要实现一个自定义的 bind 方法，满足以下要求：

1. 绑定函数的 this 指向
2. 支持预设参数（偏函数应用）
3. 支持作为构造函数使用时忽略绑定的 this
4. 保持原函数的原型链

解答

// 实现自定义的 bind 方法
Function.prototype.myBind = function(context, ...args) {
  // 保存原函数
  const fn = this;
  
  // 检查调用者是否为函数
  if (typeof fn !== 'function') {
    throw new TypeError('调用者必须是函数');
  }
  
  // 返回一个新函数
  const boundFunction = function(...newArgs) {
    // 判断是否通过 new 调用
    // 如果是构造函数调用，this 指向实例对象，忽略传入的 context
    // 如果是普通函数调用，this 指向 window 或 undefined，使用传入的 context
    return fn.apply(
      this instanceof boundFunction ? this : context,
      [...args, ...newArgs]
    );
  };
  
  // 维护原型链
  // 通过一个空函数作为中介，避免直接修改原函数的 prototype
  if (fn.prototype) {
    const Empty = function() {};
    Empty.prototype = fn.prototype;
    boundFunction.prototype = new Empty();
  }
  
  return boundFunction;
};

使用示例

// 示例1：基本使用 - 绑定 this
const person = {
  name: '张三',
  age: 25
};

function introduce(hobby, city) {
  console.log(`我是${this.name}，今年${this.age}岁，喜欢${hobby}，来自${city}`);
}

const boundIntroduce = introduce.myBind(person, '编程');
boundIntroduce('北京'); 
// 输出: 我是张三，今年25岁，喜欢编程，来自北京


// 示例2：预设参数（柯里化）
function add(a, b, c) {
  return a + b + c;
}

const add5 = add.myBind(null, 5);
console.log(add5(10, 15)); // 输出: 30

const add5And10 = add.myBind(null, 5, 10);
console.log(add5And10(15)); // 输出: 30


// 示例3：作为构造函数使用
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, 我是${this.name}`);
};

const obj = { x: 100 };
const BoundPerson = Person.myBind(obj, '李四');

// 使用 new 调用时，绑定的 this 会被忽略
const p1 = new BoundPerson(30);
console.log(p1.name); // 输出: 李四
console.log(p1.age);  // 输出: 30
p1.sayHello();        // 输出: Hello, 我是李四
console.log(p1 instanceof Person); // 输出: true


// 示例4：对比原生 bind
const nativeBound = introduce.bind(person, '阅读');
nativeBound('上海');
// 输出: 我是张三，今年25岁，喜欢阅读，来自上海

关键点

• this 绑定：使用 apply 方法将函数的 this 指向传入的 context 对象

• 参数合并：通过扩展运算符 ... 将 bind 时的参数和调用时的参数合并，实现偏函数应用

• 构造函数判断：通过 this instanceof boundFunction 判断是否为构造函数调用，如果是则使用新创建的实例作为 this，否则使用绑定的 context

• 原型链维护：使用中介空函数来继承原函数的原型，避免直接修改原函数的 prototype 属性，确保通过 new 调用时实例能正确继承原型方法

• 类型检查：在函数开始时检查调用者是否为函数类型，提高代码健壮性

• 返回新函数：bind 不会立即执行原函数，而是返回一个新的绑定函数，只有在调用新函数时才会执行