title: JavaScript OOP - Getter that returns member on base
body: <p>I am having some problems implementing getters and setters on my model objects for use in Angular. I am getting this error:</p>
  
  <pre><code>TypeError: Cannot read property 'firstName' of undefined
  at User.firstName (http://run.plnkr.co/AvdF2lngjKB76oUe/app.js:35:32)
  </code></pre>
  
  <p>My code:</p>
  
  <pre><code>angular.module('getterSetterExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
        var intObj = { firstName: 'Brian' };
        $scope.user = new User(intObj);
    }]);
  
  function ModelBase(wo) {
    this.wrappedObject = wo;
  
    this.onPropertyChanged = function(self, propertyName, oldValue, newValue) {
      //alert(self + ", " + propertyName + ", " + oldValue + ", " + newValue);
    }
  }
  
  var isDefined = function(value) {
      return typeof value !== 'undefined';
  };
  
  User.prototype = new ModelBase();
  User.prototype.constructor = User;
  
  function User(wo) {
    ModelBase.call(this, wo);
  
    this.firstName = function(value) {
      if(isDefined(value))
      {
        var oldValue = this.wrappedObject.firstName;
        this.wrappedObject.firstName = value;
        //onPropertyChanged(this.wrappedObject, 'firstName', oldValue, value);
      }
      else 
      {
        return this.wrappedObject.firstName; //(Line 32)
      }
    }
  }
  </code></pre>
  
  <p>As far as I can see, the getter is getting called before wrappedObject is actually set on the base object. What am I missing here? I have included the onPropertyChanged, but commented it out to better show what I am trying to accomplish.</p>
  
  <p><a href="http://plnkr.co/edit/iSAElHU02UBeULZX3WR1" rel="nofollow">Plunker</a></p>