JavaScript OOP - 返回基础成员的 Getter

Question

我在我的模型对象上实现 getter 和 setter 以在 Angular 中使用时遇到一些问题。我收到此错误：

TypeError: Cannot read property 'firstName' of undefined
at User.firstName (http://run.plnkr.co/AvdF2lngjKB76oUe/app.js:35:32)

我的代码：

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)
    }
  }
}

据我所知，getter 是在 WrapObject 实际设置在基础对象上之前被调用的。我在这里想念什么？我已包含 onPropertyChanged，但将其注释掉以更好地展示我想要完成的工作。

Plunker

Answer 1

您在 firstName 方法中丢失了上下文。当这个方法被 Angular 调用时，它的执行上下文是全局对象。例如，您可以使用Function.prototype.bind 方法修复它：

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;
        }
    }.bind(this);
}