AngularJS中如何调用声明在调用语句之后的函数？

嘿，这个问题本质上是JavaScript的变量提升特性导致的，咱们先看看你给出的代码为什么会出错，再聊聊可行的解决办法～

为什么你的原代码会报错？ #

你写的代码是这样的：

$scope.x(); 
$scope.x = function(){ console.log("calling method"); }

在JavaScript里，变量的声明会被提升，但赋值操作不会。当执行$scope.x()这一行时，$scope.x还只是undefined，自然会抛出类似TypeError: $scope.x is not a function的错误。

解决办法 #

1. 最直接：先赋值函数，再调用 #

这是最符合代码逻辑的做法，把函数定义放到调用语句的前面：

$scope.x = function(){ console.log("calling method"); };
$scope.x(); // 现在可以正常执行啦

2. 利用函数声明的提升特性（适用于私有函数后挂载到$scope） #

如果你的函数一开始是控制器内的私有函数，可以用函数声明的方式——函数声明会被完整提升，所以可以先调用私有函数，再写函数声明，之后再挂载到$scope上：

// 先调用私有函数
x();
// 再写函数声明
function x() {
  console.log("calling method");
}
// 挂载到$scope
$scope.x = x;

不过要注意：直接挂在$scope上的函数表达式（你原代码的写法）是不会被提升的，所以这个方法只适用于私有函数的场景。

3. 用$timeout延迟调用（仅作为应急方案） #

如果因为某些业务逻辑限制，必须先写调用语句，可以用AngularJS的$timeout服务把调用延迟到下一个事件循环周期，此时函数已经完成赋值：

// 记得在控制器里注入$timeout服务哦
app.controller('YourController', ['$scope', '$timeout', function($scope, $timeout) {
  $timeout(function() {
    $scope.x(); // 此时$scope.x已经被赋值为函数
  });
  
  $scope.x = function(){ console.log("calling method"); };
}]);

⚠️ 这个方法属于“hack”性质，尽量不要滥用，除非实在没办法调整代码顺序。

4. 提前占位避免报错（仅用于不要求立即执行目标函数的场景） #

如果只是想避免调用时的报错，不要求立即执行后面定义的函数，可以先给$scope.x赋值一个空函数占位：

// 用AngularJS提供的空函数占位
$scope.x = angular.noop;
$scope.x(); // 不会报错，但也不会执行任何操作

// 之后再覆盖为目标函数
$scope.x = function(){ console.log("calling method"); };

这个方法适合那些需要提前绑定函数（比如模板里的点击事件），但函数逻辑后续才定义的场景。

总结 #

最推荐的做法还是先定义函数，再调用，这样代码逻辑清晰，也能避免变量提升带来的各种坑。

内容的提问来源于stack exchange，提问作者YyAaSs