[英]Performance of javascript Class definitions vs Objects

I'm writing a javascript application that extensively uses a particular form of dataset, like


{ foo: 'foo', bar: 'bar', quz: { baz : 'baz' }}

It's only data, but it's nested. There is no static data.


I want to create a template for that dataset to keep the code clean. I can either put a template object somewhere and clone that everytime, like (using jquery just for the example)


var ds = jQuery.extend(true, {}, config.dataset);

or I can create a 'Class' or function prototype that I can call with


var ds = new Dataset();

What performs best ? If using the new constructor, is there a difference between a Class and a function definition ?


3 个解决方案



The answer to "What performs best?", in general, is: Worry about it if and when you actually have a performance problem.


The answer to "What performs best?" in JavaScript is:


  1. See the general answer, and


  2. It depends, test on your target JavaScript engines (browsers, etc.)


Let's ignore performance, though, and look at the alternatives you gave.


Implementing a DataSet "class" (constructor and associated prototype, either with the new or old syntax) would be quite complicated and give you virtually no benefit for the use case you describe. You have a nested object structure:


{ foo: 'foo', bar: 'bar', quz: { baz : 'baz' }}

...and so if you used that as a prototype, it would be very easy to get cross-talk between instances. Example:


// Demonstrating cross-talk
function DataSet() {
DataSet.prototype = { foo: 'foo', bar: 'bar', quz: { baz : 'baz' }};

var d1 = new DataSet();
var d2 = new DataSet();
d1.quz.baz = "updated";
document.body.innerHTML = d2.quz.baz; // "updated" - huh?!

To avoid that, you'd have to make a copy of the quz property on construction:


function DataSet() {
    this.quz = jQuery.extend(true, {}, this.quz);

Then you have to remember to do that any time you add new nested objects in the prototype.


From what you've told us, the simplest solution is just to use your first example with jQuery.extend.




There are a few ways to do this, not only the two you specified, you can also use pure JS prototypes, when comparing all three it seems pure js would be the fastest.


Few things:

  1. Please note that using Classes is ES6 which is not widely supported by all browsers yet.
  2. 请注意,使用Classes是ES6,目前尚未得到所有浏览器的广泛支持。

  3. The old "new" is called prototypical inheritance, if you use that (which I would suggest you do, or the new format of it using Object.create) be careful of sharing data members between classes.
  4. 旧的“新”称为原型继承,如果你使用它(我建议你这样做,或使用Object.create的新格式),请注意在类之间共享数据成员。

  5. You can also just clone the object with JSON.parse(JSON.stringify(firstValueObject));
  6. 您也可以使用JSON.parse(JSON.stringify(firstValueObject))克隆该对象;

  7. If you choose Object.create (ES5) you can define default values:
  8. 如果选择Object.create(ES5),则可以定义默认值:



Inspired by TJCrowder's answer here, I came up with a third option


function newDataset( return { foo: 'foo', bar: 'bar', quz: { baz : 'baz' }});
var ds = newDataset();
  • it centralizes the definition of the dataset, which was the purpose
  • 它集中了数据集的定义,这就是目的

  • it always creates a new object, without the risk of sharing data members
  • 它总是创建一个新对象,没有共享数据成员的风险

  • i can always change the internal mechanics later and benchmark that
  • 我可以随后改变内部机制并对其进行基准测试



粤ICP备14056181号  © 2014-2021