【手撕代码系列】JS手写实现bind方法_工作原理

公众号：Code程序人生，分享前端所见所闻

在JavaScript中，bind方法允许我们绑定函数的上下文并返回一个新的函数。在这篇文章中，我们将手写实现bind方法，以更好地了解它的内部工作原理。

bind方法的语法

bind方法的语法如下：

function.bind(thisArg[, arg1[, arg2[, ...]]])
  • thisArg：绑定函数的this值。
  • arg1, arg2, ...：指定绑定函数的参数。

bind方法将返回一个新的函数，该函数将绑定了指定的this值和参数。

实现bind方法

我们将在以下步骤中手写实现bind方法：

  1. 创建一个新函数。
  2. 将新函数的this值绑定为指定的thisArg值。
  3. 将新函数的参数与绑定函数的参数合并。
  4. 调用绑定函数，将绑定函数的结果返回给新函数。
Function.prototype.myBind = function(ctx) {
    ctx = ctx || window;
    let self = this;
    let args = [...arguments].splice(1);
    let fn = function() {};
    let _fn = function() {
        return self.apply(this instanceof _fn ? this : ctx, args);
    }
    fn.prototype = this.prototype;
    _fn.prototype = new fn();
    return _fn;
}

bind的实现过程就稍微复杂了一些。我们需要在函数中，生成一个待执行且改变了this指向的函数。
因为bind和call、apply最主要的区别就是前者是返回改变this指向后的函数，后者是自动执行。所以在函数中改变this指向的操作就没必要重复写了，我这里使用现有的apply来实现。

_fn函数中判断this instanceof _fn的目的是，原生bind其实是可以new那个bind后返回的函数的，不是new的情况下this指向才会是ctx。

与call和apply不一样的地方是，这里还需要设置一下返回的那个函数的原型，采用继承的方式，不能直接 = ，要采用一个中介函数fn来辅助改变_fn的原型。

测试bind方法

现在我们已经实现了bind方法，让我们测试一下它是否正常工作。我们将使用一个简单的示例来测试它，该示例将打印出this值和参数。

function printContextAndArgs(arg1, arg2) {
  console.log('this:', this);
  console.log('args:', arg1, arg2);
}

const obj = { name: 'John' };

// 使用bind方法
const boundFunction = printContextAndArgs.myBind(obj, 'hello');

// 调用新函数
boundFunction('world');

// 输出
// this: { name: 'John' }
// args: hello world

在上面的代码中，我们创建了一个函数printContextAndArgs，该函数打印出this值和参数。然后我们创建一个对象obj，并使用我们实现的myBind方法绑定了printContextAndArgs函数的上下文和一个参数。我们最后调用新函数，输出了绑定的结果。

结论

bind方法是JavaScript中一个非常有用的函数，它允许我们绑定函数的上下文并返回一个新的函数。在这篇文章中，我们手写实现了bind方法，并通过一个示例测试了它的工作。

希望这篇文章对你有所帮助，让你更好地了解bind方法的工作原理，并且能够自己实现一个类似的方法。通过手写实现一些内置方法，可以更好地理解它们的本质和使用方法，同时也有助于提高自己的编程能力。

当然，在实际开发中，我们通常会使用JavaScript内置的bind方法，而不是手写实现的方法。因为内置方法已经经过了大量的测试和优化，能够更好地处理各种边界情况，同时也能够提高代码的可读性和可维护性。