Using extend to add an object to a prototype

Question

I get an error whenever I try to add the object BaseNet to IPv4Address.prototype. The error:

TypeError: Cannot read property 'ipInt' of undefined

just doesn't make sense. It's behaving like the getter is actually being executed when I copy the object to the prototype. Is there a way to copy this and not get an error like this?

var _s = require('underscore')

var BaseNet = {
  get network(){ 
    return new IPv4Address((this.ipInt & this.netmask.ipInt) >>> 0);
  },
}

function IPv4Address (address){
  this.ipInt = address
  this.netmask = {}
  this.netmask.ipInt = 255
}

_s.extend(IPv4Address.prototype,BaseNet)

//also fails with generic extend:

function extend(destination, source) {
  for (var k in source) {
    if (source.hasOwnProperty(k)) {
      destination[k] = source[k];
    }
  }
  return destination;
}

extend(IPv4Address.prototype,BaseNet)

First Edit

Maybe this is an answer to my own question. Resig had a post on this and this "modififed" extend method seems to do what I'm looking for. Can someone explain? It seems that it's a scoping problem, but i don't understand why it was behaving like someone was actually calling the getter during the extend operation.

http://ejohn.org/blog/javascript-getters-and-setters/

function extend(a,b) {
    for ( var i in b ) {
        var g = b.__lookupGetter__(i), s = b.__lookupSetter__(i);

        if ( g || s ) {
            if ( g )
                a.__defineGetter__(i, g);
            if ( s )
                a.__defineSetter__(i, s);
         } else
             a[i] = b[i];
    }
    return a;
}

Second Edit

So I did some more experimenting and I came up with two other ways that seems to work. One uses the extend method posted earlier and another uses the defineProperties method form the ECMA spec pointed out in the comments. Is one better than the other? It seems that the "mixin" style works better for what i'm looking for, but the Object.create way also works.

var BaseNet = {}
Object.defineProperties(BaseNet, {
  "network":{
    enumerable:true,
    get: function (){return new IPv4Address((this.ipInt & this.netmask.ipInt) >>> 0)}
            }
    });

function IPv4Address (address){
  this.ipInt = address
  this.netmask = {}
  this.netmask.ipInt = 255
}
IPv4Address.prototype = Object.create(BaseNet)
var ip = new IPv4Address(12345)
ip.netmask

Alternatively, you can also do:

var BaseNet = {}
Object.defineProperties(BaseNet, {
  "network":{
    enumerable:true,
    get: function (){return new IPv4Address((this.ipInt & this.netmask.ipInt) >>> 0)}
            }
    });

function IPv4Address (address){
  this.ipInt = address
  this.netmask = {}
  this.netmask.ipInt = 255
}
extend(IPv4Address.prototype,BaseNet)
var ip = new IPv4Address(12345)
ip.netmask

IPv4Address's prototype is an empty object. ipInt is a a property of an instance of IPv4Address, set when you call the constructor function. — Felix Kling
– Felix Kling, Commented Sep 15, 2011 at 16:38
yeah, that's true, but i'm not instantiating the object. no new, or anything. i'm just copying one object, BaseNet, to an uninstantiated function.prototype. — Sneaky Wombat
– Sneaky Wombat, Commented Sep 15, 2011 at 16:51
Oh sorry, I thought it is vice versa.... that you wanted to add IPv4Address to BaseNet.... sorry. — Felix Kling
– Felix Kling, Commented Sep 15, 2011 at 17:10

pimvdb · Accepted Answer · 2011-09-15 17:12:43Z

2

It does not work because whilst extending, the getter is executed, at which point this.netmask is not an instance at all (there are no instances created), but in fact undefined, so accessing this.netmask.ipInt throws an error (you cannot access anything from undefined or null, it throws an error in any case).

Have a look at the underlying _.extend code:

  _.extend = function(obj) {
    each(slice.call(arguments, 1), function(source) {
      for (var prop in source) {
        // source[prop] is fetched, so getter is executed
        if (source[prop] !== void 0) obj[prop] = source[prop];
      }
    });
    return obj;
  };

You might instead want to iterate yourself and copy the getter "untouched" with a for in loop and Object.defineProperty.

As for your edit: Those __xxx__ functions are an ugly way to get the getter/setter function without executing it. Normally, passing a function works like someFunction without parentheses. A getter, however, would automatically get executed if you access it with someGetter.

The function you posted copies getters/setters without executing them:

function extend(a,b) {
    for ( var i in b ) { // iterate over all properties
        // get getter and setter functions
        var g = b.__lookupGetter__(i), s = b.__lookupSetter__(i);

        if ( g || s ) { // if there is a getter or setter
            if ( g )
                a.__defineGetter__(i, g); // copy getter to new object
            if ( s )
                a.__defineSetter__(i, s); // copy setter to new object
         } else // if there is not getter nor setter
             a[i] = b[i]; // just copy the value; nothing special
    }
    return a; // return the altered object
}

edited Sep 15, 2011 at 17:12

answered Sep 15, 2011 at 17:01

pimvdb

155k80 gold badges313 silver badges358 bronze badges

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

4 Comments

Sneaky Wombat Over a year ago

Hmm, makes sense, but if I access the getter, it will call it, how do i copy it w/o doing that? I'm starting to wonder if I should be using getters/setters at all in javascript. They seem like a pilgrim in an unholy land, in the eyes of the javascript itself.

pimvdb Over a year ago

@Sneaky Wombat: Well, using __lookupGetter__ as in the example function you posted. They are great, but not supported everywhere, so you might prefer simple functions.

Sneaky Wombat Over a year ago

I guess i'm trying to understand his suggestion. about doing it with the for in w/o using lookupGetter, etc. This is for use exclusively with nodejs, so I don't care really about browsers. :)

pimvdb Over a year ago

@Sneaky Wombat: Basically, __lookupGetter__('someGetter') returns the getter function, like with a normal function you could just get the function with someFunction.

Collectives™ on Stack Overflow

Using extend to add an object to a prototype

First Edit

Second Edit

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

First Edit

Second Edit

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related