javascript - js jquery 原型(prototype)函数与嵌套函数

Question

我想了解原型(prototype)函数和嵌套函数之间的区别。我需要知道以下内容

1. 哪个更好，性能更好
2. 两者的主要区别是什么
3. 哪种结构更适合哪种情况(我假设两者有不同的目标)？

我的基本用法:我的基本用法是我想为网络应用程序编写一个主要功能，启动时，它将在应用程序导航期间创建菜单、按钮、按钮单击事件、绘制图表、制作表格等，我需要我的代码以更好的方式构建和最快的方式。我将大量使用 jquery 及其插件*。

为了使用简单，考虑到我需要在应用程序的许多地方/阶段创建 portlets/widget 容器，我会调用 var port = App.creatPortlet() 然后 port.content(//放置数据)

请帮忙。

性能:我在这里创建了性能测试 prototype-vs-nested-function而且看起来 PROTOTYPE 函数 更快。但我需要一些建议。

原型(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

首先，对这么小的代码部分进行性能测试并不是很有用，因为您不知道这是否会反射(reflect)实际用例场景中的性能。(可能会发生你测试 JS 引擎优化器的小代码，例如一些方法的内联，或者你触发了 JS 引擎的优化过程，这将花费更长的时间来初始化但会带来实时应用程序的性能提升，那你检测到测试库的缺陷，....)

我打赌你不会在这里测试原型(prototype)与嵌套函数，而是测试两个赋值与作用域处理。

看看你的测试，你甚至没有测试这两种情况。您只需测试案例二(在您的准备工作中，您使用 var Person = ...; 覆盖了对名称函数 Person 的访问，所以 function Person 从未在您的测试中使用过)。它应该是这样的:updated jsperf.com .
(EDIT 看起来你在我写的时候已经改变了自己)。

无论如何，有什么区别，什么更好。两者都有有效的用例，由您决定哪个更好。

对象类型

对于第一个，Person 创建的每个对象都是同一类型:

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

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

虽然在第二个示例中，您创建的每个对象都是 Object 类型。
因此，对于第一个你，如果对象被传递给另一个函数，你可以测试它是否属于 Person 类型，而对于第二个你不能。

虽然我更喜欢测试特性/功能的存在而不是测试类型，但这对我来说没有区别。

原型(prototype)链

有时更新/扩展所有对象的功能或修改/扩展一种类型的所有对象的现有功能很有用。
虽然这对于第一个示例是可能的，但对于第二个示例是不可能的。

var Person = function() {
};

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

p1.doSomething();

代码重用

在第一个示例中，您可以在与给定对象相似的对象上重用您的函数。你可以这样做:

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

在某些情况下这可能很方便。一个经常使用的例子是 array like 对象上的 Array 函数。

原始数据的保护

有时保护一些原始数据不被直接读取/修改是很有用的。这就是第二个例子的优势。虽然我个人认为这应该由一个好的文档来处理，而不是通过代码强制执行，但它仍然是一个有效的用例。在您的示例中，firstName 和 lastName 对外部完全隐藏，除了创建 Person 的代码部分。

性能和速度

哪个在速度和内存占用上表现更好主要取决于JS引擎。并非每个引擎都会为嵌套函数 创建一个新函数，它更有可能被正确检测到并仅在第二次调用时引用。创建作用域会有一些开销，但这可能可以忽略不计，具体取决于对象数量和创建它们的频率。

但如前所述，您的代码中很可能还有其他会造成瓶颈的东西。

在大多数情况下，考虑到可维护性和可读性，使用prototype 是更好的选择。