手写bind

二话不说先上代码

Function.prototype.bonnyBind = function(context){
    if(typeof context === 'undefined' || context === null){
        context = window;
    }
    var self = this;
    return function(...args){
        return self.apply(context,args);
    }
}

要手写代码实现bind函数，就需要先理解bind是什么，有什么用。

当你使用 JavaScript 中的 bind() 函数时，你正在创建一个新的函数，并且可以设置这个函数内部的 this 值。这个新函数会将你指定的 this 值绑定到你指定的对象上。

通俗地说，就好像你给一个人穿上了一双特殊的鞋子，无论这个人去哪里，这双鞋子都会一直陪着他。同样，使用 bind() 函数可以将一个对象绑定到一个函数上，无论在什么地方调用这个函数，它的 this 值都会指向你所绑定的对象。

举个例子，假设你有一个叫做 greet() 的函数，它里面用到了 this 关键字，但你想要确保在调用 greet() 时，this 始终指向一个特定的对象 person。你可以这样使用 bind() 函数：

const person = {
  name: 'Bonny'
};

function greet() {
  console.log('Hello, ' + this.name);
}

const boundGreet = greet.bind(person); // 将 greet 函数绑定到 person 对象上
boundGreet(); // 打印 "Hello, Bonny"

在这个例子中，我们创建了一个新的函数 boundGreet，它是 greet() 函数的一个版本，但是它的 this 值被绑定到了 person 对象上。所以，无论我们在哪里调用 boundGreet()，它都会打印出 "Hello, Bonny"。

理解了bind的作用，我们还需要注意一点，当 bind 返回的函数作为构造函数的时候，bind 时指定的 this 值会失效，但传入的参数依然生效。

OK，接下来我们就来逐条解读一下上面的手写bind代码。

1. Function.prototype.myBind = function(context) {

   这一行将一个新方法 myBind 添加到 Function 对象的原型上，使得所有函数都可以调用这个方法。

2. if (typeof context === "undefined" || context === null) { 
       context = window; 
   }

   这个条件判断语句检查传入的 context 参数是否为 undefined 或 null。如果是，它将 context 设置为 window 对象。这是为了确保在调用函数时，如果没有显式指定上下文，则默认使用全局对象 window 作为上下文。

3. var self = this;

   这一行将当前函数对象保存到变量 self 中。这是因为在返回的闭包函数中，我们无法直接引用到外部函数中的 this。为了在闭包函数中访问外部函数的 this，我们需要在外部函数中保存 this 的值。

4. return function(...args) { 
       return self.apply(context, args); 
   }

   这一行返回一个闭包函数，这个闭包函数将原函数绑定到指定的上下文，并且传入了参数。闭包函数内部使用了 apply() 方法来调用原函数，确保了函数执行时的上下文是指定的 context，并且传入了正确的参数。因为 apply() 方法可以接收一个数组作为参数，所以这里使用了展开运算符 ...args 来将参数列表传递给 apply() 方法。

以上就是所有手写实现bind的所有内容啦~