bind函数作用、应用场景以及模拟实现

javascript

bind函数

bind 函数挂在 Function 的原型上

Function.prototype.bind

创建的函数都可以直接调用 bind,使用：

function func(){
    console.log(this)
}
func.bind(); // 用函数来调用

bind 的作用：

bind() 方法调用后会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为新函数运行时的 this的值，之后的序列参数将会在传递的实参前传入作为新函数的参数。

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函数才会被执行

从以上得到如下信息：
1. bind被函数调用
2. 返回一个新函数
3. 能改变函数this指向
4. 可以传入参数

深入bind 使用

以上知道了 bind 函数的作用以及使用方式，接下深入到 bind 函数的使用中，具体介绍三个方面的使用，这也是之后模拟实现 bind 函数的要点。

1. 改变函数运行时this指向
2. 传递参数
3. 返回的新函数被当成构造函数

改变函数运行时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，具体的点：
1. 被函数调用
2. 返回新函数
3. 传递参数
4. 改变函数运行时this指向
5. 新函数被当做构造函数时处理

被函数调用，可以直接挂在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 的指向，并传递正确顺序的参数。接下来就是比较难理解的地方，当新函数被当做构造函数的情况。

需要作出两个地方的改变：

1. 新返回的函数要继承原函数原型上的属性
2. 原函数改变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 函数源码已实现完成，希望对你有帮助。