bind函数作用、应用场景以及模拟实现
bind函数
bind 函数挂在 Function 的原型上
Function.prototype.bind
创建的函数都可以直接调用 bind,使用：
function func(){
console.log(this)
}
func.bind(); // 用函数来调用
bind 的作用：
bind() 方法调用后会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为新函数运行时的 this的值，之后的序列参数将会在传递的实参前传入作为新函数的参数。<MDN>
bind 接收的参数
func.bind(thisArg[,arg1,arg2...argN])
- 第一个参数thisArg，当 func 函数被调用时，该参数会作为 func 函数运行时的 this 指向。当使用 new 操作符调用绑定函数时，该参数无效。
- [,arg1,arg2...argN] 作为实参传递给 func 函数。
bind 返回值
返回一个新函数
注意：这和函数调用 call/apply 改变this指向有所不同。调用call/apply 会把原函数直接执行了。
举个例子说明：
function func(){
console.log(this)
}
// 用call
func.call({a:1}); // func函数被执行了,打印：{a:1}
// 用bind
let newFunc = func.bind({}); // 返回新函数
newFunc(); // 只有当返回的新函数执行，func函数才会被执行
从以上得到如下信息：
- bind被函数调用
- 返回一个新函数
- 能改变函数this指向
- 可以传入参数
深入bind 使用
以上知道了 bind 函数的作用以及使用方式，接下深入到 bind 函数的使用中，具体介绍三个方面的使用，这也是之后模拟实现 bind 函数的要点。
- 改变函数运行时this指向
- 传递参数
- 返回的新函数被当成构造函数
改变函数运行时this指向
当调用 bind 函数后，bind 函数的第一个参数就是原函数作用域中 this 指向的值。
function func(){
console.log(this);
}
let newFunc = func.bind({a:1});
newFunc(); // 打印：{a:1}
let newFunc2 = func.bind([1,2,3]);
newFunc2(); // 打印：[1,2,3]
let newFunc3 = func.bind(1);
newFunc3(); // 打印：Number:{1}
let newFunc4 = func.bind(undefined/null);
newFunc4(); // 打印：window
以上要注意，当传入为 null 或者 undefined 时，在非严格模式下，this 指向为 window。
当传入为简单值时，内部会将简单的值包装成对应类型的对象，数字就调用 Number 方法包装；字符串就调用 String 方法包装；true/false 就调用 Boolean 方法包装。要想取到原始值，可以调用 valueOf 方法。
Number(1).valueOf(); // 1
String("hello").valueOf(); // hello
Boolean(true).valueOf(); // true
当多次调用 bind 函数时，以第一次调用 bind 函数的改变 this 指向的值为准。
function func(){
console.log(this);
}
let newFunc = func.bind({a:1}).bind(1).bind(['a','b','c']);
newFunc(); // 打印：{a: 1}
传递的参数
从 bind 的第二个参数开始,是向原函数传递的实参。bind 返回的新函数调用时也可以向原函数传递实参，这里就涉及顺序问题。
function func(a,b,c){
console.log(a,b,c); // 打印传入的实参
}
let newFunc = func.bind({},1,2);
newFunc(3)
打印结果为1，2，3。
可以看到，在 bind 中传递的参数要先传入到原函数中。
返回的新函数被当成构造函数
调用 bind 函数后返回的新函数，也可以被当做构造函数。通过新函数创建的实例，可以找到原函数的原型上。
// 原函数
function func(name){
console.log(this); // 打印：通过{name:'wy'}
this.name = name;
}
func.prototype.hello = function(){
console.log(this.name)
}
let obj = {a:1}
// 调用bind,返回新函数
let newFunc = func.bind(obj);
// 把新函数作为构造函数,创建实例
let o = new newFunc('seven');
console.log(o.hello()); // 打印：'seven'
console.log(obj); // 打印：{a:1}
新函数被当成了构造函数，原函数func 中的 this 不再指向传入给 bind 的第一个参数，而是指向用 new 创建的实例。在通过实例 o 找原型上的方法 hello 时，能够找到原函数 func 原型上的方法。
在模拟实现 bind 特别要注意这一块的实现，这也是面试的重点，会涉及到继承。
bind函数应用场景
以上只是说了 bind 函数时如何使用的，学会了使用，要把它放在业务场景中来解决一些现实问题。
场景一
先来一个布局：
<ul id="list">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
需求：点击每一个 li 元素，延迟1000ms后，改变 li 元素的颜色，
let lis = document.querySelectorAll('#list li');
for(var i = 0; i < lis.length; i++){
lis[i].onclick = function(){
setTimeout(function(){
this.style.color = 'red'
},1000)
}
}
以上代码点击每一个 li，并不会改变颜色，因为定时器回调函数的 this 指向的不是点击的 li，而是window，（当然你也可以使用箭头函数，let之类来解决，这里讨论的主要是用bind来解决）。此时就需要改变回调函数的 this 指向。能改变函数 this 指向的有：call、apply、bind。那么选择哪一个呢？根据场景来定，这里的场景是在1000ms之后才执行回调函数，所以不能选择使用call、apply，因为它们会立即执行函数，所以这个场景应该选择使用 bind解决。
setTimeout(function(){
this.style.color = 'red'
}.bind(this),1000)
场景二
有时会使用面向对象的方式来组织代码，涉及到把事件处理函数拆分在原型上，然后把这些挂在原型上的方法赋值给事件，此时的函数在事件触发时this都指向了元素，进而需要在函数中访问实例上的属性时，便不能找到成。
function Modal(options){
this.options = options;
}
Modal.prototype.init = function(){
this.el.onclick = this.clickHandler; // 此方法挂载原型上
}
Modal.prototype.clickHandler = function(){
console.log(this.left); // 此时点击元素执行该函数，this指向元素，不能找到left
}
let m = new Modal({
el: document.querySelector('#list'),
left: 300
})
m.init(); // 启动应用
以上代码，在 init 函数中，给元素绑定事件，事件处理函数挂在原型上，使用 this 来访问。当点击元素时，在 clickHandler 函数中需要拿到实例的 left 属性，但此时 clickHandler 函数中的 this 指向的是元素，而不是实例，所以拿不到。要改变 clickHandler 函数 this 的指向，此时就需要用到 bind。
Modal.prototype.init = function(){
this.el.onclick = this.clickHandler.bind(this)
}
以上场景只是 bind 使用的冰山一角，它本质要做的事情是改变 this 的指向，达到预期目的。掌握了 bind 的作用以及应用的场景，在脑海中就会树立一个印象：当需要改变this指向，并不立即执行函数时，就能想到 bind。
模拟实现
为什么要自己去实现一个bind函数呢？
bind()函数在 ECMA-262 第五版才被加入；它可能无法在所有浏览器上运行(ie8以下)。
面试用，让面试官找不到拒绝你的理由
抓住 bind 使用的几个特征，把这些点一一实现就OK，具体的点：
- 被函数调用
- 返回新函数
- 传递参数
- 改变函数运行时this指向
- 新函数被当做构造函数时处理
被函数调用，可以直接挂在Function的原型上，为了补缺那些不支持的浏览器，不用再为支持的浏览器添加，可以做如下判断：
if(!Function.prototype.bind) {
Function.prototype.bind = function(){
}
}
这种行为也叫作 polyfill，为不支持的浏览器添加某项功能,以达到抹平浏览器之间的差距。
注意：如果浏览器支持，方便自己测试，可以把 if 条件去掉，或者把 bind 改一个名字。在下文准备改名字为 bind2，方便测试。
调用 bind 后会返回一个新的函数，当新函数被调用，原函数随之也被调用。
Function.prototype.bind2 = function(thisArg,...args){
let funcThis = this; // 函数调用bind，this指向原函数
// 返回新函数
return function (...rest) {
return funcThis.apply(thisArg,[...args,...rest]/*bind2传递的实参优先于新函数的实参*/)
}
}
// 测试
function func(a,b,c){
console.log(this)
console.log(a,b,c)
}
let newFunc = func.bind2({a:1},1,2);
newFunc(3);
// 打印：{a: 1}
// 打印：1 2 3
以上这个函数已经能够改变原函数 this 的指向，并传递正确顺序的参数。接下来就是比较难理解的地方，当新函数被当做构造函数的情况。
需要作出两个地方的改变：
- 新返回的函数要继承原函数原型上的属性
- 原函数改变this问题。如果用new调用，则原函数this指向应该是新函数中this的值；否则为传递的thisArg的值。
先做继承，让新函数继承原函数的原型，维持原来的原型关系。匿名函数没办法引用，所以给新函数起一个名字。
Function.prototype.bind2 = function(thisArg,...args){
let funcThis = this; // 函数调用bind，this指向原函数
// 要返回的新函数
let fBound = function (...rest) {
return funcThis.apply(thisArg,[...args,...rest]/*bind2传递的实参优先于新函数的实参*/)
}
// 不是所有函数都有prototype属性，比如 Function.prototype就没有。
if(funcThis.prototype){
// 使用Object.create，以原函数prototype作为新对象的原型创建对象
fBound.prototype = Object.create(funcThis.prototype);
}
return fBound;
}
// 测试
function func(name){
console.log(this); // {a: 1}
this.name = name;
}
func.prototype.hello = function(){
console.log(this.name); // undefined
}
let newFunc = func.bind2({a:1});
let o = new newFunc('seven')
o.hello();
// 打印：{a: 1}
// 打印：undefined
以上代码，新建的实例 o 能够调用到 hello 这个方法，说明继承已经实现，能够访问新函数上原型方法。
接下来是关于 this 指向问题，上面例子中，使用了 new 运算符调用函数，那么原函数中，this 应该指向实例才对。所以需要在改变 this 指向的 apply 那里对是否是使用 new 操作符调用的做判断。
用到的操作符是 instanceof，作用是判断一个函数的原型是否在一个对象的原型链上，是的话返回true，否则返回false。测试如下：
function Person(){}
let p = new Person();
console.log(p instanceof Person); // true
console.log(p instanceof Object); // true
console.log(p instanceof Array); // fasle
也可以用 instanceof 在构造函数中判断是否是通过 new 来调用的。如果是用 new 来调用，说明函数中 this 对象的原型链上存在函数的原型，会返回true。
function Person(){
console.log(this instanceof Person); // true
}
new Person();
回到我们的 bind2 函数上，当调用 bind2 后返回了新函数 fBound，当使用 new 调用构造函数时，实际上调用的就是 fBound 这个函数，所以只需要在 fBound 函数中利用 instanceof 来判断是否是用 new 来调用即可。
Function.prototype.bind2 = function(thisArg,...args){
let funcThis = this; // 函数调用bind，this指向原函数
// 要返回的新函数
let fBound = function (...rest) {
// 如果是new调用的，原函数this指向新函数中创建的实例对象
// 不是new调用，依然是调用bind2传递的第一个参数
thisArg = this instanceof fBound ? this : thisArg;
return funcThis.apply(thisArg,[...args,...rest]/*bind2传递的实参优先于新函数的实参*/)
}
// 不是所有函数都有prototype属性，比如 Function.prototype就没有。
if(funcThis.prototype){
// 使用Object.create，以原函数prototype作为新对象的原型创建对象
fBound.prototype = Object.create(funcThis.prototype);
}
return fBound;
}
// 测试
function func(name){
console.log(this); // {a: 1}
this.name = name;
}
func.prototype.hello = function(){
console.log(this.name); // undefined
}
let newFunc = func.bind2({a:1});
let o = new newFunc('seven')
o.hello();
// 打印：{name:'seven'}
// 打印：'seven'
bind 函数源码已实现完成，希望对你有帮助。
如有偏差欢迎指正学习，谢谢。
