首頁 > web前端 > js教程 > Javascript中function函數bind方法實例用法詳解

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

伊谢尔伦
發布: 2017-07-20 14:11:46
原創
3255 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板