javascript - 工厂在 AngularJS 中是如何工作的?

标签 javascript angularjs singleton factory

我正在经历这个blog .

enter image description here

作者提出,

当您使用工厂时,您会创建一个对象,向其添加属性,然后< strong>返回相同的对象。当您将此服务传递到您的 Controller 时,对象上的那些属性现在可以通过您的工厂在该 Controller 中使用。/强>

所以,根据我的理解,这一行

enter image description here

被替换为

enter image description here enter image description here enter image description here

作为服务对象返回 当我们调用 myFactory() 时。

到目前为止没有问题,

现在考虑片段,

<script type="text/javascript">
    var module =  angular.module('MyApp', []);

    module.factory('VaderService', function() {
        var VaderClass = function(padawan) {
            this.name = padawan;
            this.speak = function () {
                return 'Join the dark side ' + this.name;
            }
        }
        return VaderClass;
    });

    module.controller('StarWarsController', function($scope, VaderService) {
        var luke = new VaderService('luke');
        $scope.luke = luke.speak();
    });
</script>
</head>
<body ng-app="MyApp"> 
    <table ng-controller="StarWarsController">
        <tbody>
        <tr><td>{{luke}}</td></tr>
        </tbody>
    </table>
</body>

打印为,

Join the dark side luke

我不明白这里发生了什么,这条线

var luke = new VaderService('luke');

我们创建了工厂 VaderService('luke')实例,传递字符串 luke 作为参数,但令人惊讶的是,

中没有定义任何参数
module.factory('VaderService', function() {...

其次,返回一个函数,即VaderClass(),而不是一个对象。 (我很清楚javascript中的函数是一流的对象)。

字符串 luke 如何传递给 VaderClass 函数中的参数?

最佳答案

这些行没有像您所说的那样被替换。基本上,一旦您注入(inject)工厂,其中的代码就会执行一次。然后 Angular 将使用 new 执行一次 VaderService 函数。结果(因此在工厂内部返回)是将传递给注入(inject)工厂的每个地方的对象。

请注意,与面向对象的语言相比,Angular 术语在此领域有点违反直觉。在 Java 中,工厂用于生产某种类型的对象。在 Angular 中,这个工厂用于创建在模块之间共享的单个对象。这更像是传统面向对象中的单例。

如果您想要一个参数化的工厂,那么您应该考虑在工厂的返回中添加一个额外的 init() 函数,这将更改工厂内的局部变量。然后可以使用此闭包来跨 Controller 或指令持久保存状态。

关于javascript - 工厂在 AngularJS 中是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32220732/

相关文章:

AngularJS 从模态传回数据

angularjs - grunt-ng-注释所有 angularjs 文件

javascript - Bitbucket 管道和非 headless Puppeteer?

javascript - 守夜人错误: Unable to locate element: using: css selector

javascript - angular 的 ui-router 似乎正在缓存解析。当我不想要它的时候

java - 应用程序引擎上任务队列中单例的行为

java - Java 中惰性线程安全单例实例化的模式

具有单例用法的 JavaScript 命名空间?我难住了!

javascript - 即使重置范围,AngularJS Modal 也会保留值

javascript - Node.Js 不加载 json 内容也不将其解析为 JSON?