Question

我有一个构造函数，用它初始化3个属性。

然后我有另一个循环this.actors的方法，并使用其他两个属性执行一些操作。但是在_.each块中，可以访问这些属性中的任何一个。

为了简化this.actors，在..each块中未定义this.mainPoint和this.actorsDistance。

function FindNearestPoint(actors, mainPoint) {
  //Assign the mainPoints co-ord to mainPoint
  this.mainPoint = actors[mainPoint];

  this.actors = actors;

  this.actorsDistance = {};
}

FindNearestPoint.prototype.getActorsDistance = function () {
  var i = 0;

  _.each(this.actors, function(el,key,list){
    this.actorsDistance[_.keys(this.actors)[i]] = Math.abs( 
      ( this.actors[key][0] - this.mainPoint[0] ) + 
      ( this.actors[key][1] - this.mainPoint[1] ) 
    );
    i++
  });
  return this.actorsDistance;
};

Answer 1

当控件到达_.each的迭代器函数时，对this的引用会发生变化。这就是为什么这些变量是undefined。为了防止这种情况发生，将this的引用存储在另一个变量中，并在迭代器函数中使用它，如下所示

FindNearestPoint.prototype.getActorsDistance = function() {
    var that = this;   // Make `that` refer the current `this`
    _.each(this.actors, function(el, key, list) {
        that.actorsDistance[el] = Math.abs(
            (that.actors[key][0] - that.mainPoint[0]) +
            (that.actors[key][1] - that.mainPoint[1])
        );
    });
    return this.actorsDistance;
};

解决此问题的另一种方法是在调用_.each时设置上下文，就像这样

FindNearestPoint.prototype.getActorsDistance = function() {
    _.each(this.actors, function(el, key, list) {
        this.actorsDistance[el] = Math.abs(
            (this.actors[key][0] - this.mainPoint[0]) +
            (this.actors[key][1] - this.mainPoint[1])
        );
    }, this);            // Setting the current context to `this`
    return this.actorsDistance;
};

Answer 2

这是因为this循环中的each关键字指的是this.actors本身。然而，_.each()的第三个参数是 context 参数，所以只需使用它即可。即：

_.each(this.actors, function(el,key,list){
    this.actorsDistance[_.keys(list)[i]] = Math.abs( 
      ( list[key][0] - this.mainPoint[0] ) + 
      ( list[key][1] - this.mainPoint[1] ) 
    );
    i++
}, this);

Answer 3

_.each(this.actors, function(el,key,list){
//                           ^^^^^^^^^^^

实际上应该足够清楚。不要使用this.actors[key]，而只使用el - 也因为回调函数中的this与外部不同。

this.mainPoint会遇到同样的问题，但无论如何都要将它们缓存在单独的变量中。如果您不想要，可以将this作为回调上下文作为第三个参数传递给_.each，如@thefoureye所示。

您也可以返回一个新对象，而不是改变this.actorsDistance：

FindNearestPoint.prototype.getActorsDistance = function() {
    var mainX = this.mainPoint[0],
        mainY = this.mainPoint[1];
    return _.reduce(this.actors, function(m, el, key){
        m[key] = Math.abs( el[0] - mainX  +  el[1] - mainY );
        return m;
    });
};

如何在每个块的下划线中访问对象属性

3 个答案: