在js中,一般情况下函数是没有办法决定它要接收什么样的参数的,我们可以往js函数中传入任何个(函数的形参形同虚设)的参数。js函数很被动

但是在 Angular 中存在着依赖注入,也就是说,函数可以决定自己要什么参数,如:在 Angular的控制器中 想要什么参数如:$scope、$http都可以注入

1
2
3
4
5
6
7
8
9
10
11
12
<script>
let mod = angular.module('test',[]);//创建一个模块
//控制器是依赖于模块的
mod.controller('con1',function($scope){
$scope.a = 0;
$scope.b = 0;
$scope.d = 3;
$scope.int = function(str){
return parseInt(str);
};
});
</script>
  • 接下来模拟实现一下 依赖注入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自己实现angular中的依赖注入</title>
<style>

</style>
<script>
let provider = {
$scope:12,
$http:5,
$interval:8
}

//现在这个show 函数就实现了依赖注入
function show($scope,$http,$interval) {
console.log(arguments);
}

{
//模拟angular内部
//关键是取得执行函数的参数列表 数组 如:['$scope','$http','$interval']
let str = show.toString();
let args = str.slice(str.indexOf('(')+1,str.indexOf(')')).trim().split(',').map((item,index,arr)=>{return item.trim();});
let v = [];
for (let i=0;i<args.length;i++) {
v.push(provider[args[i]]);
}
show.apply(null,v);
}

</script>
</head>

<body>

</body>
</html>