javascript bind函數

bind函數，顧名思義，用於為調用函數綁定一個範圍，因為this很容易跟丟它原來所在的範圍，直接指向頂層的window對象。具體結論可參見我另一篇博文《javascript的動態this與動態綁定》。本文專註設計一個無侵入的綁定函數。

window.name = "the window object"function scopeTest() {  return this.name}// calling the function in global scope:scopeTest()// -> "the window object"var foo = {  name: "the foo object!",  otherScopeTest: function() { return this.name }}foo.otherScopeTest()// -> "the foo object!"

<br />window.name = "the window object"</p><p>function scopeTest() {<br /> alert(this.name)<br />}</p><p>// calling the function in global scope:<br />scopeTest()<br />// -> "the window object"</p><p>var foo = {<br /> name: "the foo object!",<br /> otherScopeTest: function() { alert(this.name) }<br />}</p><p>foo.otherScopeTest()<br />// -> "the foo object!"<br />

運行代碼

基於不擴充原生對象的原則，弄了這個bind函數（dom為範圍），用法與Prototype架構的bind差不多。

   dom.bind = function(fn,context){    //第二個參數如果你喜歡的話，也可以改為thisObject,scope，    //總之，是一個新的範圍對象    if (arguments.length < 2 && context===undefined) return fn;    var method = fn,    slice = Array.prototype.slice,    args = slice.call(arguments, 2) ;    return function(){//這裡傳入原fn的參數      var array = slice.call(arguments, 0);      method.apply(context,args.concat(array))    }

用法：第一個參數為需要綁定範圍的函數，第二個為window或各種對象，其他參數隨意。

<br /> dom = {};<br /> dom.bind = function(fn,context){<br /> if (arguments.length < 2 && context===undefined) return fn;<br /> var method = fn,<br /> slice = Array.prototype.slice,<br /> args = slice.call(arguments, 2);<br /> return function(){//這裡傳入原fn的參數<br /> var array = slice.call(arguments, 0);<br /> method.apply(context,args.concat(array))<br /> }<br /> }</p><p> window.name = 'This is window';<br /> var jj = {<br /> name: '這是jj',<br /> alertName: function() {//綁定失效<br /> alert(this.name);<br /> }<br /> };<br /> var kk = {<br /> name:"kkです"<br /> }<br /> function run(f) {<br /> f();<br /> }</p><p> run(jj.alertName);<br /> var fx2 = dom.bind(jj.alertName,jj)<br /> run(fx2);<br /> var fx3 = dom.bind(jj.alertName,window)<br /> run(fx3);<br /> var fx4 = dom.bind(jj.alertName,kk)<br /> run(fx4);</p><p>

運行代碼

另一個例子：

<br /> dom = {};<br /> dom.bind = function(fn,context){<br /> if (arguments.length < 2 && context===undefined) return fn;<br /> var method = fn,<br /> slice = Array.prototype.slice,<br /> args = slice.call(arguments, 2);<br /> return function(){//這裡傳入原fn的參數<br /> var array = slice.call(arguments, 0);<br /> method.apply(context,args.concat(array))<br /> }<br /> }</p><p> var obj = {<br /> name: 'A nice demo',<br /> fx: function() {<br /> alert(this.name + '\n' + Array.prototype.slice.call(arguments,0).join(', '));<br /> }<br /> };</p><p> var fx2 = dom.bind(obj.fx,obj, 1, 2, 3);<br /> fx2(4, 5); // Alerts the proper name, then "1, 2, 3, 4, 5"<br />

運行代碼