快捷導(dǎo)航

javascript之bind使用介紹

更新時(shí)間：2011年10月09日 00:12:05 作者：

首先apply和call是老生常談的東西，但是對(duì)于bind，我愣了下，因?yàn)檫@個(gè)詞是jquery中使用頻率很高的一個(gè)方法，用來(lái)給DOM元素綁定事件用的

前幾天看到一個(gè)面試題，題目是這樣的：
請(qǐng)你說(shuō)說(shuō)對(duì)javascript中apply，call，bind的理解？
首先apply和call是老生常談的東西，但是對(duì)于bind，我愣了下，因?yàn)檫@個(gè)詞是jquery中使用頻率很高的一個(gè)方法，用來(lái)給DOM元素綁定事件用的。
為了搞清這個(gè)陌生又熟悉的bind，google一下，發(fā)現(xiàn)javascript1.8.5版本中原生實(shí)現(xiàn)了此方法，目前IE9+，ff4+，chrome7+支持此方法，opera和safari不支持（MDN上的說(shuō)明）。
bind的作用和apply，call類(lèi)似都是改變函數(shù)的execute context，也就是runtime時(shí)this關(guān)鍵字的指向。但是使用方法略有不同。一個(gè)函數(shù)進(jìn)行bind后可稍后執(zhí)行。
例子如下：

復(fù)制代碼代碼如下:

 
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 

另外帶有參數(shù)的例子：

復(fù)制代碼代碼如下:

 
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 

如果你的瀏覽器暫時(shí)不支持此方法，但你又覺(jué)得這個(gè)很cool，想用，MDN上也給出參考實(shí)現(xiàn)，這個(gè)實(shí)現(xiàn)很有意思，代碼如下：

復(fù)制代碼代碼如下:

 
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; 
}; 
} 

最后幾行代碼，通過(guò)prototype chain的方式，其中fBound是調(diào)用bind函數(shù)的子類(lèi)，為什么這么實(shí)現(xiàn)，可以仔細(xì)看 fBound = function(){ return ... }這一部分，其中this是運(yùn)行時(shí)決定的，這里主要考慮到如果用new的方式來(lái)調(diào)用函數(shù)(構(gòu)造函數(shù)方式)的情況。
下面的例子，就能很好的說(shuō)明這點(diǎn)，為了方便說(shuō)明，此例子直接來(lái)自MDN：

復(fù)制代碼代碼如下:

 
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 