函数范围与 AngularJS 手表混淆答案

【问题标题】：Function scope messes with AngularJS Watches函数范围与 AngularJS 手表混淆
【发布时间】：2016-10-09 22:27:09
【问题描述】：

我目前处于需要根据对象的属性创建几个手表的情况。

这些属性用于对依赖于相同变量/表达式的函数进行分组。

在循环中创建 $watch 函数时，看起来不错，但是当手表实际执行时，只有最后一个属性保留在函数范围内。这意味着对于所有 $watches（评估不同的表达式），执行的函数都是相同的。

for (var prop in obj) {
    if (obj.hasOwnProperty(prop) {
        $scope.$watch(function() { 
            return evaluateExpression(obj[prop].expression);
        }, function(newVal, oldVal) {
            evaluateDependentExpressions(obj[prop].dependentExpressions);
        }); 
    }
}

现在如果我的 obj 变量如下所示：

var obj = {
    'Person.Name': {
        expression: ...,
        dependentExpressions: [...]
    },
    'Person.Age': {
        expression: ...,
        dependentExpressions: [...]
    }
};

然后函数 evaluateDependentExpressions 在 prop = 'Person.Age' 的值处被调用两次。

非常感谢任何关于如何解决函数范围问题的帮助。

plunk

【问题讨论】：

标签： javascript angularjs angularjs-scope angularjs-watch

【解决方案1】：

这是 JavaScript 中的已知问题 prop 变量设置为 for (var prop in obj) 中的最后使用值，简单的解决方法是使用 IIFE：

for (var p in obj) {
  (function(prop) {
     // your code

     if (obj.hasOwnProperty(prop) {
       $scope.$watch(function() { 
        return evaluateExpression(obj[prop].expression);
       }, function(newVal, oldVal) {
        evaluateDependentExpressions(obj[prop].dependentExpressions);
       }); 
     }
   })(p);
}

此处解释：JavaScript closure inside loops – simple practical example

【讨论】：