Javascript中function函數bind方法實例用法詳解

Function.prototype.bind()

bind方法用來指定函數內部的this指向（執行時所在的作用域），然後傳回一個新函數。 bind方法並非立即執行一個函數。

var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 keith.count(); //1
 keith.count(); //2
 keith.count(); //3

上面程式碼中，如果this.a指向keith物件內部的a屬性，如果這個方法賦值給另外一個變數，呼叫時就會出錯。

 var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 var f = keith.count;
 f(); //NaN

上面程式碼中，如果把count方法賦值給f變量，那麼this物件指向不再是keith物件了，而是window物件。而window.a預設為undefined，進行遞增運算之後undefined++就等於NaN。

為了解決這個問題，可以使用bind方法，將keith物件裡的this綁定到keith物件上，或是直接呼叫。

 var f = keith.count.bind(keith);
 f(); //1
 f(); //2
 f(); //3
 keith.count.bind(keith)() //1
 keith.count.bind(keith)() //2
 keith.count.bind(keith)() //3

 當然，this也可以綁定到其他物件上。

 var obj = {
 a: 100
 };
 var f = keith.count.bind(obj);
 f(); //100
 f(); //101
 f(); //102

同樣，我們也可以給bind方法傳遞參數，第一個參數如果為null或undefined或this，會將函數內部的this物件指向全域環境；第二個為呼叫時所需的參數，且傳遞參數的形式與call方法相同。

 function keith(a, b) {
 return a + b;
 }
 console.log(keith.apply(null,[1,4])); //5
 console.log(keith.call(null,1,4)); //5
 console.log(keith.bind(null, 1, 4)); //keith()
 console.log(keith.bind(null, 1, 4)()); //5

上面程式碼中，可以看出call，apply，bind三者的區別：call和apply方法都是在呼叫之後立即執行的。而bind呼叫之後是回傳原函數，需要再呼叫一次才行，有點像閉包的味道

以上是Javascript中function函數bind方法實例用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！