js手札--bind

bind {
解决问题：callback() { this ? //谁在用 }
}

function callback() {
   console.log(this);
}

function foo(cb) {
  cb();
}

foo(callback);  // 输出的this是谁的呢？  =>  全局window的
foo(callback.bind(callback));  // 输出的this是谁的呢？  =>  callback的
foo(callback.bind(foo));  // 输出的this是谁的呢？  =>  foo的

来看个具体的问题(后面就举了个例子，没兴趣的可以到此为止了。篇幅比较短，见谅) =>

一、问题再现

// 把['x','y',1,2]拷贝到lost.arr中

var lost = {
    arr : [],
    pushArray: function(s) {
        this.arr.push(s);
    }
};

// error 不认识arr
// 因为作用域问题。现在调用pushArray的对象是window，而window是没有arr的
['x','y',1,2].forEach(lost.pushArray);

二、证明问题

那么怎么就能证明是window对象调用了lost.pushArray呢。

window.arr = [];
['x','y',1,2].forEach(lost.pushArray);
console.log(window.arr);

三、解决方法

I.使用匿名函数

其实看看上面的丢失原因之后，就知道了其实pushArray的使用权被window对象夺去了，而我们需要让lost夺回pushArray的使用权。

// 在核心代码前，加一层壳（匿名函数），让window使用这个匿名函数，就解决了
['x','y',1,2].forEach(function(s) { // 匿名函数
    // 核心代码
    lost.pushArray(s);
});

II.使用bind

使用bind就比较优雅了。

['x','y',1,2].forEach(lost.pushArray.bind(lost));

结合第一种解决方法，大胆的猜测，bind的伪实现可以是，相当于返回一个匿名函数。

function bind(me) {
   var fn = this;
   return function() {
       fn.apply(me, arguments);
   }
}

验证一下，哈哈，结果和bind一样哟。