面向對象的javascript錯誤

 var U = function(){ 
      this.div = document.createElement('DIV'); 
      this.div.id= 'oooofffff'; 
      this.div.innerHTML = '<form action=""><input type="file" name="trainingReport" /><input type="submit" value="Upload" id="Upload" /></form>'; 
      document.body.appendChild(this.div); 
      $(this.div).css({'text-align':'center','padding-top':'25px'}); 
      $('input#Upload',this.div).button(); 
      $(this.div).dialog({ 
        title:'Upload Summer Training Report', 
        resizable:false, 
        position:['center',300], 
        show:'blind', 
        hide:'explode', 
        autoOpen:false 
       }); 
     } 
     U.uploadReport = function(ApplicationID){ 
      console.log(this.div); //outputs undefined 
      $(this.div).dialog("open"); 
     } 
     $(document).ready(U);

我的對象有什麼問題？當我打電話給U.uploadReport()功能時，它看不到this.div對象。我應該怎麼做才能解決它？面向對象的javascript錯誤

注：請不要提供，我可以使用$('#oooofffff').dialog('open')

編輯：版本2：

var U = function(){ 
      var that = this; 
      that.div = document.createElement('DIV'); 
      that.div.id= 'oooofffff'; 
      that.div.innerHTML = '<form action=""><input type="file" name="trainingReport" /><input type="submit" value="Upload" id="Upload" /></form>'; 
      $(document).ready(function(){U.initialize()}); 


      that.uploadReport = function(ApplicationID){ 
       console.log(that.div); 
       $(that.div).dialog("open"); 
      } 
      that.initialize = function(){ 
       document.body.appendChild(that.div); 
       $(that.div).css({'text-align':'center','padding-top':'25px'}); 
       $('input#Upload',that.div).button(); 
       $(that.div).dialog({ 
        title:'Upload Summer Training Report', 
        resizable:false, 
        position:['center',300], 
        show:'blind', 
        hide:'explode', 
        autoOpen:false 
       }); 
      } 
      return that; 
     }();

來源

2011-08-10 Yunus Eren Güzel

你在某種程度上試圖使用一個普通的函數作爲實例，它不工作....''這裏面'U'指'文檔'和'U .uploadReport'到'window'對象。我建議閱讀：https：//developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects –

如果我使它'var U = new function（）{...'它工作嗎？ //編輯：我試過了，但它不起作用;） –

您只能將一個函數傳遞給'$（document）.ready'，而不是一個對象。 –

你對象不是很正確創建和this.div內uploadReport是不在正確的範圍內。

嘗試更改爲此：

var U = function(){ 
    var that = {}; 
    that.div = document.createElement('DIV'); 
    that.div.id= 'oooofffff'; 
    that.div.innerHTML = '<form action=""><input type="file" name="trainingReport" /><input type="submit" value="Upload" id="Upload" /></form>'; 
    document.body.appendChild(that.div); 
    $(that.div).css({'text-align':'center','padding-top':'25px'}); 
    $('input#Upload',that.div).button(); 
    $(that.div).dialog({ 
     title:'Upload Summer Training Report', 
     resizable:false, 
     position:['center',300], 
     show:'blind', 
     hide:'explode', 
     autoOpen:false 
    }); 

    that.uploadReport = function(ApplicationID){ 
     console.log(that.div); 
     $(that.div).dialog("open"); 
    } 
    return that; 
}(); 
$(document).ready(U);

注意，它返回本身給你對象和函數（）後，它因此被立即執行。所以U實際上成爲我認爲是你想要的功能的結果？

來源

2011-08-10 12:45:55

我不會這樣做。這將一個新的屬性賦給'document'元素。 –

通過創建靜態類不可能做到這一點，是嗎？ –

@Felix是的，你說得對。想想我剛剛從原始代碼中陷入了困境。現在好點了嗎？ –

你的類聲明是錯誤的。它應該是（可能）是這樣的：

function UType() { 
    // Your class code 
} 

UType.prototype.uploadReport = function() 
{ 
    // Your method code 
} 

// New instance, assign it to U. 
var U = new UType(); 

// Call method directly 
U.uploadReport(); 

// Call inside wrapper function, to pass it to JQuery 
$(function(){ U.uploadReport(); });

來源

2011-08-10 12:47:16 GolezTrol

感謝您的回答，但實際上我想使用靜態類:) –

好的，這在原始問題中並沒有變得清晰。 :)在這裏可以找到JS中靜態類的一個很好的例子：http://justjs.org/js-oop/static-methods-in-javascript/ – GolezTrol

面向對象的javascript錯誤

回答

相關問題