Passing object as parameter to constructor function and copy its properties to the new object?

Question

I have a JavaScript constructor like this:

function Box(obj) {
    this.obj = obj;
}

which i want to pass an object as a parameter like this:

var box = new Box({prop1: "a", prop2: "b", prop3: "c"})

and gives me something like this:

box.obj.prop1
box.obj.prop2
box.obj.prop3

but I would like the properties to be directly on the object like this:

box.prop1
box.prop2
box.prop3

I know I could do something like this:

function Box(obj) {
    this.prop1 = obj.prop1;
    this.prop2 = obj.prop2;
    this.prop3 = obj.prop3;
}

But that is not good because then my constructor would have to "know" before the names of the properties of the object parameter. What I would like is to be able to pass different objects as parameters and assign their properties directly as properties of the new custom object created by the constructor so I get box.propX and not box.obj.propX. Hope I am making myself clear, maybe I am measing something very obvious but I am a newbie so please need your help!

Thanks in advance.

maybe use prototype?

MartianMartian
– MartianMartian

2019-01-05 08:05:29 +00:00
Commented Jan 5, 2019 at 8:05 — MartianMartian
– MartianMartian, Commented Jan 5, 2019 at 8:05

Hemlock · Accepted Answer · 2011-01-20 03:03:40Z

25

You could do this. There is probably also a jquery way...

function Box(obj) {
  for (var fld in obj) {
    this[fld] = obj[fld];
  }
}

You can include a test for hasOwnProperty if you've (I think foolishly) extended object

function Box(obj) {
   for (var fld in obj) {
     if (obj.hasOwnProperty(fld)) {
       this[fld] = obj[fld];
     }
   }
 }

Edit

Ah, ha! it's jQuery.extend

So, the jQuery way is:

function Box(obj) {
  $.extend(this, obj);
}

edited Jan 20, 2011 at 3:03

answered Jan 20, 2011 at 2:58

Hemlock

6,2282 gold badges30 silver badges38 bronze badges

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

2 Comments

Brett Pontarelli Over a year ago

One thing to note neither solution is doing a deep copy. Depending on your actual implementation there is potential for problems. For example if instead of passing your object anonymously you create a variable obj={ prop1:..., propDanger: { a:1, b:2 } } and pass that to your constructor var box = new Box(obj), then later edits to obj.propDanger.a will also change box.propDanger.a.

Hemlock Over a year ago

@Brett Good point. Rarely a problem, but a good think to know so you don't get surprised by it when it does happen.

glebm · Accepted Answer · 2011-01-20 03:00:00Z

9

Simply put this in your constructor

  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      this[prop] = obj[prop];
    }
  }

answered Jan 20, 2011 at 3:00

glebm

21.2k8 gold badges55 silver badges68 bronze badges

1 Comment

VerizonW Over a year ago

I am giving the accepted answer to @Hemlock because he got it first, but thanks really!

Gerald Bustos Morales · Accepted Answer · 2020-08-23 01:11:16Z

8

Really short

function Box(obj) {
  Object.assign(this, obj);
}

edited Aug 23, 2020 at 1:11

answered Aug 23, 2020 at 1:03

Gerald Bustos Morales

1111 silver badge4 bronze badges

1 Comment

Martin Braun Over a year ago

way better than doing this[prop] = obj[prop].

Michael J. Calkins · Accepted Answer · 2013-02-05 18:03:30Z

2

Here's an example with the javascript module pattern:

var s,
NewsWidget = {

  settings: {
    numArticles: 5,
    articleList: $("#article-list"),
    moreButton: $("#more-button")
  },

  init: function(options) {
    this.settings = $.extend(this.settings, options);
    s = this.settings;
    this.bindUIActions();
  },

  bindUIActions: function() {
    s.moreButton.on("click", function() {
      NewsWidget.getMoreArticles(s.numArticles);
    });
  },

  getMoreArticles: function(numToGet) {
    // $.ajax or something
    // using numToGet as param
  }

};

$(function(){
  NewsWidget.init({
    numArticles: 6
  });

  console.log(s.numArticles);
});

answered Feb 5, 2013 at 18:03

Michael J. Calkins

32.7k15 gold badges65 silver badges93 bronze badges

Collectives™ on Stack Overflow

Passing object as parameter to constructor function and copy its properties to the new object?

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related