javascript - 函数作用域与 AngularJS Watches 混淆

Question

我目前的情况是需要根据对象的属性创建一些监视。

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

在循环中创建 $watch 函数时，看起来效果很好，但是当 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: [...]
    }
};

然后，在 prop 的值 = 'Person.Age' 的情况下，调用函数valuateDependentExpressions 两次。

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

plunk

Answer 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