CODEWITHSUNDEEP
javascriptclassinstantiation
devdar
devdar

Reputation: 5654

Creating a new instance of a Javascript object

I created a JavaScript object I would like to instantiate a new object every time the user makes a call to the object. However I am unsure as to the proper way to do this. Below is what I have tried:

JavaScript Object

var parent = (function (){
    var name = null;
    var data = [];  
    return{
        initialize: function(){         
            alert('Hi i am a Parent');      
        },      
        setName: function (aName){
            this.name = aName;
        },
        getName: function(){
            return this.name;
        },

        sayHello:function(name){
            alert('Hi good morning ' + name);
        }
    };
})();

I want to make a new instance of this object and call its functions.

This works parent.initialize();

However if I attempt var father = new parent() I am getting parent() is not a constructor and if I attempt var father = new Object() i am getting father.initialize is not a function.

Upvotes: 0

Views: 87

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074305

What you have (if you remove the ) after function) will result in parent referring to an object, not a function. You can fix that by just making it a function:

function createParent(){
    var name = null;
    var data = [];  
    return{
        initialize: function(){         
            alert('Hi i am a Parent');      
        },      
        setName: function (aName){
            name = aName;         // <== No `this.` here
        },
        getName: function(){
            return name;          // <== Or here
        },

        sayHello:function(name){
            alert('Hi goof morning ' + name);
        }
    };
}

var parent1 = createParent(); // Create a parent
var parent2 = createParent(); // Create another parent
parent1.initialize();         // Call initialize on parent1
parent2.initialize();         // Call initialize on parent1

That (a factory function) is one of the common idioms for creating objects in JavaScript.

Note that I also removed a couple of incorrect this. in there: Your name is a variable, not a property. You could make it a property, of course; here's a version with name and data both being properties:

function createParent(){
    return{
        name: null,
        data: [],
        initialize: function(){         
            alert('Hi i am a Parent');      
        },      
        setName: function (aName){
            this.name = aName;
        },
        getName: function(){
            return this.name;
        },

        sayHello:function(name){
            alert('Hi goof morning ' + name);
        }
    };
}

var parent1 = createParent(); // Create a parent
var parent2 = createParent(); // Create another parent
parent1.initialize();         // Call initialize on parent1
parent2.initialize();         // Call initialize on parent1

Another common idiom is a constructor function, which has a slightly different form and is always called via new rather than directly:

function Parent(){
    var name = null;
    var data = [];  
    this.initialize = function(){         
        alert('Hi i am a Parent');      
    };
    this.setName = function (aName){
        name = aName;
    };
    this.getName = function(){
        return name;
    };
    this.sayHello = function(name){
        alert('Hi goof morning ' + name);
    };
}

var parent1 =  new Parent();  // Create a parent
var parent2 =  new Parent();  // Create another parent
parent1.initialize();         // Call initialize on parent1
parent2.initialize();         // Call initialize on parent1

With constructor functions (which are traditionally given names starting with capital letters), the new operator creates the object for you and then calls the function with this referring to that new object.

If you wanted to use a constructor function, you could make name and data properties and get the benefit of reusing the functions rather than building new copies of the functions for every Parent instance:

function Parent(){
    this.name = null;
    this.data = [];  
}
Parent.prototype.initialize = function(){         
    alert('Hi i am a Parent');      
};
Parent.prototype.setName = function (aName){
    this.name = aName;
};
Parent.prototype.getName = function(){
    return this.name;
};
Parent.prototype.sayHello = function(name){
    alert('Hi goof morning ' + name);
};

var parent1 =  new Parent();  // Create a parent
var parent2 =  new Parent();  // Create another parent
parent1.initialize();         // Call initialize on parent1
parent2.initialize();         // Call initialize on parent1

Upvotes: 1

Related Questions