爲什麼我的函數調用不工作？

Question

<script type="text/javascript"> 
    function CustomAlert() { 
     this.render = function() { 
      var winW = window.innerWidth; 
      var winH = window.innerHeight; 
      var dialogOverlay = document.getElementById('dialogOverlay'); 
      var dialogbox = document.getElementById('dialogbox'); 

      dialogOverlay.style.display = "block !important "; 
      dialogOverlay.style.height = winH+"px !important "; 
      dialogbox.style.left = (winW/2) - (550 * .5) + "px !important "; 
      dialogbox.style.top = "100px !important "; 
      dialogbox.style.display = "block !important"; 
     } 

     this.ok = function() { 
     } 
    } 

    function HighScore(arg) 
    { 
     CustomAlert().render(); 
    } 
</script> 

爲什麼它告訴我CustomAlert是未定義的？我也試圖將CustomAlert()分配給一個var，但是然後控制檯告訴我var現在是未定義的。

Answer 1

當作爲normal function（CustomAlert()）調用時，您的函數不會返回任何內容。但是，您可以調用它作爲constructor function（new CustomAlert()），在調用函數時使用new運算符。這將導致this函數內引用新創建的對象實例，並自動使用該實例作爲返回值：

function HighScore(arg) 
{ 
    new CustomAlert().render(); 
} 

---

另一種（但肯定不是當量）的解決方案是返回一個新的直接從CustomAlert對象：

function CustomAlert() { 
    var obj = { 
     render: function() { 
      ... 
     }, 
     ok: function() { 
      ... 
     } 
    }; 

    return obj; 
} 

現在你可以把它作爲你將一個正常功能：

function HighScore(arg) 
{ 
    CustomAlert().render(); 
} 

Answer 2

爲什麼它告訴我CustomAlert是未定義的？我也嘗試 將CustomAlert（）分配給一個var，但是然後CONSOL告訴我 var現在是未定義的？

因爲你要創建的這個

var customerAlert = new CustomAlert(); 

一個對象，然後調用它的render方法。

或者在一個聲明：

function HighScore(arg) 
{ 
    new CustomAlert().render(); 
} 

這就是所謂的構造函數調用模式。

在JavaScript函數

實際上可以與以下列方式之一來調用：該方法調用模式

• 函數調用模式
• 構造調用模式
• 的應用調用模式

方法調用模式

當函數作爲對象的屬性存儲時，將使用此調用方法。因此我們稱這個函數爲方法，就像其他面向對象的語言一樣。當我們調用函數時，這個函數綁定到那個對象上。例如：

var app = { 
    render: function() { 
       var winW = window.innerWidth; 
       var winH = window.innerHeight; 
       var dialogOverlay = document.getElementById('dialogOverlay'); 
       var dialogbox = document.getElementById('dialogbox'); 

       dialogOverlay.style.display = "block !important "; 
       dialogOverlay.style.height = winH+"px !important "; 
       dialogbox.style.left = (winW/2) - (550 * .5) + "px !important "; 
       dialogbox.style.top = "100px !important "; 
       dialogbox.style.display = "block !important"; 
     } 
     ok : function() { 

     } 
}; 

在這種情況下，我們將調用下面的render方法：

app.render(); 

函數調用模式

這就是功能不是財產的情況下，一個東西。在這種情況下，函數綁定到全局對象 - 通常是Web應用程序中的窗口對象。

var render = function(){ 
    var winW = window.innerWidth; 
       var winH = window.innerHeight; 
       var dialogOverlay = document.getElementById('dialogOverlay'); 
       var dialogbox = document.getElementById('dialogbox'); 

       dialogOverlay.style.display = "block !important "; 
       dialogOverlay.style.height = winH+"px !important "; 
       dialogbox.style.left = (winW/2) - (550 * .5) + "px !important "; 
       dialogbox.style.top = "100px !important "; 
       dialogbox.style.display = "block !important"; 
}; 

然後，我們只是把它如下：

render(); 

構造函數調用模式

這是我們調用與new前綴的功能的情況下。在這種情況下，將創建一個新對象。這是使用相同屬性創建對象的好方法。這些功能被稱爲構造函數和by convention它們的名字以大寫字母開頭。

應用調用模式

apply方法讓我們有機會construt的將被用於函數的調用參數數組。此外，它使我們能夠選擇this的值。

對於以上的詳細信息，請參閱JavaScript: The Good Parts