<script>
function fn1() {
const a = new Object();
a.val1 = 1;
a.val2 = 2;
a.f0 = () => a.val1 + a.val2;
return a;
}
function fn2() {
const a = new Function();
a.val1 = 1;
a.val2 = 2;
a.f0 = () => a.val1 + a.val2;
return a;
}
const f0 = function() {
console.log(this.val1 + this.val2);
};
function fn3() {
const a = {};
let f1 = f0.bind(a);
a.val1 = 1;
a.val2 = 2;
return f1;
}
class BB {
get name() {
return 'hi'
}
}
const BBp = BB.prototype;
BBp.val1 = 1;
BBp.val2 = 2;
function fn4() {
const a = () => {};
Object.setPrototypeOf(a, BBp);
return a;
}
function fn5() {
const a = () => {};
a.prototype = BBp;
return a;
}
let m = new Float64Array(256);
function fn6() {
const a = {};
a.b = m.subarray(0, 64);
return a;
}
function fn7() {
const a = {};
Object.defineProperty(a, 'b', {get: ()=> m.subarray(0, 64)})
return a;
}
</script>
fn1();fn1();fn1();fn1();fn1();fn1();fn1();fn1();fn1();fn1();
fn2();fn2();fn2();fn2();fn2();fn2();fn2();fn2();fn2();fn2();
fn3();fn3();fn3();fn3();fn3();fn3();fn3();fn3();fn3();fn3();
fn4();fn4();fn4();fn4();fn4();fn4();fn4();fn4();fn4();fn4();
fn5();fn5();fn5();fn5();fn5();fn5();fn5();fn5();fn5();fn5();
fn6();fn6();fn6();fn6();fn6();fn6();fn6();fn6();fn6();fn6();
fn7();fn7();fn7();fn7();fn7();fn7();fn7();fn7();fn7();fn7();
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
test1 | |
test2 | |
test3 | |
test4 | |
test5 | |
test6 | |
test7 |
Test name | Executions per second |
---|---|
test1 | 11284150.0 Ops/sec |
test2 | 399979.7 Ops/sec |
test3 | 36674316.0 Ops/sec |
test4 | 1409040.4 Ops/sec |
test5 | 50850840.0 Ops/sec |
test6 | 4118291.5 Ops/sec |
test7 | 465188.4 Ops/sec |
The benchmark defined in the provided JSON tests different approaches in JavaScript for creating objects and functions. Specifically, it compares four methods: using new Object
, new Function
, function binding, and setting prototype with an arrow function. Each approach has its characteristics which can impact performance and usage.
fn1()
: This function uses the new Object()
constructor to create an object. It initializes properties (val1
and val2
) and defines a method (f0
) using an arrow function.
fn2()
: This function uses the new Function()
constructor to create a function dynamically, similar to how you would create an object using new Object()
. However, the function created doesn't perform any specific operations; it initializes the same properties and method as in fn1()
.
fn3()
: This option uses a plain object (const a = {}
) and employs Function.prototype.bind()
to bind the context of function f0
to the object a
. This is significant because bind()
allows you to set the this
value within the method.
fn4()
: This method creates an arrow function, then sets its prototype using Object.setPrototypeOf()
. This allows the function to have access to the properties defined on the prototype object, in this case, BBp
.
new Object()
new Function()
bind()
bind()
gives you control over the this
context, which is useful when working with methods that require access to the object’s properties.bind()
may have a slight performance overhead compared to direct method calls since it returns a new function.this
context from their enclosing scope, which can reduce common pitfalls related to this
.From the latest benchmark results:
test3
(fn3), with approximately 65.77 million executions per second.test1
(fn1) was the second best with around 21.35 million executions per second.test2
(fn2) significantly lagged behind with approximately 530.57 thousand executions per second.Performance is not the only factor in choosing an object creation method. Readability, maintainability, and appropriate use cases must also guide decisions. Developers should choose techniques based on the needs of their specific applications, considering how these methods interact with JavaScript’s event-driven nature, closure behavior, and scope management.
Some alternatives to the methods tested could include:
new
.In conclusion, the benchmark highlights important performance differences among common JavaScript object creation techniques while also outlining the inherent trade-offs that developers must consider. Each method suits different scenarios, and making an informed choice can lead to more optimized and maintainable code in JavaScript applications.