本文主要介紹了JavaScript函數綁定用法,結合實例形式分析了javascript函數綁定的原理、實現方法與相關操作技巧,需要的朋友可以參考下,希望能幫助到大家。
Perface
#如果讓你實現這個頁面和一些操作的,例如點擊1、2 、3等就在那個input text中顯示,還有刪除功能,撥打我們先不要管它,只是模擬而已。要是我剛開始做的話,我會這樣做:
1. 用css、HTML佈局那個介面
2. 用javascript的事件委託監聽那個按鈕的父節點的點擊事件
但是如果我想用物件導向的想法做呢?我是用Ext做的,所以我想說的是它幫我封裝了很多。可能有些沒用過Ext的人不太了解我下面貼的程式碼,但我會盡量解釋清楚的!
Description
ContactTelPanel =Ext.extend(Ext.Panel, { //构造方法 constructor : function(config) { Ext.apply(this, config);//直接把config对象的属性全复制到this对象中 Parent = this.parent; var me = this; ContactTelPanel.superclass.constructor.call(this, {//用ContactTelPanel的父类也就是Ext.Panel的构造函数 autoScroll : true, title : "拨打电话",//设置title,跟这篇文章的主体没关系,不要管他 id : "contacttelpanel", bodyStyle : "padding: 30px 300px;", defaults : {//可以为该对象(ContactTelPanel)包含的组件(也就是在items配置选项)设置一些相同属性 layout : "column", defaults : { xtype : "button", width : 50, height : 25, style : "margin:4px 15px", handler : this.press //为每个按钮都添加一个click的事件 }, bodyBorder : false }, items : [ {//textfield组件 height : 30, width : 250, xtype : "textfield", id : "tf", style : "margin-bottom:10px" }, {// 没有xtype就是默认为panel,下面也是,不然就不要纠结了,直接在这里想象成第一行按钮1、按钮2、按钮3 items : [ { text : "1" }, { text : "2" }, { text : "3" } ] }, {// 这里是按钮4、按钮5、按钮6 items : [ { text : "4" }, { text : "5" }, { text : "6" } ] }, {// 这里是按钮7、按钮8、按钮9 下同 items : [ { text : "7" }, { text : "8" }, { text : "9" } ] }, { items : [ { text : "*" }, { text : "0" }, { text : "#" } ] }, { items : [ { text : "拨打", }, { text : "删除", } ] } ] }); }, press : function() { var text = this.text, textfield = Ext.getDom("tf"); if (/[0-9*#]/.test(text)) {//在textfield中显示所点击按钮的数字 textfield.value += text; } else if (this.text == "删除") {//删除功能 textfield.value = textfield.value.slice(0, -1); } else if (this.text == "拨打") {//这个先不要管他 Tel.telcall(textfield.value); } } });
註:其實從上面可以知道ContactTelPanel是繼承Ext.Panel,然後這個面板中有很多個鍵,每個鍵都監聽click事件。確實在這裡覺得自己敲得不是很好,應該是用事件委託來實現,因為你每個按鈕都監聽了click事件,太影響效率了。用事件委託我們可以指監聽它的父節點的click事件就行了,然後根據事件流來判斷目的對象並操作。本文重點還是監聽事件裡面handler : this.press
這段程式碼中 。我遇見的問題就是如果我在press函數要用到這個類別ContactTelPanel的一些屬性,該怎麼辦?
Idea
我在想,我想要在press函數中用到這個類別的屬性,我直接在press上用this物件來取得不就行了,但是我錯了,例如你在press函數中console.dir(this)
,看chrome控制台出現的是什麼?不幸的是它出現的是Button對象,它的this指針改了。確實有點麻煩,然後我就想了三個方法,如下:
Solution
1 在每個監聽事件的函數中傳參考
程式碼:handler : this.press(this)
,然後在press函數體內寫alert(arguments[0])
出現的情況:確實在這個頁面載入的時候就彈出視窗是ContactTelPanel,但是你點擊那些按鈕的時候它沒出現了
原因:this.press(this)
,這樣子寫javascript解析器會當作呼叫press函數,然後在你載入頁面就執行了
2 在這個ContactTelPanel類別中設定全域變數
程式碼:例如在第五行設定me = this,然後在press函數體中寫alert(me)
出現的情況:確實可以在點擊按鈕的時候彈出窗口,成功了
缺點:污染全域變量,容易被別人無意篡改。例如我在引入這個頁面的js後面再引用其他js的時候,在後面的js中設定var me = "monkindey",那麼你再點擊那個頁面的按鈕的時候它會彈出123,為不是ContactTelPanel物件
3 簡單運用了閉包
代碼:handler : function(){me.press(me)}
註:me就是ContactTelPanel對象,因為在function中this指標已經是button物件了,所以應該在function外面用me(或其他變數名稱)保存this對象,即var me = this
出現的情況:這當然是成功
4 用call來實作函數綁定
程式碼:handler : function(){ me.press.call(this,me );}
個人覺得:這個應該才是最好用的
另:前面一篇詳解JavaScript函數綁定介紹了基於純js的函數綁定技術,有興趣的讀者可對照一下二者的異同。
相關推薦:
#js使用函數綁定技術改變事件處理程序的作用域_javascript技巧
以上是實例講解JavaScript函數綁定用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!