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

Answer 1

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
}