Javascript extending an object question

Question

I have the following code:

this.myObject = {
   key1: "val1",
   key2: "val2"
}

this.aMethod = function (newObject) {
    ...

Here I want a new object (probably that inherits from this.myObject) that contains everything in this.myObject plus whatever is in newObject also, fields in newObject should override already existing fields in this.myObject

How do I do this?

This idea is that this.myObject provides some default values - but the user of the method can override these values. I'm open to criticisms of this overall "pattern" as well. Thanks.

In the future, instead of asking your question in "code comments", ask it in the question text - people can see the question as containing text only and close it as "not a real question". — Oded
– Oded, Commented Nov 11, 2010 at 13:14
the code I showed above is itself inside of a prototype method — bba
– bba, Commented Nov 11, 2010 at 13:31
@bba I would like to see the whole pattern (the whole prototype method) — Šime Vidas
– Šime Vidas, Commented Nov 11, 2010 at 13:38
That is pretty much the entire code. Just wrap it in something like: SomeObject.prototype.Method = function() { ... }; — bba
– bba, Commented Nov 11, 2010 at 13:40

Šime Vidas · Accepted Answer · 2010-11-11 15:16:09Z

5

SomeObject.prototype.someMethod = function() {

    this.myObject = { key1: 1, key2: 2 };

    this.aMethod = function (o) {
        var newObject = object(this.myObject);

        for (var prop in o) {
            if (o.hasOwnProperty(prop)) {
                newObject[prop] = o[prop];
            }
        }

        // Now newObject contains all properties from the passed in object
        // and also inherits all properties from myObject

    };

};

Note: I am using the object function from @Marco's answer.

edited Nov 11, 2010 at 15:16

answered Nov 11, 2010 at 14:24

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

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

2 Comments

bba Over a year ago

Thanks - Ill accept your answer for working with me on this. Is this preferred over simply using the JQuery extend function?

Šime Vidas Over a year ago

@bba I haven't looked into that particular jQuery function yet, but in general I would always prefer jQuery over my own code, since jQuery is thoroughly tested and cross-browser.

Marco Mariani · Accepted Answer · 2010-11-11 13:23:06Z

5

Thus spoke Douglas Crockford:

function object (o) {
  function F() {}
  F.prototype = o;
  return new F();
}

There are literally dozens of ways to do that. The videos at Yahoo Theater, and the books Javascript: The Good Parts and Object Oriented Javascript explore some trade-offs. Many javascript libraries implement a simple "class-like" inheritance pattern, but it's just a small piece of the whole cake.

answered Nov 11, 2010 at 13:23

Marco Mariani

13.8k7 gold badges42 silver badges55 bronze badges

Comments

Simon · Accepted Answer · 2010-11-11 13:22:05Z

0

this should do the work:

this.aMethod = function(newObject){
  combinedObject = {};
  for(key in this.myObject){
    combinedObject[key] = this.myObject[key];
  }
  for(key in newObject){
    combinedObject[key] = newObject[key];
  }
  return combinedObject;
}

or, if you are using jquery, in one line:

return $.extend({},this.myObject,newObject);

answered Nov 11, 2010 at 13:22

Simon

3,5391 gold badge21 silver badges21 bronze badges

7 Comments

Šime Vidas Over a year ago

Since the OP's code is function code, the this value inside the aMethod function and the this value outside of it don't refer to the same thing, ergo, this.myObject won't give you the object defined earlier in the code.

bba Over a year ago

Sime - do I need to do something like: var self = this, outside of aMethod, and then use self.myObject?

Šime Vidas Over a year ago

@bba That would do it. However, the convention is var that = this; and then that.myObject.

Šime Vidas Over a year ago

@Simon When using for-in loops, it is a good idea to do hasOwnProperty checks so that you don't pick up inherited members... (for example, if the Object.prototype has been augmented).

Simon Over a year ago

Correct me if i'm wrong, but I really don't see the problem with the this reference in this code. The this reference inside the method still points to the object that contains the method, which is the same object to which the this reference outside the method points to. The referenced object never changes, when I'm using this code inside of a prototype or constructor function definition.

|

Harold · Accepted Answer · 2014-01-22 15:50:41Z

0

If this is what you're looking for:

var Base = function() {
    this.foo = "bar";
};

var MyClass = new Class({ extends: Base }, function() {

    this.myMethod = function() {
        return this.foo; // bar
    }

});

Check this out: Minified 2kb minimalistic library which you can use, https://github.com/haroldiedema/joii/

answered Jan 22, 2014 at 15:50

Harold

1,4131 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

Javascript extending an object question

4 Answers 4

2 Comments

Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related