javascript之bind使用介紹

前幾天看到一個面試題，題目是這樣的：
請你說說對javascript中apply，call，bind的理解？
首先apply和call是老生常談的東西，但是對於bind，我愣了下，因為這個詞是jquery中使用頻率很高的一個方法，用來給DOM元素繫結事件用的。
為了搞清這個陌生又熟悉的bind，google一下，發現javascript1.8.5版本中原生實現了此方法，目前IE9+，ff4+，chrome7+支援此方法，opera和safari不支援（MDN上的說明）。
bind的作用和apply，call類似都是改變函數的execute context，也就是runtime時this關鍵字的指向。但是使用方法略有不同。一個函數進行bind後可稍後執行。
例子如下： 複製代碼 代碼如下:var person = {
name: 'Andrew',
job: 'web front end developer',
gender: 'male',
sayHello: function() {
return 'Hi, I am ' + this.name + ', a ' + this.job;
}
}
console.log(person.sayHello()); // Hi, I am Andrew, a web front end developer
var anotherGuySayHello = person.sayHello.bind({
name:'Alex',
job: 'back end C# developer'
});
console.log(anotherGuySayHello()); // Hi, I am Alex, a back end C# developer

另外帶有參數的例子： 複製代碼 代碼如下:function add(arg1, arg2, arg3, arg4) {
return arg1 + ' ' + arg2 + ' ' + arg3 + ' ' + arg4;
}
var addMore = add.bind({}, 'a', 'b');
console.log(addMore('c', 'd')); // a b c d

如果你的瀏覽器暫時不支援此方法，但你又覺得這個很cool，想用，MDN上也給出參考實現， 這個實現很有意思，代碼如下： 複製代碼 代碼如下:if(!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if(typeof this !== 'function') {
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var fSlice = Array.prototype.slice,
aArgs = fSlice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP ? this : oThis || window, aArgs.concat(fSlice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}

最後幾行代碼，通過prototype chain的方式，其中fBound是調用bind函數的子類，為什麼這麼實現，可以仔細看 fBound = function(){ return ... }這一部分，其中this是運行時決定的，這裡主要考慮到如果用new的方式來調用函數(建構函式方式)的情況。
下面的例子，就能很好的說明這點，為了方便說明，此例子直接來自MDN： 複製代碼 代碼如下:function Point(x,y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function() {
return this.x + ',' + this.y;
};
var p = new Point(1, 2);
p.toString(); // 1,2
var emptyObj = {};
var YAxisPoint = Point.bind(emptyObj, 0);
var axisPoint = new YAxisPoint(5);
axisPoint.toString(); // 0, 5
axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true

最後給出文章連結，方便您進一步瞭解
MDN: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

MSDN: http://msdn.microsoft.com/en-us/library/ff841995%28v=vs.94%29.aspx