Javascript中的this,bind和that使用實(shí)例
這篇文章主要介紹了Javascript中的this,bind和that使用實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
Javascript中必須通過this來(lái)訪問類成員,可是this的特點(diǎn)就是函數(shù)綁在哪個(gè)對(duì)象上,它就指向那個(gè)對(duì)象。這個(gè)可能困擾過很多的程序員,特別是從C#,Java等語(yǔ)言過來(lái)的程序員。
function Foo(){ this.message = 'This is message from Foo'; } Foo.prototype.printMessage = function(){ console.log(this.message); } function Foo2(){ this.message = 'This is message from Foo2'; } var foo = new Foo(); foo.printMessage(); var foo2 = new Foo2(); foo2.printMessage = foo.printMessage; foo2.printMessage();
輸出為:
This is message from Foo
This is message from Foo2
主要原因就是this改變了,因此Javascript中this的用法,和C++\C#中的大為不同。如果需要傳統(tǒng)方式使用this的函數(shù),可以使用Function.prototype.bind(),指定函數(shù)的this值:
function Foo(){ this.message = 'This is message from Foo'; this.printMessage = (function(){ console.log(this.message); }).bind(this); } function Foo2(){ this.message = 'This is message from Foo2'; } var foo = new Foo(); foo.printMessage(); var foo2 = new Foo2(); foo2.printMessage = foo.printMessage; foo2.printMessage();
輸出為:
This is message from Foo
This is message from Foo
另外使用call和apply也可以改變函數(shù)調(diào)用時(shí)的this值。
bind函數(shù)的主要問題是IE9以后才開始提供。并且一旦開始習(xí)慣了Javascript的this用法,這種bind反而會(huì)不習(xí)慣。在實(shí)踐中,更多用到的還是保存this:
function Foo(){ var that = this; this.message = 'This is message from Foo'; this.printMessage = function(){ console.log(that.message); }; } function Foo2(){ this.message = 'This is message from Foo2'; } var foo = new Foo(); foo.printMessage(); var foo2 = new Foo2(); foo2.printMessage = foo.printMessage; foo2.printMessage();
輸出同上。
注意我們是通過that來(lái)訪問的message(除了that,context和self也是常用的名稱)。Javascript一個(gè)還算欣慰的地方就是他的閉包上下文始終是在函數(shù)定義的地方,因此不管函數(shù)被掛上哪個(gè)對(duì)象上,捕獲到的that始終是這個(gè)。當(dāng)然這個(gè)地方不算閉包,有閉無(wú)包,但原理是相同的。這也是實(shí)踐中用的最多的方法,推薦使用。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 設(shè)置文本框中焦點(diǎn)的位置
設(shè)置文本框中焦點(diǎn)的位置的實(shí)現(xiàn)代碼2009-11-11Javascript實(shí)現(xiàn)的CSS代碼高亮顯示
到網(wǎng)上一位別出心裁的高手使用字符串而不是正則表達(dá)式實(shí)現(xiàn)了Javascript代碼高亮顯示,自己受益匪淺,于是就構(gòu)思了CSS代碼的高亮顯示。2009-11-11(推薦一個(gè)超好的JS函數(shù)庫(kù))S.Sams Lifexperience ScriptClassLib
(推薦一個(gè)超好的JS函數(shù)庫(kù))S.Sams Lifexperience ScriptClassLib...2007-04-04詳解JavaScript數(shù)據(jù)類型和判斷方法
這篇文章主要介紹了JavaScript數(shù)據(jù)類型和判斷方法的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09ES6頂層對(duì)象、global對(duì)象實(shí)例分析
這篇文章主要介紹了ES6頂層對(duì)象、global對(duì)象,結(jié)合實(shí)例形式分析了ES6頂層對(duì)象與global對(duì)象的概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06淺析JavaScript如何解決跨域問題并手寫一個(gè)jsonp
跨域是指瀏覽器為了安全性,實(shí)施的同源策略,同源策略要求,只有協(xié)議、域名和端口號(hào)完全相同的網(wǎng)頁(yè),才能共享資源,本文整理了一些常用的跨域解決方法,希望對(duì)大家有所幫助2024-03-03es6函數(shù)之尾調(diào)用優(yōu)化實(shí)例分析
這篇文章主要介紹了es6函數(shù)之尾調(diào)用優(yōu)化,結(jié)合實(shí)例形式分析了es6函數(shù)尾調(diào)用優(yōu)化相關(guān)功能、原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04javascript實(shí)現(xiàn)的一個(gè)帶下拉框功能的文本框
這篇文章主要介紹了javascript實(shí)現(xiàn)的一個(gè)帶下拉框功能的文本框,需要的朋友可以參考下2014-05-05