为什么是 angular.forEach 上下文？答案

【问题标题】：Why angular.forEach context?为什么是 angular.forEach 上下文？
【发布时间】：2016-03-21 14:06:13
【问题描述】：

我正在分析angular.forEach 函数：

这里是angular.forEach的代码：

var values = {name: 'misko', gender: 'male'};
var log = [];

angular.forEach(values, function(value, key) {
  this.push(key + ': ' + value);
}, log);

expect(log).toEqual(['name: misko', 'gender: male']);

上下文描述为：

对象成为迭代器函数的上下文（this）。

我想出了一些问题：

为什么使用参数context以及何时有用？！

为什么使用 this 而不是 log 变量？

【问题讨论】：

标签： javascript angularjs foreach

【解决方案1】：

在您提供的示例中，使用this 或直接使用log array 相同。那是因为forEach method 和log array 中使用的callback 定义在同一个scope 中。

但是，在某些情况下，callback 在与log array 不同的scope 中定义。那么调用应该如下所示：

angular.forEach(values, getNames, log);

在这种情况下，我们应该在回调中使用this，因为它将引用在不同的scope 中定义的log array。

编辑：

请参阅此 JSFiddle demo 和以下显示我解释的代码。

var getNames = function(value, key) {
  this.push(key + ': ' + value);
};

var processObject = function(){
  var log = []; 
  // Now getNames callback is defined in a different 
  // scope than log
  angular.forEach(values, getNames, log);
  return log;
}

var values = {name: 'misko', gender: 'male'};
var resultArray = processObject(values);
// This gives same result as your exmple
alert(resultArray);

【讨论】：

【解决方案2】：

从未使用过 angular.forEach() 但它看起来很简单。

  var hello = {
      message: 'Ok'
  };

  angular.forEach([' I', ' said', ' hello'], function (value) {
      this.message += value;
  }, hello);

  console.log(hello.message);

1/ 它将记录“Ok I said hello”，所以基本上“context”参数将允许您更新您将引用的任何对象。用例真的很广泛...

2/ 我认为这与执行上下文有关。词法环境，因此这意味着 this 必须与 angular.forEach 的实现方式相关。只需检查 angularjs 源代码。

【讨论】：

感谢关注。