Extending a Javascript object without assigning properties to the prototype?

Question

I've been trying to see if there's a way around the typical process of extending an object, whereby it shows that it's assigning the extended properties to prototype of the object, but attached to the 'extend' method itself on the current object. I want the properties to be assigned DIRECTLY on the current object (ie. "this.property" and not "this.extend.property"). Let me explain:

As far as I know, there are two ways to "extend" an object in Javascript:

1) global function:

function extend(a, b){
    for(var key in b)
        if(b.hasOwnProperty(key))
            a[key] = b[key];
    return a;
}

I can then run this code to "extend" my App object:

function App() {

    extend(this, {
        command: function () {
            alert('command!');
        }
    });

    console.log(this);

    return this;
}

2) Another way to extend is to use the Object prototype directly, ie:

Object.prototype.extend = function(obj) {
   for(i in obj)
      this[i] = obj[i];
};

And then extend App with:

function App() {

    this.extend({
        command: function () {
            alert('command!');
        }
    });

    console.log(this);

    return this;
}

However, while the 'command' function will now be accessible on the App object in either case above, both of them still show that the command function is an extension of the 'extend' method in the App prototype. The console output from both of these shows: (hiding other App properties for brevity):

command: function () {
    arguments: null, 
    caller: null, 
    length: 0, 
    name: "", 
    prototype: App.extend.command
}

Notice the 'App.extend.command'? I am wondering if there is ANY way to extend the properties so that they are DIRECT attributes of the App object, so that prototype will show: "prototype: App.command".

I can achieve this if I assign the propertie directly to "this", like:

function App() {

    this.command = function () {
        alert('command!');
    }

    console.log(this);

    return this;
}

Which outputs:

command: function () {
    arguments: null, 
    caller: null, 
    length: 0, 
    name: "", 
    prototype: App.command
}

However, I don't want to have to use the format of "this.blah = function()" for all of my properties. I would rather just extend the current object with a JSON list of properties as shown in the first two examples. Is there anyway to do this so that I can still keep my 'newable' function declarations?

I will add that is preferable to NOT use the prototype method, as this will add the 'extend' property to ALL objects in the application, which is not desirable for certain objects.

Thanks for reading!

That's just a debugging name which has no function in the script. It's chosen rather arbitrarily by your devtools. I think you can overrule it by simply naming the function — Bergi
– Bergi, Commented Nov 9, 2014 at 18:45

Martin Ernst · Accepted Answer · 2014-11-09 20:48:09Z

1

To get things more clearly you should inspect all three ways you've posted with Firebug in Firefox. What the webkit-consoles output there has nothing to do with App.prototype but is the hierarchy of all functions called to setup the command-property. The App.prototype you find under App.__proto__.

With your way 1) you definitely set all properties of object b as own properties of each App instance (= this). These props and also function extend() becomes not part of the App prototype. You can check it out:

console.log(App.prototype);
// or you create an instance of App and search for its prototype:
var myapp = new App(); console.log(Object.getPrototypeOf(myapp));

You achieve exactly the same result as by way 1) when you incorporate function extend() in the App constructor like this:

function App(b) {
    if (typeof b == 'object') for (var key in b) this[key] = b[key];
    console.log(this);
    // Aside: you don't need 'return this', it's done automatically when you use 'new App()'
}
var obj = {command: function () {alert('command!');}};
var myapp = new App(obj);

I would prefer this method because it's easy to rule which App object gets what properties simply by passing them in as argument.

Only with your way 2) function extend() becomes a property of App.prototype because you explicitely define it so. Then its inherited to all App instances.

edited Nov 9, 2014 at 20:48

answered Nov 9, 2014 at 18:07

Martin Ernst

3,2891 gold badge15 silver badges12 bronze badges

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

1 Comment

Ryan Weiss Over a year ago

Thanks Martin. I like method #1 best also, so that it does not put the extend method on ALL Object instances (whether they are an App or not). I guess maybe it's just Chrome's debugger trying to be specific, but I realize that it really doesn't matter. I just wanted to check with someone who might have a little more knowledge and see if I was maybe missing something. Thank you for your feedback.

Collectives™ on Stack Overflow

Extending a Javascript object without assigning properties to the prototype?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related