這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)函數(shù)綁定，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、桑日ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的桑日網(wǎng)站制作公司

具體如下：

Perface

如果讓你實(shí)現(xiàn)這個(gè)頁(yè)面和一些操作的，比如點(diǎn)擊1、2、3等就在那個(gè)input text中顯示，還有刪除功能，撥打我們先不要管它，只是模擬而已。要是我剛開(kāi)始做的話，我會(huì)這樣做：

1. 用css、HTML布局那個(gè)界面

2. 用javascript的事件委托監(jiān)聽(tīng)那個(gè)按鈕的父節(jié)點(diǎn)的點(diǎn)擊事件

但是如果我想用面向?qū)ο蟮乃枷胱瞿?？我是用Ext做的，所以我想說(shuō)的是它幫我封裝了很多?？赡芤恍](méi)用過(guò)Ext的人不太了解我下面貼的代碼，但是我會(huì)盡量解釋清楚的！

Description

ContactTelPanel =Ext.extend(Ext.Panel, {
  //構(gòu)造方法
  constructor : function(config) {
    Ext.apply(this, config);//直接把config對(duì)象的屬性全復(fù)制到this對(duì)象中
    Parent = this.parent;
    var me = this;
    ContactTelPanel.superclass.constructor.call(this, {//用ContactTelPanel的父類也就是Ext.Panel的構(gòu)造函數(shù)
      autoScroll : true,
      title : "撥打電話",//設(shè)置title，跟這篇文章的主體沒(méi)關(guān)系，不要管他
      id : "contacttelpanel",
      bodyStyle : "padding: 30px 300px;",
      defaults : {//可以為該對(duì)象(ContactTelPanel)包含的組件(也就是在items配置選項(xiàng))設(shè)置一些相同屬性
        layout : "column",
        defaults : {
          xtype : "button",
          width : 50,
          height : 25,
          style : "margin:4px 15px",
          handler : this.press //為每個(gè)按鈕都添加一個(gè)click的事件
        },
        bodyBorder : false
      },
      items : [ {//textfield組件
        height : 30,
        width : 250,
        xtype : "textfield",
        id : "tf",
        style : "margin-bottom:10px"
      }, {// 沒(méi)有xtype就是默認(rèn)為panel，下面也是，不然就不要糾結(jié)了，直接在這里想象成第一行按鈕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中顯示所點(diǎn)擊按鈕的數(shù)字
      textfield.value += text;
    } else if (this.text == "刪除") {//刪除功能
      textfield.value = textfield.value.slice(0, -1);
    } else if (this.text == "撥打") {//這個(gè)先不要管他
      Tel.telcall(textfield.value);
    }
  }
});

注：其實(shí)從上面可以知道ContactTelPanel是繼承Ext.Panel，然后這個(gè)面板中有很多個(gè)鍵，每個(gè)鍵都監(jiān)聽(tīng)click事件。確實(shí)在這里覺(jué)得自己敲得不是很好，應(yīng)該是用事件委托來(lái)實(shí)現(xiàn)，因?yàn)槟忝總€(gè)按鈕都監(jiān)聽(tīng)了click事件，太影響效率了。用事件委托我們可以指監(jiān)聽(tīng)它的父節(jié)點(diǎn)的click事件就行了，然后根據(jù)事件流來(lái)判斷目的對(duì)象并操作。本文重點(diǎn)還是監(jiān)聽(tīng)事件里面handler : this.press這段代碼中 。我遇見(jiàn)的問(wèn)題就是如果我在press函數(shù)要用到這個(gè)類ContactTelPanel的一些屬性，怎么辦？

Idea

我在想，我要在press函數(shù)中用到這個(gè)類的屬性，我直接在press用this對(duì)象來(lái)獲取不就行了，但是我錯(cuò)了，比如你在press函數(shù)中console.dir(this),看chrome控制臺(tái)出現(xiàn)的是什么?不幸的是它出現(xiàn)的是Button對(duì)象，它的this指針改了。確實(shí)有點(diǎn)麻煩，然后我就想了三個(gè)方法，如下：

Solution

1 在每個(gè)監(jiān)聽(tīng)事件的函數(shù)中傳參

代碼：handler : this.press(this),然后在press函數(shù)體中寫alert(arguments[0])

出現(xiàn)的情況：確實(shí)在這個(gè)頁(yè)面加載的時(shí)候就彈出窗口是ContactTelPanel，但是你點(diǎn)擊那些按鈕的時(shí)候它沒(méi)出現(xiàn)了

原因：this.press(this),這樣子寫javascript解析器會(huì)當(dāng)作調(diào)用press函數(shù)，然后在你加載頁(yè)面就執(zhí)行了

2 在這個(gè)ContactTelPanel類中設(shè)置全局變量

代碼：比如在第五行設(shè)置me = this，然后在press函數(shù)體中寫alert(me)

出現(xiàn)的情況：確實(shí)可以在點(diǎn)擊按鈕的時(shí)候彈出窗口，成功了

缺點(diǎn)：污染全局變量，容易被別人無(wú)意篡改。比如我在引入這個(gè)頁(yè)面的js后面再引用其他js的時(shí)候，在后面的js中設(shè)置var me = "monkindey",那么你再點(diǎn)擊那個(gè)頁(yè)面的按鈕的時(shí)候它會(huì)彈出123，為不是ContactTelPanel對(duì)象

3 簡(jiǎn)單運(yùn)用了閉包

代碼：handler : function(){me.press(me)} 注：me就是ContactTelPanel對(duì)象，因?yàn)樵趂unction中this指針已經(jīng)是button對(duì)象了，所以應(yīng)該在function外面用me(或者其他變量名)保存this對(duì)象，即var me = this

出現(xiàn)的情況：這個(gè)當(dāng)然是成功

4 用call來(lái)實(shí)現(xiàn)函數(shù)綁定

代碼：handler : function(){ me.press.call(this,me);}

個(gè)人覺(jué)得：這個(gè)應(yīng)該才是最好用的

另：前面一篇詳解JavaScript函數(shù)綁定介紹了基于純js的函數(shù)綁定技術(shù)，感興趣的讀者可對(duì)照一下二者的異同。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript如何實(shí)現(xiàn)函數(shù)綁定”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!