Replicate and customize identical object for creating instances in JavaScript

Question

Replicate and customize identical object for creating instances in JavaScript

I am working with an object that has the following structure:

var customObject = function() {
    this.property = "value";
};

customObject.prototype = new otherObject();

customObject.prototype.property2 = function() {};

This is just a snippet as the actual object is quite extensive.

Currently, I can successfully create an instance of this object by using new customObject().

Now, I want to develop a similar but slightly modified version of this object. This would involve tweaking certain properties and potentially adding or removing some as well. Similar to the original object, I want it to be instantiated with new customObject2().

The approach I initially considered was:

var customObject2 = new customObject();
customObject2.prototype = customObject.prototype;
customObject2.property = "modified value";

However, when attempting to instantiate it with new customObject2(), I encounter an error indicating that customObject2 is not a function.

I hope this explanation clarifies the pattern I aim to establish. Can you suggest how I should go about creating such a pattern?

javascript design-patterns object

Answer 1

Answer №1

In cases where customObject is not a host object (meaning it won't produce an illegal invocation error if called differently than expected), you have the option to apply the constructor to another this Object;

var customObject2 = function () {
    customObject.call(this); // constructing as if `customObject`
    // additional actions can now be performed
    this.anotherProperty = 'foo';
};
customObject2.prototype = Object.create(customObject.prototype);
    // inheriting prototype while maintaining the original

new customObject2();

Compatibility with previous versions using Object.create

function objectWithProto(proto) {
    var f;
    if (Object.create) return Object.create(proto);
    f = function () {};
    f.prototype = proto;
    return new f();
}

Answer 2

In cases where customObject is not a host object (meaning it won't produce an illegal invocation error if called differently than expected), you have the option to apply the constructor to another this Object;

var customObject2 = function () {
    customObject.call(this); // constructing as if `customObject`
    // additional actions can now be performed
    this.anotherProperty = 'foo';
};
customObject2.prototype = Object.create(customObject.prototype);
    // inheriting prototype while maintaining the original

new customObject2();

Compatibility with previous versions using Object.create

function objectWithProto(proto) {
    var f;
    if (Object.create) return Object.create(proto);
    f = function () {};
    f.prototype = proto;
    return new f();
}

Answer 3

Answer №2

After researching the topic further, it appears that the new keyword in JavaScript functions by returning an object instead of a function. This could be a key factor in understanding its behavior.

Answer 4

After researching the topic further, it appears that the new keyword in JavaScript functions by returning an object instead of a function. This could be a key factor in understanding its behavior.

Answer 5

Answer №3

What is the reason behind your decision to deviate from the initial formula you utilized? Take, for instance:

var customMethod2 = function(){};
customMethod2.prototype = new customMethod();
customMethod2.property = "altered value";
new customMethod2(); // functions correctly!

All attributes of customMethod will be passed down to the instances of customMethod2 via the prototype hierarchy.

Answer 6

What is the reason behind your decision to deviate from the initial formula you utilized? Take, for instance:

var customMethod2 = function(){};
customMethod2.prototype = new customMethod();
customMethod2.property = "altered value";
new customMethod2(); // functions correctly!

All attributes of customMethod will be passed down to the instances of customMethod2 via the prototype hierarchy.

Replicate and customize identical object for creating instances in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What is the maximum amount of information that can be stored in a data attribute within the DOM?

Is there a way to adjust the height of one div based on the height of another div in Bootstrap?

Troubleshooting: Configuring dynamic minimum time for <input type='time'> in AngularJS not functioning as expected

Tips for resolving the issue: 'Unhandled Promise Rejection: Error: Unable to resolve bare specifier "app.js" from http://localhost:3000/'

Troubleshooting the Owl carousel's responsiveness with a div width of 1170px

The transition effect is not activated when using the MUI Drawer with react-router-dom

Ways to implement a fixed navigation bar beneath the primary navbar using ReactJS

Utilize express.router() to send a get request to a third-party API while including an API key

The cascading menu causes interference with the function of other elements in the

Dynamically showing a div using JavaScript and AJAX after changing the window location

Display or conceal div based on chosen options

Having trouble accessing variable values within the nth-child selector in JavaScript

Trouble receiving Ajax response

Is there a replacement for findIndex in Internet Explorer?

Javascript keycode used to target the element when a key is pressed

JQuery does not allow for changing the selection of a RadioButtonFor

Utilizing client-side storage within a React project

Is a component updating an unregulated text input to be controlled?

What is preventing me from accessing my session array in this.state.props from my mapStateToProps in React-Native Redux?

Is purchasing a Twilio phone for sending SMS messages a good idea?