AngularJs和Javascript嵌套函数及其调用(AngularJs & Javascript nested functions & their invocation)

请考虑以下代码

<body ng-app="myApp"> <h1>Hello {{name}}</h1> <h2>reverse of your name is {{ name | reverse }}</h2> <input type="text" ng-model="name"> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js'></script> <script> angular.module('myApp', []) .filter('reverse', function(){ return function(str){ return str.split('').reverse().join(''); } }); </script> </body>

这里感兴趣的是reverse滤波器。以下是我认为它的作用：

用两个args调用angular.filter() 。 arg1: strin g＆ arg2: function （ arg1: strin匿名或无名的函数） arg2函数不接受参数，而是在其中嵌套另一个匿名函数。这个嵌套的匿名函数确实需要单个参数 - 应用此过滤器的文本或字符串。这个嵌套的匿名函数接受字符串，将其反转。

Q1。我的理解是否正确？

Q2。有什么区别： 普通版：

angular.filter('reverse', function(str){ return str.split('').reverse().join(''); });

嵌套版本：

angular.filter('reverse', function(str){ return function(str){ return str.split('').reverse().join(''); } });

Q3。为什么额外的函数嵌套级别有用，在什么情况下我会直接返回值。或者返回一个函数然后返回实际结果？

Q4。这对范围有何影响？闭包可以在这里发挥作用吗？

JSFiddle ： http ： //jsfiddle.net/C7EDv/

Consider the following code

The interested bit here is the reverse filter. Here is what I think its doing:

calls angular.filter() with two args. arg1: string & arg2: function(anonymous or no-name function to be precise) arg2 function doesn't take a argument and instead nested another anonymous function inside it. This nested anonymous function does takes single argument - the text or string on which this filter would apply. this nested anonymous function takes the string, reverses it.

Q1. Is my understanding correct?

Q2. What the difference between: normal version:

angular.filter('reverse', function(str){ return str.split('').reverse().join(''); });

nested version:

angular.filter('reverse', function(str){ return function(str){ return str.split('').reverse().join(''); } });

Q3. Why is extra level of function nesting useful & under what circumstances will I return the value directly. Or return a function which then does return the actuall result?

Q4. How does this affects scope? does closures have any role to play here?

JSFiddle: http://jsfiddle.net/C7EDv/

最满意答案

（Q1.1）右 - 两个args，一个带有过滤器名称的字符串......

（Q2 / 3） filter的第二个参数（arg2）是构造函数（或“工厂”）函数。它仅在创建过滤器时执行一次。

构造函数必须返回一个函数。返回的函数将在使用与其关联的过滤器时执行。换句话说，返回的函数是注入（使用$ injector）到过滤器的函数（ http://docs.angularjs.org/api/ng。$ filterProvider）

我在下面添加了评论，详细说明了这一点：

angular.filter('reverse', function(service){ // This is run only once- upon creation return function(str){ // This is run every time the filter is called return str.split('').reverse().join(''); } });

（Q3） 你总是使用这个表单（“嵌套表单”），否则你会得到一个错误 （ Object ... has no method 'apply' ）因为Angular需要一个它可以调用的函数（使用每当使用过滤器时， apply() ）。这与Angular中的所有提供程序（包括服务）完全相同。

（Q2）如果可以执行所谓的“正常版本”，那么过滤器在创建时只运行一次。它获得的任何返回值都将用于过滤器的每次调用。由于具有始终返回相同值的过滤器通常不会有用，因此Angular会使用此javascript构造函数模式（您将在JS中的其他位置使用），以便每次使用过滤器都会导致对关联的新调用功能。

（Q1.4）是的，返回的函数确实反转了字符串。这是一个关于这个过滤器的2分钟视频： http ： //www.thinkster.io/pick/EnA7rkqH82/angularjs-filters

（Q1.2 / 3）你的过滤器是否应该使用你在我上面使用过service地方传递的任何服务（上面的链接有一个例子）。参数str是您记录的过滤器输入。

（Q4）“run one”区域确实创建了一个闭包 - 所以你可以像使用任何其他闭包那样使用它。

(Q1.1) Right- two args, a string with the name of the filter and...

(Q2/3) The second parameter to filter (arg2) is a constructor (or "factory") function. It is only executed once upon creation of the filter.

The constructor function must return a function. That returned function will be executed when the filter it is associated with is used. Put another way, the returned function is what is injected (using $injector) in to the filter (http://docs.angularjs.org/api/ng.$filterProvider)

I've added comments below detailing this:

(Q3) You'll always use this form ("the nested form") otherwise you'll get an error (Object ... has no method 'apply') as Angular needs a function to be returned which it can call (using apply()) whenever the filter is used. This works exactly like all providers in Angular including services.

(Q2) Were it possible to do what you called the "normal version" then the filter would run only once, upon creation. And whatever return value it got would be used for every invocation of the filter. Since having a filter that always returns the same value wouldn't be useful very often Angular instead uses this javascript constructor pattern (which you'll see used elsewhere in JS) so that each use of the filter results in a new invocation of the associated function.

(Q1.4)Yes, the returned function does reverse the string. Here's a nice 2 minute video on exactly this filter: http://www.thinkster.io/pick/EnA7rkqH82/angularjs-filters

(Q1.2/3)Should your filter use any services you'd pass them in where I used service above (the above link has an example of that). The parameter str is the input to the filter like you noted.

(Q4) The "run once" area does create a closure- so you can use it like you would any other closure.

更多推荐