了解 AngularJS 函数 $arguments

Question

开始进入 angular.js，我看到了与回调参数相关的常见模式。一个例子是 ui-router documentation:

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

myApp.config(function($stateProvider, $urlRouterProvider) {
    // Do stuff with ui-router providers
}):

但是，据我所见，myApp.config 回调的参数可能不同，但仍会按预期运行：

myApp.config(function(OtherProvider) {
    // Do stuff with provider from another service
});

myApp.config 是怎么知道区别的？是否进行了奇怪的魔术自省，或者是否有一些基本的 JS 概念允许这样做？例如。类似于：

myApp.config = function(callback) {
    var providerNames = callback.argumentNames;
    var providers = this.findProviders(providerNames);
};

也许我太习惯了 python，这种功能只有通过一些非常可怕的 hack 才能实现。

Answer 1

这个是一个被 Angular for one method of dependency injection 使用的 "scary hack" - 其中服务名称是从参数名称自动解析的。 在语言级别没有对此类操作的内在支持。

参数值（但不是参数名称）可以通过arguments object within the function. However, the argument names themselves can only be accessed by applying [[ToString]]访问函数对象并解析结果¹，其中是一个 "scary hack"。

在显式形式中，注入的参数必须以与提供的依赖项列表相同的顺序出现 - 在这种情况下，参数名称无关紧要，因为服务名称已单独提供。

来自链接文档的表格摘录，稍作修改：

// service names supplied separately
//  - only Order of parameters matters
someModule.controller('MyController',
  ['$scope', 'greeter', function(I_am_a_scope, greeter) { ..

// service names supplied separately
//  - only Order of parameters matters
var MyController = function($scope, GREETER) { ..
MyController.$inject = ['$scope', 'greeter'];

// "scary hack" magic of Angular JS, as service names not specified separately
//  - the Name of the parameters is used as service name
// arguably Too Much Magic (TM), and a source of pain for minification
someModule.controller('MyController', function(greeter, $scope) { ..

前两种形式使用Function.prototype.apply, which is similar to apply() in Python。第三个请求并解析函数的文本表示 - "scary hack".

¹要了解如何实现神奇的形式，请考虑以下内容：

f = function (a,b) { return a+b }
f.toString() // e.g. -> "function (a, b) { return a + b; }"

ECMAScript 5 说 Function.prototype.toString returns:

An implementation-dependent representation of the function is returned. This representation has the syntax of a FunctionDeclaration. Note in particular that the use and placement of white space, line terminators, and semicolons within the representation String is implementation-dependent.

（我不知道有哪个现代浏览器没有 return 'usable' 结果；returning a[=43 的行为=]表示不是可选的是ES5。）

Answer 2

这基本上是 javascript 的一部分。 Javascript 在调用时对于函数参数非常非常灵活。

例如你声明了一个函数：

 function abc (first, second) {

 }

但是当你调用它时，你可以传递任意数量的参数，即使没有零参数。如果您不传递参数但在声明函数时已定义该参数，您将获得该特定参数的值 'undefined' 但它不会中断代码执行。

Javascript 在函数内部提供了一个名为 'arguments' 的特殊局部数组（在 JS 中基本上一切都是对象）。我之所以调用 special 是因为它是一个只有一个数组属性的数组 'length' 其他数组方法或属性不可用

abc(firs,second,third)

在 abc 中，我们可以检查提供的参数

function abc (first, second) {
  var args_total = arguments.length; 
  var no_of_defined_args = Function.length;
}

是 Function.length 是另一个属性，您可以通过它检查此函数真正定义了多少参数

了解 AngularJS 函数 $arguments

Understanding AngularJS function $arguments

javascript

parameters

angularjs