Javascript原型使用性能[重复]

Posted 2023-02-21

【中文标题】Javascript原型使用性能[重复]

【英文标题】：Javascript prototype usage performance [duplicate]

【发布时间】：2013-06-06 23:10:43

【问题描述】：

我想了解使用 javascript 原型的优势。对象原型的使用正在提高性能。 我想通过内存使用来查看这一点。

案例一

    var Foo1 = function (name) 
        this.name = name;
        getFirstName = function()  return "name1"; ;
        getLastName = function()  return "name2"; ;
    ;
    for (var i = 0; i < 1000; i++) 
        var foo1 = new Foo1();
    

案例 2

    var Foo2 = function (name) 
        this.name = name;
    ;

    Foo2.prototype = 
        getFirstName: function ()  return "name1"; ,
        getLastName: function ()  return "name2"; ,
    ;

    for (var i = 0; i < 1000; i++) 
        var foo2 = new Foo2();
    

哪种情况使用内存多于另一种情况？

我可以了解案例的内存使用情况吗？

case的内存使用有什么区别？

【问题讨论】：

这个问题肯定有一些重复。你可以在这里建立自己的测试jsperf.com

性能！== 内存使用情况。

您的第一个案例将创建全局函数而不是对象属性！

【参考方案1】：

如果您将function 或object 定义为属于prototype，则它由所有实例共享，并且使用new 创建对象不会创建它自己的函数/对象实例。从这个意义上说，定义属于原型的东西使用更少的内存。确切的区别在于案例 1（请看下面的 cmets，因为您的定义不正确）会为每个函数创建 1000 个实例。情况 2（再次查看下面的 cmets）将只创建每个函数的 1 个实例。

但是案例 2 没有在原型中定义。您实际上是在重新定义原型。正确的用法是：

function Foo2 (name) 
    this.name = name;
;

Foo2.prototype.getFirstName = function ()  return "name1"; ;
Foo2.prototype.getLastName = function ()  return "name2"; ;

您的案例 1 也没有正确定义您想要实现的目标，因为 getFirstName 和 getLastName 不是通过 this（实例）定义的。

【参考方案2】：

第二种情况更节省内存和性能。当您在构造函数中定义方法时，会为每个对象分配相同的函数或方法，因此该对象会消耗更多内存。所以在原型对象中定义方法，然后所有对象只共享一次相同的方法。

所以我的建议是在构造函数中定义属性（数字、字符串...），在原型对象中定义方法或函数，就像在第二种情况下那样。

顺便说一句，当你这样定义一个对象时：

var Foo1 = function (name) 
    this.name = name;
    getFirstName = function()  return "name1"; ;
    getLastName = function()  return "name2"; ;
;

getFirstName 和 getLastName 方法是 window 的属性，因为你实际上是这样写的：

var Foo1 = function (name) 
    this.name = name;
    window.getFirstName = function()  return "name1"; ;
    window.getLastName = function()  return "name2"; ;
;