聊聊Function的bind()

bind顾名思义，绑定。

bind()方法会建立一个新函数，当这个新函数被调用时，它的this值是传递给bind()的第一个参数，它的参数是bind()的其余参数和其本来的参数。

上面这个定义最后一句有点绕，咱们来理一下。

bind()接受无数个参数，第一个参数是它生成的新函数的this指向，好比我传个window，无论它在何处调用，这个新函数中的this就指向window，这个新函数的参数就是bind()的第二个、第三个、第四个....第n个参数加上它本来的参数。（行吧，我本身都蒙圈了）

咱们仍是看看栗子比较好理解，举个bind()最基本的使用方法：

this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 返回 81

var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种状况下，"this"指向全局做用域

// 建立一个新函数，将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

这里很明显，咱们在window对象下调用retrieveX，获得的结果确定是window下的x，咱们把module对象绑定到retrieveX的this上，问题就解决了，无论它在何处调用，this都是指向module对象。

还有bind()的其余参数，相信第一次接触bind()的朋友看到上面的定义都会蒙圈。

仍是举个栗子：

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 建立一个拥有预设初始参数的函数
var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});

var list2 = leadingThirtysevenList(); // [[69,37],{a:2}]
var list3 = leadingThirtysevenList(1, 2, 3); // [[69,37],{a:2}, 1, 2, 3]

list函数很简单，把传入的每一个参数插入到一个数组里，咱们用bind()给list函数设置初始值，由于不用改变list中this的指向，因此直接传undefined，从第二个参数开始，就是要传入list函数的值，list2和list3的返回值很好的说明了一切。

我本身通常使用的bind()的场景是配合setTimeout函数，由于在执行setTimeout时，this会默认指向window对象，在使用bind()以前，我是这么作的：

    function Coder(name) {
        var that = this;
        that.name = name;
        that.getName = function() {
            console.log(that.name)
        };
        that.delayGetName = function() {
            setTimeout(that.getName,1000)
        };
    }
    var me = new Coder('Jins')
    me.delayGetName()//延迟一秒输出Jins

在函数内顶层定义一个that缓存this的指针，这样不论怎么调用，that都是指向 Coder的实例，可是多定义一个变量老是让人不太舒服。

使用bind()就简单多了：

    function Coder(name) {
        this.name = name;
        this.getName = function() {
            console.log(this.name)
        };
        this.delayGetName = function() {
            setTimeout(this.getName.bind(this),1000)
        };
    }
    var me = new Coder('Jins')
    me.delayGetName()//延迟一秒输出Jins

 这样就OK了，直接把setTimeout的this绑定到外层的this，这确定是咱们想要的！

行吧，先聊这么多，坚持学习！

最后附上参考地址：

Function.prototype.bind()