js jquery原型函數與嵌套函數

Question

我試圖了解Prototype函數和嵌套函數之間的區別。 我需要知道以下內容

1. 哪個更好，性能更好
2. 兩者之間的主要區別是什么
3. 哪種結構更適合哪種情況（我假設兩者都有不同的目標）？

我的基本用法：我的基本用法是我想為web應用程序編寫一個主要功能，在啟動時，它會在應用程序導航期間創建菜單，按鈕，按鈕點擊事件，繪制圖表，制作表格等，我需要我的代碼以更好，更快的方式構建。 我將使用jquery及其插件很多* 。

為了簡化使用，請考慮我需要在may app中的許多地方/階段創建portlet / widget容器，我只需要調用var port = App.creatPortlet()然后port.content(// place data)

請幫助。

性能：我在這里創建了性能測試prototype-vs-nested-function ，似乎PROTOTYPE函數更快。 但我需要一些建議。

原型功能：

  function Person(opt) {
    this.firstName = opt.firstName;
    this.lastName = opt.lastName;
  }

  Person.prototype.getFullName = function() {
    return this.firstName + " " + this.lastName;
  };
 // Testing performance
 var P1 = new Person({
   firstName: 'Jeremy',
   lastName: 'McPeak'
 }).getFullName();

嵌套功能：

var Person = function(opt) {
   return {
     getFullName: function() {
       return opt.firstName + " " + opt.lastName;
     }
   };
 }
 // Testing performance
 var P1 = new Person({
   firstName: 'Jeremy',
   lastName: 'McPeak'
 }).getFullName();

更新： http ： //jsperf.com/closure-prototype-static-reveal我根據我的確切需要創建了benchamrk。

Answer 1

首先，對於如此小部分代碼的性能測試並不是很有用，因為您不知道這是否會反映實際用例場景中的性能。 （可能會發生這種小代碼測試JS引擎的優化器，例如內聯某些方法或觸發JS引擎的優化過程，這需要更長的時間來初始化，但會在實時應用程序中帶來性能提升，你發現了測試庫的缺陷，....）

我敢打賭你不要在這里測試原型和嵌套函數 ，而是兩個分配與范圍處理 。

看看你的測試，你甚至都不測試這兩種情況。 您只需測試案例二（在您的准備中，您將使用var Person = ...;覆蓋對名稱函數Person的訪問權限，因此在您的測試中從不使用function Person ）。 它應該是這樣的： 更新jsperf.com 。
（ 編輯看起來你在我寫作的時候已經改變了自己）。

無論如何，有什么不同，有什么更好。 兩者都有有效的用例，由您決定什么是更好的。

對象類型

對於第一個， Person創建的每個對象都是相同的類型：

 var p1 = new Person();
 var p2 = new Person();

 console.log( p1 instanceof Person);  //true
 console.log( p2 instanceof Person);  //true

在第二個示例中，您創建的每個對象都是Object類型。
因此，如果對象是第一個傳遞給另一個函數，則可以測試它是否為Person類型，而對於第二個函數則不能。

雖然我更喜歡測試功能/功能的存在而不是測試類型，但這對我來說沒有區別。

原型鏈

有時，更新/擴展所有對象的功能或修改/擴展一種類型的所有對象的現有函數是有用的。
雖然這對於第一個例子是可能的，但是第二個例子是不可能的。

var Person = function() {
};

var p1 = new Person();
Person.prototype.doSomething = function() {console.log("....");};

p1.doSomething();

重用代碼

在第一個示例中，您可以在與給定對象類似的對象上重用您的函數。 你可以這樣做：

Person.prototype.doSomething.call(similarOBject, ...);

在某些情況下這可能很方便。 通常使用的示例是像對象一樣的 Array上的數組函數。

保護原始數據

有時保護某些原始數據不被直接讀取/修改是有用的。 那就是第二個例子的力量。 雖然我個人認為這應該由一個好的文檔處理，而不是通過代碼強制它，它仍然是一個有效的用例。 在您的示例中， firstName和lastName完全從外部隱藏，除了創建Person的代碼部分。

性能和速度

哪一個在速度和內存使用方面表現更好，主要取決於JS引擎。 並不是每個引擎都會為嵌套函數創建一個新函數，它更有可能被正確檢測到，並且只是在第二次調用時引用。 范圍創建將有一些開銷，但這可能是微不足道的，具體取決於對象數量和創建它們的頻率。

但正如已經說過的，您很可能在代碼中還有其他東西會造成瓶頸。

在大多數情況下，使用prototype是具有可維護性和可讀性的更好選擇。