jQuery 外掛程式 的this 指向問題（實戰）

標籤：顯示   點擊事件   date   input   菜單   函數   date()   綁定   new   

daterangepicker 是一個JavaScript組件，用來選擇日期。

資源直接搜尋 daterangepicker 即可，當然好看的樣式可以基於Bootstrap。

官網：http://www.daterangepicker.com/

 

搭建項目環境

daterangepicker js 基於 jQuery 和 moment

 

css基於bootstrap

 

html代碼

輸入框選擇日期

label 用於顯示選中的時間

button1 清除 label 時間

button2 重新賦值 label 時間

 

js代碼實現功能

1. input 使用外掛程式，並設定回呼函數用來將控制項選中的值賦值給 label。具體使用方法查看官網，不是本文重點。

$("input[name=callbackDate]").daterangepicker(
  {
     singleDatePicker: true, //只顯示單日期選擇
  },function(start, end, label) {
      var date = new Date(start);
      $("#showTime").html("label time: " + 
         date.getFullYear() + "年" +
         (date.getMonth() + 1) + "月" +
         date.getDate() + "日")
  }
)

2. button1點擊事件設定

$("#clearLabelTime").click(function(){  {
     $("#showTime").html("label time: ");
}

3. button2點擊事件設定

請問！請問！！請問！！！如何?？

一個辦法，重新獲得 input 的時間，寫個方法。如果是這樣的話，和 this 有毛線關係。

 

        既然是重新設定 label 的時間，那之前肯定是設定過的，什麼時候設定的呢？在點擊時間控制項後調用回呼函數。（哦，對了，還有一個方法是重新點擊時間控制項上的時間，相當於重新選擇一次）。

        那麼外掛程式有沒有提供一個方法是：在時間選擇以後，重新調用函數的呢？查看源碼（別問為什麼，官網沒有提供，但是我不相信他沒有寫這個方法）後找到：

        其中 cb 就是回呼函數綁定到 DateRangePicker 對象上的方法。this 在對象中的指向問題可以看第一篇文章介紹。

        如果真是這樣，那就很好解決了，按照正常人的思路，將調用 daterangepicker 的地方設定變數，然後調用 notify 方法就哦了。我也這麼試了：

var datepicker = $("...").daterangepicker({
  ...
  },function(...){
   ...
  }
)

$("#setLabelTime").click(function(){  {
    datepicker.notify();
}

但是瀏覽器報錯沒有 notify 方法。

輸出 datepicker 對象一看，#￥%……&

datepicker對象居然是一個 jQuery 對象$("input[...]")。

what？？？

繼續看源碼：

這段代碼是調用的入口，返回this，this是什麼呢？

$.fn.這是在擴充 jQuery 對象，daterangepicker是擴充的一個方法，（對象方法中的this指向誰的問題同樣參考上一篇文章）。this 指向 jQuery對象$("input[...]")。

 

到了這時候應該怎麼辦？放棄嗎？怎麼可能。

看第六行代碼，new了一個DateRangePicker對象，那如果我們能想辦法拿到這個對象，是不是就萬事大吉了？開幹，修改這段代碼如下：

重新跑代碼，哦了。

 

關於外掛程式作者代碼

當然了，代碼中返回什麼對象，返回哪個對象的問題，我不明白作者是怎麼想的。如果是我來寫外掛程式，肯定不會返回一個jQuery對象，因為沒什麼必要。然而代碼中有很多方法是綁定在DateRangePicker原型上的。。。

 

好吧，這篇文章主要是一個執行個體介紹 this 在不同環境下的指向問題。

想要這些代碼內容的可以在公眾號菜單中找到連絡方式，或者加 QQ群 422033835

 

jQuery 外掛程式 的this 指向問題（實戰）