在Javascript中傳遞和返回一個對象到/從一個函數。

Question

我已經對上述主題進行了一些挖掘，但是現在比我開始時更困惑。

我有一個單位轉換器，我正在努力。

它作爲一個基本模型正常工作，但我現在試圖使它更加模塊化。

有許多單位和許多轉換。

我的計劃是確定需要什麼類型的轉換，溫度，面積等，然後調用適當的函數來執行數學運算。

我對JS很陌生，這對我並沒有什麼幫助，因爲這可能是一個簡單的錯誤，但我很可能會收到巨大的錯誤。

我認爲問題是將對象傳遞給下一個函數，然後使用它。

我已經玩了很多代碼，在網上嘗試了許多不同的建議，但仍然沒有成功。

這裏是我的代碼：

<script type="text/javascript"> 

    function Convert(from, to, units, res){ 

     this.from = from; 
     this.to = to; 
     this.units = units; 
     this.res = res; 
    } 

    Convert.convertUnits = function(){ 

     var measurementType = $(".from option:selected").attr("class"); 
     var result = "invalid input"; 
     var input = parseInt(this.units.val()); 

      if(measurementType == "temp"){ 
       var test = new Convert($("#from"), $("#to"), $("#units"), $("#result")); 
       test.convertTemp(); 
       console.log('Did we get this far?!?! ::', measurementType); 
      } 
     console.log('or not???? ::', measurementType); 
    } 

    Convert.prototype.convertTemp = function(){ 

     var result = "invalid input"; 
     var input = parseInt(this.units.val()); 
     var f = this.from.val(); 
     var t = this.to.val() 

     if(!isNaN(input)) { 
      if(f == "degC"){ 
       if(t == "degF"){ 
        result = input * 1.8 + 32; 
       } 
       if(t == "kelvin"){ 
        result = input + 273.15; 
       } 
      } 
     } 
     console.log('Parsed input is', input, "and result is", result); 
     this.res.val(result); 
     return result; 
    } 

    //var calcTempTest = new Convert($("#from"), $("#to"), $("#units"), $("#result")); 
    //var test = new Convert($("#from"), $("#to"), $("#units"), $("#result")); 

    $("#btnConvert").click.convertUnits(); 

</script> 

Answer 1

第一個明顯的問題是這一行：

$("#btnConvert").click.convertUnits(); 

這會嘗試調用由$("#btnConvert")返回的jQuery對象的click方法中定義的convertUnits()方法。沒有這樣的方法，所以你會得到關於如何click沒有方法'convertUnits'的錯誤。

你想要做有通過它傳遞給.click()方法作爲參數綁定convertUnits()功能作爲一個點擊處理程序，你做什麼：

$("#btnConvert").click(Convert.convertUnits) 

這是沒有意義有聲明convertUnits()作爲Convert()屬性，雖然如此（雖然它會工作作爲是）我會改變它僅僅是：

function convertUnits() { 
    // your code here 
} 
$("#btnConvert").click(convertUnits); 

唯一的其他東西停止代碼工作是，在這條線：

var input = parseInt(this.units.val()); 

...您使用this假定這將是一個Convert對象與units屬性，但您尚未創建Convert對象 - 你這樣做的if(measurementType == "temp")塊這一行內：

var test = new Convert($("#from"), $("#to"), $("#units"), $("#result")); 

所以移到該行的開頭該功能，然後使用test代替this：

function convertUnits(){ 
    var test = new Convert($("#from"), $("#to"), $("#units"), $("#result")); 
    var measurementType = $(".from option:selected").attr("class"); 
    var result = "invalid input"; 
    var input = parseInt(test.units.val()); 
    if(measurementType == "temp"){ 
     test.convertTemp(); 
     console.log('Did we get this far?!?! ::', measurementType); 
    } 
    console.log('or not???? ::', measurementType); 
} 

工作演示：http://jsfiddle.net/jT2ke/

一些無關的建議：parseInt()對於輸入到轉換器中的數字沒有意義，因爲用戶可能想要輸入十進制值。您可以使用parseFloat()代替，或一元加運算：

var input = +test.units.val(); 

但是如果你想parseInt()通常建議將它傳遞第二個參數指定的基數：

var input = parseInt(test.units.val(), 10); 

...因爲否則，如果輸入文本具有前導零，則某些瀏覽器將假定該值爲八進制而非十進制。 （parseFloat()和一元加號沒有這個問題。）

Answer 2

我想你不應該實現轉換對象內部的方法convertUnits。而新的代碼如下所示：

convertUnits = function(){ 

    var measurementType = $(".from option:selected").attr("class"); 
    var result = "invalid input"; 
    if(measurementType == "temp"){ 
     var test = new Convert($("#from"), $("#to"), $("#units"), $("#result")); 
     test.convertTemp(); 
     console.log('Did we get this far?!?! ::', measurementType); 
    } 
    console.log('or not???? ::', measurementType); 
} 

現在你可以啓動按鈕點擊convertUnits：

$("#btnConvert").click(function(){new convertUnits()});