[英]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