ECMAScript5(ES5)中bind方法使用小结

bind方法概述与this指向原理

过去对于涉及this关键字的各种方法，如call和apply等，理解往往不够透彻。最近遇到一道关于bind方法的面试题，因此整理此文以备日后查阅。

bind方法与call、apply类似，均用于修改上下文中的this指向。区别在于，call和apply是直接调用方法并立即执行，而bind在绑定this后返回一个新的函数对象，其内部实现依然依赖于apply。

直接通过代码示例进行说明：

var obj = {
a: 1,
b: 2,
getCount: function(c, d) {
return this.a + this.b + c + d;
  }
};
 
window.a = window.b = 0;
console.log(obj.getCount(3, 4)); // 10
var func = obj.getCount;
console.log(func(3, 4)); // 7

bind方法的使用示例与兼容性处理

造成上述现象的原因是，func在全局上下文中的this指向window对象。bind方法的存在正是为了解决这一问题，通过改变this指向来获取预期的结果：

var obj = {
a: 1,
b: 2,
getCount: function(c, d) {
return this.a + this.b + c + d;
  }
};
 
window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4)); // 10

bind是Function原型上的一个扩展方法。使用bind后，代码重新绑定了func内部的this指向obj。需要注意的是，该方法在IE6至IE8浏览器中不兼容，以下是兼容版本的代码实现：

var obj = {
a: 1,
b: 2,
getCount: function(c, d) {
return this.a + this.b + c + d;
  }
};
 
Function.prototype.bind = Function.prototype.bind || function(context) {
var that = this;
return function() {
// console.log(arguments); // console [3,4] if ie<6-8>
return that.apply(context, arguments);
 
  }
}
window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4)); // 10

bind与apply/call的区别分析

从个人角度来看，bind的核心在于返回一个尚未执行的方法。如果直接使用apply或call：

var ans = obj.getCount.apply(obj, [3, 4]);
console.log(ans); // 10

这种方式无法通过简写的func函数构造器来灵活构建，因此使用bind传递this指向并返回一个未执行的方法，其实现方式非常巧妙。