首頁 > 文章 > web前端 > 實例講解JavaScript函數綁定用法

實例講解JavaScript函數綁定用法

小云云原創: 2017-12-21 10:17:561216瀏覽

本文主要介紹了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的函數綁定技術，有興趣的讀者可對照一下二者的異同。

實例講解JavaScript函數綁定用法

相關文章