前幾天看到一個(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í)行燕侠。
例子如下：
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)很有意思蜓耻，代碼如下：
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
最后給出文章鏈接挣磨，方便您進(jìn)一步了解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
