带你手动实现bind方法，让你收获满满

1.手动实现bind方法的要点

当作为this参数传入的值为原始类型数据时，该数据会被包装成对象。传入null或者undefined时，this会被替换为window。传入一般对象时，返回的函数内部this指向该对象。bind方法一个经典用法就是偏函数的应用。让函数可以拥有预设参数。最重要的一点就是绑定函数作为构造函数去调用。MDN：绑定函数自动适应于使用 new 操作符去构造一个由目标函数创建的新实例。当一个绑定函数是用来构建一个值的，原来提供的 this 就会被忽略。不过提供的参数列表仍然会插入到构造函数调用时的参数列表之前。

意思就是：当绑定函数作为构造函数去调用的时候，它被提供的this会被忽略掉。然后，就会像一般的构造函数一样去新建对象实例了。 示例：

const obj = { name: 'ha' } function Student(name){ this.name = name; } const newS = Student.bind(obj, 23); // obj被忽略 const newObj = new newS(1); console.log(obj); // {name: "ha"} obj的name属性值并未被改变 console.log(newObj); // Student {name: 23}

如果不用new操作构造函数去生成对象实例的话，那么提供的this参数就会生效。

const obj = { name: 'ha' } function Student(name){ this.name = name; } const newS = Student.bind(obj, 23); // obj的name属性会被改变 const newObj = newS(1); // 去掉了new操作符 console.log(obj); // {name: 23} obj的name属性值并未被改变 console.log(newObj); // undefined

2.手动实现bind方法

// 手动实现bind方法 // MDN：关于绑定函数，做了如下说明：指的是某一函数（目标函数）调用了bind()方法后，原地生成的函数，为绑定函数。 Function.prototype.myBind = function (context, ...args) { const self = this; // 最重要的是返回一个函数 context = [null, undefined].includes(context) ? window : { number: new Number(context), boolean: new Boolean(context), string: new String(context) }[typeof context]; const fBound = function() { // 这里不要忘了加上return // 另外，就是如果new了绑定函数，那么传递给目标函数的this，即context参数就被忽略。否则，生效。 return self.apply(this instanceof fBound ? this : context || window, args.concat(Array.prototype.slice.call(arguments))); } fBound.prototype = Object.create(self.prototype); // new出来的实例的原型，应为目标函数的原型 return fBound; };