javascript類定義與對象的性能

[英]Performance of javascript Class definitions vs Objects


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

我正在編寫一個廣泛使用特定形式的數據集的javascript應用程序,比如

{ 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)

我想為該數據集創建一個模板,以保持代碼清潔。我可以將模板對象放在某處並且每次都克隆它,就像(僅使用jquery作為示例)

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 ?

什么表現最好?如果使用新的構造函數,Class和函數定義之間是否存在差異?

3 个解决方案

#1


0  

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:

“什么表現最好?”的答案在JavaScript中是:

  1. See the general answer, and

    見一般答案,和

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

    這取決於,測試你的目標JavaScript引擎(瀏覽器等)

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:

實現DataSet“類”(構造函數和相關原型,使用新的或舊的語法)將非常復雜,並且對於您描述的用例幾乎沒有任何好處。您有一個嵌套的對象結構:

{ 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:

為避免這種情況,您必須在構造時復制quz屬性:

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.

從您告訴我們的內容來看,最簡單的解決方案就是使用jQuery.extend的第一個示例。

#2


0  

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.

有幾種方法可以做到這一點,不僅你指定的兩個,你也可以使用純JS原型,當比較所有三個時,似乎純js將是最快的。

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: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
  8. 如果選擇Object.create(ES5),則可以定義默認值:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

http://jsperf.com/jquery-class-create-vs-pure-js-function/3

#3


0  

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

受到TJCrowder在這里的回答的啟發,我提出了第三種選擇

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
  • 我可以隨后改變內部機制並對其進行基准測試


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/10/15/4f537ab548abb2987c69c500fd68842b.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com