JavaScript类和对象,优缺点?

15

在我最近的javascript程序中(主要是为了好玩和概念证明),我有很多不同种类的对象,每种对象都有相当数量的实例。因此,我考虑应该为这些对象使用类,但由于它们非常简单,我可以直接构造它们而不是使用类...

这里是我的意思示例:

//I'm making a "car" object that has the properties model, miles, value and color
//using a class like:
function car (model, miles, value, color) { .... }
//so I'd create a new car by using:
mycar = new car(model, miles, value, color);

//However for an object so simple I could also do:
mycar = {model: model, miles: miles, value: value, color: color};

我猜想后一种方法在某种程度上会更高效(不需要调用类的函数),但这值得吗?

为了做出决定,我想知道使用类和使用普通对象的优缺点。比如说,类是否会占用更多的内存?


3
在需要继承原型时,请使用构造函数。在仅需要一组值的任务时,请使用字面量。 - dandavis
1
这是面向对象编程和过程式编程之间的抉择。 - webduvet
1
我建议始终优先考虑代码的可读性和可维护性,而不是性能。如果使用类可以使您的代码更清晰,请使用它。您需要在内存中定义额外的函数,并调用额外的函数来调用它。除非情况极端,否则成本可以忽略不计。 - Scott Mermelstein
谢谢你们的快速帮助和非常有用的回答 :) 我需要看看在这种情况下是否能够很好地使用原型以及是否使用类会使它更易读,因为对于一些小对象来说可能正好相反。 - Wingblade
可能是 基于原型的继承 vs 基于类的继承 的重复问题。 - PW Kad
2个回答

14

在性能方面,差异体现在添加方法时。如果您使用对象字面量,每个对象都需要为每个方法拥有一个字段:

obj1--> { x: 10,
          f1: method1,
          f2: method2 }

obj2--> { x: 17,
          f1: method1,
          f2: method2 }

使用类,您可以在共享原型后面共享公共属性:

obj1--> { x:10,
          __proto__: --------> { f1: method1,
         }              /---->   f2: method2 }
                        |
obj2--> { x:17,         |
          __proto__: ---/
        }

话虽如此,性能差异只有在您实例化大量对象并且这些对象具有许多方法以及这些方法中的许多是闭包时才会有所影响。如果我是您,我会更加重视代码风格问题:例如,使用对象字面量方法可以使用闭包模拟私有变量,而如果方法位于共享的公共原型中,则所有实例变量都需要是公共的。


1
私有变量也可以在构造函数中添加。 - grape_mao
谢谢,我想我会对大多数对象使用字面量方法,除了一些需要拥有自己功能的较大对象。 - Wingblade

4
首先, JavaScript不是基于类的,你所拥有的只是一个特殊的函数。那么有什么区别呢?
  • 由构造函数实例化的对象具有原型对象,它继承了属性。这个原型对象由所有由同一函数构造的对象共享。您可以在其中放置通用方法,这将明显更快
  • 调用构造函数。您可以使用它来初始化您的对象(填充默认值,验证参数等),并且您有一个作用域来构建闭包。

即使对于某些对象您不需要原型,为您返回普通对象的函数仍然具有优势。至少,它为您提供了在不需要更改代码库中每个实例化的情况下更改实现的灵活性。因此,从简单开始

function Car (model, miles, value, color) {
    return {model: model, miles: miles, value: value, color: color};
}

即使您使用new调用它也不会产生影响,如果需要,稍后可以进行扩展。


JavaScript类是在ES2015中引入的。 - Dolan
1
@DylanLarsen 是的,但是原帖作者没有使用 class 语法。不过我还是更新了措辞。 - Bergi

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接