当前位置：首页 > JavaScript

bind 实现 js

2026-03-14 05:14:48JavaScript

使用 `bind` 方法实现函数绑定

bind 是 JavaScript 中用于绑定函数上下文（this）的方法，同时支持部分参数预设。以下是具体实现方式：

语法

function.bind(thisArg[, arg1[, arg2[, ...]]])

示例代码

const person = {
  name: 'Alice',
  greet: function(greeting) {
    return `${greeting}, ${this.name}!`;
  }
};

// 绑定 this 到 person 对象
const boundGreet = person.greet.bind(person);
console.log(boundGreet('Hello')); // 输出: "Hello, Alice!"

// 预设参数
const greetHi = person.greet.bind(person, 'Hi');
console.log(greetHi()); // 输出: "Hi, Alice!"

手动实现 `bind` 的 Polyfill

以下是兼容 ES5 的 bind 实现代码：

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP = function() {},
        fBound = function() {
          return fToBind.apply(
            this instanceof fNOP ? this : oThis,
            aArgs.concat(Array.prototype.slice.call(arguments))
          );
        };

    if (this.prototype) {
      fNOP.prototype = this.prototype;
    }
    fBound.prototype = new fNOP();

    return fBound;
  };
}

应用场景

事件处理函数绑定

const button = document.querySelector('button');
const obj = {
  clicked: 0,
  handleClick: function() {
    this.clicked++;
    console.log(`Button clicked ${this.clicked} times`);
  }
};

button.addEventListener('click', obj.handleClick.bind(obj));

setTimeout 中的 this 绑定

function LateBloomer() {
  this.petalCount = 0;
}

LateBloomer.prototype.bloom = function() {
  setTimeout(this.declare.bind(this), 1000);
};

LateBloomer.prototype.declare = function() {
  console.log(`I have ${this.petalCount} petals!`);
};

const flower = new LateBloomer();
flower.petalCount = 3;
flower.bloom();

注意事项

bind 创建的新函数无法再次修改 this 绑定
箭头函数没有自己的 this 绑定，不能使用 bind
在严格模式下，未绑定的 this 会是 undefined 而非全局对象

性能优化建议

对于需要频繁调用的绑定函数，建议提前绑定并缓存引用，避免重复绑定操作：

bind 实现 js

// 优化前（每次渲染都重新绑定）
elements.forEach(el => {
  el.addEventListener('click', this.handleClick.bind(this));
});

// 优化后（提前绑定）
const boundHandler = this.handleClick.bind(this);
elements.forEach(el => {
  el.addEventListener('click', boundHandler);
});