javascript之bind使用介紹

javascript之bind使用介紹,首先apply和call是老生常談的東西,但是對于bind,我愣了下,因為這個詞是jquery中使用頻率很高的一個方法,用來給DOM元素綁定事件用的
關鍵字: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
众人帮太赚钱了