javascript - 使用 Object.create() 的 Angular 服务继承

Question

我正在尝试在 Angular 服务中使用继承，如下所述: http://blog.mgechev.com/2013/12/18/inheritance-services-controllers-in-angularjs/ ，我想使用“注入(inject)父级”方法。

但是，它似乎不起作用，我不明白为什么。

var myApp = angular.module('myApp',[]);

angular.module('myApp').controller('MyCtrl', MyCtrl);
angular.module('myApp').factory('BaseModel', BaseModel);
angular.module('myApp').factory('ThreadModel', ThreadModel);
angular.module('myApp').factory('PostModel', PostModel);

function MyCtrl($scope, ThreadModel, PostModel) {
  $scope.tableNameForThreads = ThreadModel.getTableName();
  $scope.tableNameForPosts = PostModel.getTableName();
}

function BaseModel() {
  var tableName = "";

  var service = {
    init: init,
    getTableName: getTableName
  };

  return service;

  function getTableName() {
    return tableName;
  }

  function init(theTableName) {
    tableName = theTableName;
  }
}

function ThreadModel(BaseModel) {
  var service = Object.create(BaseModel);
  service.init("threads");
  return service;
}

function PostModel(BaseModel) {
  var service = Object.create(BaseModel);
  service.init("posts");
  return service;
}

结果是 ThreadModel.getTableName() 返回“posts”而不是“threads”。

我尝试了 Object.create(...) 和 angular.copy(BaseModel, this)，但两者似乎都没有进行深度复制。

JSFIDDLE:http://jsfiddle.net/dirkpostma/Lvc0u55v/3989/

我在这里做错了什么？

Answer 1

问题是这个设置使用 Object.create您使用 tableName 提供服务存储在同一个公共(public)闭包中的变量(BaseModel 函数)。简单来说，init方法修改相同 local tableName变量。

你可以这样修复它:

function BaseModel() {

  var service = {
    init: init,
    getTableName: getTableName
  };

  return service;

  function getTableName() {
    return this._tableName;
  }

  function init(theTableName) {
    this._tableName = theTableName;
  }
}

请注意，getTableName和 init方法现在使用实例属性 this._tableName TableModel 之间不共享和 PostModel实例。

演示: http://jsfiddle.net/Lvc0u55v/3991/