功能范围与 AngularJS 手表混淆

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: [...]
    }
};

然后函数 evaluateDependentExpressions 被调用两次，其中 prop = 'Person.Age'.

非常感谢任何解决函数作用域问题的帮助。

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

功能范围与 AngularJS 手表混淆

Function scope messes with AngularJS Watches

javascript

angularjs

angularjs-scope

angularjs-watch