How to implement multiple new functions in Javascript object?

Question

I am doing some reading about class creation in Javascript. I know the concept does not exist in Javascript and that one can work with prototype.

I am trying to translate the following piece of code from Java to Javascript. Specifically, I want to have two constructors, one parameterless and one with two parameters:

public class MyClass {

    int width = 10;
    int height = 20;

    public MyClass() { };

    public MyClass(int w, int h) {

        this.width = w;
        this.height = h;

    };

    ...

}

As far as I understand, I need to define my 'class' as following in Javascript:

function MyClass() {

    this.width = 10;
    this.height = 20;

};

But, how do I define my second constructor? I want to be able to create instances of my class two ways:

var Instance1 = new MyClass();
var Instance2 = new MyClass(33,45);

Update:

Ok, I understand my constructors cannot have the same name, because Javascript cannot recognize the different parameter types. So, if I use different names for my constructors, how am I supposed to declare them? Is the following correct?

function MyClass() {

    this.width = 10;
    this.height = 20;

};

MyClass.prototype.New2 = function(w,h) {

    var result = new MyClass();

    result.width = w,
    result.height = h,

    return result;

};

possible duplicate of How to overload constructor of an Object in JS (Javascript)? (Basically, you can't, but there's a workaround in that question) — Cerbrus
– Cerbrus, Commented Feb 3, 2014 at 10:14
I usually pass an object so the function chain (for example when inheriting) can read and mutate whatever value is relevant for that function. It is a little more verbose but makes the code better readable.stackoverflow.com/a/16063711/1641941 — HMR
– HMR, Commented Feb 3, 2014 at 14:00

georg · Accepted Answer · 2014-02-03 10:18:43Z

2

Javascript has no multimethods, therefore your only option is to parse arguments and act accordingly. A common idiom is to use || to check if an argument is "empty" (undefined or 0):

function MyClass(w, h) {
    this.width = w || 10;
    this.height = h || 20;
};

If 0 is a valid value in your context, check for undefined explicitly:

function MyClass(w, h) {
    this.width  = typeof w != 'undefined' ? w : 10;
    this.height = typeof h != 'undefined' ? h : 20;
};

Another option is to provide arguments as an object and merge it with the "defaults" object. This is a common pattern in jquery:

function MyClass(options) { 
  // set up default options 
  var defaults = { 
    width: 10,
    height: 20
  }; 

  var options = $.extend({}, defaults, options);

answered Feb 3, 2014 at 10:18

georg

216k57 gold badges324 silver badges401 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jérôme Verstrynge Over a year ago

I understand my constructors cannot have the same name. I have updated my question. Is the new way to declare the second constructor a/the right way to proceed in Javascript?

georg Over a year ago

@JVerstry: in general, new is considered non-idiomatic in js, see this classic article.

Jérôme Verstrynge Over a year ago

Ok, I understand. I guess adding an options parameters with defaults inside the method is the best way to reproduce what I want without creating several functions. Thanks.

Collectives™ on Stack Overflow

How to implement multiple new functions in Javascript object?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related