• Angularのファクトリとサービスの違い

javascirptの new 演算子の有無に着目したオブジェクト生成

Angular中工厂和服务的区别

我将解释Angular1系中工厂和服务的区别。在以下代码中，我们在所属项目中发现了这样的东西。这主要是为项目成员准备的文章，但也可能对其他人有用。

首先声明一下。本文中所提到的代码未经过验证。

angular
  .module('hoge')
  .factory('hogeFactory', function(){
    function func1 (){}
    function func2 (){}
    function func3 (){}
    return {
      func1: function(){
        return func1();
      },
      func2: function(){
        return func2();
      },
      func3: function(){
        return func3();
      },
    };
  });

这样一来，函数调用就会浪费一次。

function functionName (){}

写下来，

var functionName = function(){}

一样的。

根据下面的代码，可以进行修正。

angular
  .module('hoge')
  .factory('hogeFactory', function(){
    function func1 (){}
    function func2 (){}
    function func3 (){}
    return {
      func1: func1,
      func2: func2,
      func3: func3,
    };
  });

使用该服务时，可以按照以下方式书写。

angular
  .module('hoge')
  .service('hogeService', function(){
    this.func1 = function(){}:
    this.func2 = function(){}:
    this.func3 = function(){}:
  });

关注于javascript中使用new运算符与否的对象生成。

在JavaScript中，有一种习惯是将以使用new运算符为前提的函数名称的首字母大写，本文也会遵循这一习惯。Person函数是一个使用new的函数，而person函数是一个不使用new的函数。

function Person(name, age){
  this.name = name;
  this.age = age;
  this.introduce = function(){ console.log(this.name + 'です。' +  this.age + '才です。'); };
  this.jump = function(){ console.log('ぴょーん'); };
  this.eat = function(){ console.log('ぱっくん'); };
}

var taro = new Person('太郎', 10);
taro.introduce();
taro.eat();
taro.jump();

本文旨在解释Angular中的服务和工厂。每次使用new操作符创建Person实例时，都会生成introduce、jump和eat函数对象，这不是一个好的例子。然而，由于Angular的服务是单例的，在解释上可能不太合适，但我们在这里将其说明如下。

function person(name, age){
  var object = {};
  object.name = name;
  object.age = age;
  object.introduce = function(){ console.log(this.name + 'です。' +  this.age + '才です。'); };
  object.jump = function(){ console.log('ぴょーん'); };
  object.eat = function(){ console.log('ぱっくん'); };
  return object;
}

var taro = person('太郎', 10);
taro.introduce();
taro.eat();
taro.jump();

再稍微改变一下，

function person(name, age){
  function introduce(){ console.log(this.name + 'です。' +  this.age + '才です。'); },
  function jump(){ console.log('ぴょーん'); },
  function eat(){ console.log('ぱっくん'); },

  return {
    name: name,
    age: age,
    introduce: introduce,
    jump: jump,
    eat: eat
  };

var taro = person('太郎', 10);
taro.introduce();
taro.eat();
taro.jump();

这里有两个版本，一个是使用new运算符的版本，另一个是不使用new运算符的版本，它们正好对应于Angular中服务和工厂的关系。

angular
  .module('hoge')
  .service('hogeService', function(){
    this.func1 = function(){}:
    this.func2 = function(){}:
    this.func3 = function(){}:
  })
  .factory('hogeFactory', function(){
    function func1 (){}
    function func2 (){}
    function func3 (){}
    return {
      func1: func1,
      func2: func2,
      func3: func3,
    };
  })
;

换句话说，Angular的服务在注入时使用new运算符，而工厂不使用new运算符。并且，尽管在一般的JavaScript程序中，重复创建同一个函数对象被认为是糟糕的编码方式，但Angular的服务和工厂是单例的，所以没有问题。如果不了解这些内容，就需要学习JavaScript中的原型。