AngularJS 1.4x 如何扩展工厂对象

Question

解决方案

感谢下面的hege-hegedus回答。将它应用到我的实际代码中并且效果很好。

// NOTE : called from another service, but removed function wrap around and angular module setup for brevity sake
// article is serverObject
var articleInstance = new Article(article);
console.log(articleInstance instanceof Article)
// true
console.log(articleInstance.isProduct(article))
// true (in my case)

/*
* Create the constructor from server article object using lodash
*/
ArticleConstructor.$inject = [];
function ArticleConstructor() {
    return function(data) {
        var keys = ['app_id', 'body', 'headline', 'object_type', 'url', 'status'
        ];
        _.assign(this, _.pick(data, keys));
    };
}

/*
* Extend the iief constuctor - ArticleConstruct
*/
Article.$inject = ['ArticleConstructor'];
function Article(ArticleConstructor) {

    function ArticleExtended(data) {
        ArticleConstructor.call(this, data);
    }

    //  create the new Article object with the ArticleConstructor prototype object and properties
    ArticleExtended.prototype = Object.create(ArticleConstructor.prototype);

    // Article inherits a constructor property from its prototype i.e. ArticleConstructor
    ArticleExtended.prototype.constructor = ArticleExtended;

    ArticleExtended.prototype.isProduct = function () {
        return this.object_type == 3;
    };

    ArticleExtended.prototype.hasImage = function () {
        return _.has(this, 'image');
    };

    return ArticleExtended;
}

如何扩展下面的工厂对象。我正在使用 lodash 自动水合工厂构造函数，效果很好，但现在我的原始方法都没有执行，例如isIcon() 返回错误消息 - “isIcon 不是函数”。我已经寻找答案，但大多数构造函数示例在对象末尾使用传统的return service;，它工作正常，但随后迫使我回到更手动的方法来构建构造函数。我觉得我错过了一些明显的东西。

使用 AngularJS 1.4.8

要扩展的工厂对象

// AJS factory - the problem child
ImageUnableToExtendFn.$inject = ['IMG_TYPE'];
function ImageUnableToExtendFn(IMG_TYPE) {

  Image.prototype.isIcon = function (img) {
    return img.type === IMG_TYPE.ICON;
  };

 return function(data) {
    var keys = ['id', 'src', 'alt', 'type'];
       _.assign(this, _.pick(data, keys));
    };
});

我尝试使用 angular.extend() 扩展 IIEF 工厂，但这也不起作用（示例如下）：

angular.extend(imageOfUnableToExtendFn, {
    isIcon: function(img) {
        return img.type === IMG_TYPE.ICON;
    }
})

以上内容仅供参考

define([
   'angular',
   'lodash'

], function(angular, _) {
'use strict';

ImageService.$inject = ['ImageClassicFn', 'ImageUnableToExtendFn'];
function ImageService(ImageClassicFn, ImageUnableToExtendFn) {

    var imageService = {
        images: null,

        createInstance: function(serverImageObject) {
            var self = this,
                imageOfClassicFn,
                imageOfUnableToExtendFn,
                isIcon,

            if (angular.isDefined(serverImageObject)) {

                imageOfClassicFn = new ImageClassicFn();
                isIcon = imageOfClassicFn.isIcon(serverImageObject);
                console.log('IS ICON', isIcon);
                // >  true of false 

                imageOfUnableToExtendFn = new ImageUnableToExtendFn(serverImageObject);
                // result is a hydrated instance of ImageClassicFn with mapped keys using lodash
                isIcon = imageOfClassicFn.isIcon(serverImageObject);
                // ERROR - isIcon is not a function 

                // Attempting to extend manually fails silently 
                angular.extend(imageOfUnableToExtendFn, {
                    isIcon: function(img) {
                        return img.type === IMG_TYPE.ICON;
                    }
                })

                isIcon = imageOfClassicFn.isIcon(serverImageObject);
                // SAME ERROR - isIcon is not a function 
            }
        }
    };

    return imageService;
}

ImageClassicFn.$inject = ['IMG_TYPE'];
function Image(IMG_TYPE) {

  function Image(id, src, alt, type) {
    this.id = id;
    this.src = src;
    this.alt = alt;
    this.type = type;
  }

  Image.prototype.isIcon = function (img) {
    return img.type === IMG_TYPE.ICON;
  };

    return Image;
});

ImageUnableToExtendFn.$inject = ['IMG_TYPE'];
function Image(IMG_TYPE) {

  Image.prototype.isIcon = function (img) {
    return img.type === IMG_TYPE.ICON;
  };

return function(data) {
    var keys = ['id', 'src', 'alt', 'type'];
       _.assign(this, _.pick(data, keys));
    };
});


return angular.module('content.images', [

    ])
     .constant("IMG_TYPE", {
        "ICON": 1,
    })
    .factory('ImageClassicFn', ImageClassicFn)
    .factory('ImageUnableToExtendFn', ImageUnableToExtendFn)
    .service('ImageService', ImageService);

});

Answer 1

javascript 中的子类化有点棘手。看看this SO post about javascript inheritance。

基本上，这就是你通常这样做的方式，包裹在 Angular 1.x 模块中：

ImageClassicFactory.$inject = ['IMG_TYPE'];
function ImageClassicFactory(IMG_TYPE) {

  function ImageClassic(id, src, alt, type) {
    this.id = id;
    this.src = src;
    this.alt = alt;
    this.type = type;
  }

  ImageClassic.prototype.isIcon = function (img) {
    return img.type === IMG_TYPE.ICON;
  };

  return ImageClassic;
});
module.factory('ImageClassic', ImageClassicFactory);



ImageExtendedFactory.$inject = ['IMG_TYPE', 'ImageClassic'];
function ImageExtendedFactory(IMG_TYPE, ImageClassic) {

  function ImageExtended(id, src, alt, type) {
      ImageClassic.call(this, id, src, alt, type);
  }
  ImageExtended.prototype = Object.create(ImageClassic.prototype);
  ImageExtended.prototype.constructor = ImageExtended;

  ImageExtended.prototype.isIcon = function (img) {
    return img.type === IMG_TYPE.ICON;
  };

  return ImageExtended;
});

module.factory('ImageExtended', ImageExtendedFactory);