Question

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

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

在循环中创建$ watch函数时，似乎很好，但是当监视实际执行时，只有最后一个属性保留在函数作用域中。这意味着对于所有$ watch（评估不同的表达式），执行的函数都是相同的。

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 =＆＃39; Person.Age＆＃39;。

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

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手表混淆

1 个答案: