Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
object creation+method lookup: new, object.create, literal+proto
(version: 0)
Comparing performance of:
new vs object.create vs object literal+proto vs object.create+object.assign vs spread+proto
Created:
3 years ago
by:
Registered User
Jump to the latest result
Script Preparation code:
function Thing(prop1, prop2) { this.prop1 = prop1; this.prop2 = prop2; } Thing.prototype.doSomething = function () { this.prop1 += 1; this.prop2 ||= true; }; let proto = { doSomething() { this.prop1 = 1; this.prop2 = true; } } function createThing(prop1, prop2) { return Object.create(proto, { prop1: { value: prop1, writable: true }, prop2: { value: prop2, writable: true } }); } function literalThing(prop1, prop2) { return { prop1, prop2, __proto__: proto }; } function spreadThing(props) { return { ...props, __proto__: proto }; } function createAndAssignThing(prop1, prop2) { return Object.assign(Object.create(proto), { prop1, prop2 }); }
Tests:
new
new Thing().doSomething();
object.create
createThing().doSomething();
object literal+proto
literalThing().doSomething();
object.create+object.assign
createAndAssignThing().doSomething();
spread+proto
spreadThing({prop1: 0, prop2: false}).doSomething();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
new
object.create
object literal+proto
object.create+object.assign
spread+proto
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in the provided JSON. **Benchmark Definition** The benchmark is defined by three approaches to create an object and call a method on it: 1. **`new Thing()`**: Creates a new instance of the `Thing` class using the constructor function. 2. **`createThing()`**: Uses the `Object.create()` method to create an object that inherits from a prototype (`proto`). 3. **`literalThing()`**: Creates an object literal with a prototype (`proto`) set on it. 4. **`spreadThing(props)`**: Spreads properties onto an object created using `Object.create(proto)` and sets the prototype to `proto`. 5. **`createAndAssignThing(prop1, prop2)`**: Creates an object by assigning properties to an object created using `Object.create(proto)`. **Options Compared** The benchmark compares the performance of these five approaches in different orders: * Three cases are tested with each approach alone (e.g., "new Thing().doSomething();", "createThing().doSomething();", etc.) * Two cases test combinations of two approaches (e.g., "new Thing() + createThing()", "createAndAssignThing() + object literal+proto", etc.) **Pros and Cons** Here's a brief summary of the pros and cons of each approach: 1. **`new Thing()`**: Pros: Simple, efficient. Cons: May incur overhead due to constructor function creation. 2. **`Object.create()`**: Pros: Efficient, flexible. Cons: May require more manual configuration (e.g., setting properties). 3. **`object literal+proto`**: Pros: Easy to use, concise. Cons: May lead to object pollution if not used carefully. 4. **`spread+proto`**: Pros: Modern, efficient. Cons: May be less readable for older browsers or developers. 5. **`createAndAssignThing()`**: Pros: Convenient, flexible. Cons: May incur overhead due to function call and assignment. **Other Considerations** * **Prototype Inheritance**: The `Object.create()` method creates a new object that inherits from the specified prototype. This can be beneficial for creating reusable code or modularizing functionality. * **Object Literal Syntax**: The `object literal+proto` approach uses a concise syntax to create an object with a prototype set on it. However, this may lead to object pollution if not used carefully. * **Spread Operator**: The `spread+proto` approach uses the modern spread operator (`...`) to create an object that inherits from the specified prototype. This is efficient and readable but may require support for newer browsers or JavaScript versions. **Alternatives** If you're looking for alternative approaches, consider: 1. Using a library like Lodash (e.g., `_.create()` function) for more flexible and convenient object creation. 2. Implementing your own custom constructor functions or methods to create objects with specific properties and behavior. 3. Utilizing other modern JavaScript features, such as classes or async/await syntax, to simplify object creation and method invocation. Keep in mind that the choice of approach depends on your specific use case, performance requirements, and target audience (e.g., older browsers vs. modern ones).
Related benchmarks:
JavaScript fastest way to clone an object
Create object
Spread vs Object.assign (modify ) vs Object.assign (new)
delete vs check with 'in' before
or vs some 2
Comments
Confirm delete:
Do you really want to delete benchmark?