How do you create a method for a custom object in JavaScript?

JavascriptObjectMethods

Javascript Problem Overview


Is it like...

var obj = new Object();

obj.function1 = function(){
    //code
}

or something like that?

Javascript Solutions


Solution 1 - Javascript

You can see from the answers that you have already that there is more than one way.

#1
var o = new Object();
o.method = function(){}

#2
var o = new Object();
o.prototype.method = function(){}

#3
function myObject() {
    this.method = function(){}
}
var o = new myObject();

#4
function myObject() {}
myObject.prototype.method = function(){}
var o = new myObject();

#5
var o = {
    method: function(){}
}

#3 and #4 are using a constructor function. this means you can use them to create a number of objects of the same 'class' (classes don't really exist in JavaScript)

#4 is different to #3 because all objects constructed with #4 will share an identical 'method' method because it is a property of their prototype. This saves memory (but only a very tiny amount) and if you change the method of the prototype, all #4 objects will immediately be updated - even if they've already been instantiated.

#1, #2 and #5 are all pretty much equivalent. This is because there will probably only ever be one of them at a time, so the fact that #2 has the method added to the prototype doesn't really matter. (not taking cloning into account)

There are still more ways of adding methods to objects using factories with closure or adding 'static' properties/methods to functions or private nested functions... :)

Solution 2 - Javascript

var newObj = {
    met1 : function () {
        alert('hello');
    }
};

Then, the method can be called like such :

newObj.met1();

Btw, when declaring a new object, use the object literal ({}), not the new Object() constructor.

Solution 3 - Javascript

Generally use the prototype property:

function YourObject()
{
	//
}

YourObject.prototype.yourMethod= function()
{
   //
}

One thing I haven't seen anyone mention yet is why you might want to use the prototype property over, say, object-literal notation: doing so ensures the function definition gets shared across all instances of the objects created from your function prototype, rather than once per instantiation.

Solution 4 - Javascript

Don't worry bro, here the code is:

  var myObj=function(){
      var value=null
    
     this.setValue=function(strValue){

     this.value=strValue;
     };
    
     this.getValue=function(){
     return this.value;
     };    
};

You can call this object like this:

    var obj= new myObj();
    obj.setValue("Hi!");
    alert(obj.getValue());

Solution 5 - Javascript


Function.prototype.implement = function(member, value) {
this[member] = value;
return this;
}




function MyFunction() {
//...
}




(function($){




$.implement("a", "blabla")
.implement("b", function(){ /* some function */ })
.implement("c" {a:'', b:''});




})(MyFunction);

})(MyFunction);

Solution 6 - Javascript

With es6 you can do it like this:

var a = {
    func(){
        return 'The value';
    }
}
    
document.getElementById('out').innerHTML = a.func();
   

<div id="out"></div>

Solution 7 - Javascript

You can also do the following instead of using the "Object.create()" method.

Function call:

com.blah.MyChildObj.prototype = createObject(com.blah.MyParentObj.prototype, 
    com.blah.MyChildObj);

Function definition:

function createObject(theProto, theConst) {
    function x() {};
    x.prototype = theProto;
    x.prototype.constructor = theConst;
    return new x();
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMetaGuruView Question on Stackoverflow
Solution 1 - JavascriptmeouwView Answer on Stackoverflow
Solution 2 - JavascriptAndreas GrechView Answer on Stackoverflow
Solution 3 - JavascriptChristian NunciatoView Answer on Stackoverflow
Solution 4 - JavascriptRanjeet RanaView Answer on Stackoverflow
Solution 5 - JavascriptBarryView Answer on Stackoverflow
Solution 6 - JavascriptmsangelView Answer on Stackoverflow
Solution 7 - Javascriptspecialk1stView Answer on Stackoverflow