当我使用变量进行比较时，JavaScript不足以失败

Question

当我替换从Math.PI到变量this.bottomChainAngleRads的比较右侧时，我有两个似乎不足的块。

上下文：我正在对两个齿轮之间的链进行动画处理，因此在两个齿轮的齿上进行迭代以在旋转时隐藏/显示其链接

在代码的前面，变量是使用数学而不是字符串初始化的。

this.bottomChainAngleRads = Math.PI + 2 * Math.atan2(...);

然后，我想不时地对它做一些事情：

this.step = function() {
  console.log('this.bottomChainAngleRads = ' + this.bottomChainAngleRads  // Just over PI. Usually about 3.4.
              + ' ' + $.isNumeric(this.bottomChainAngleRads));            // Always true.

  // Counting the passing through each if block. Expecting a little in each.
  var frontDisplay = 0, frontHide = 0, rearDisplay = 0, rearHide = 0;

  $(this.frontGear.div).find('.geartooth').each(function(index, el) {
    var totalRadians = measureRotation(el);
    console.log('front totalRadians = ' + totalRadians + ' '    // From 0 to TWO_PI
                + (totalRadians < this.bottomChainAngleRads));  // Always false. WTF.
    if (totalRadians < this.bottomChainAngleRads) { // <================ FAILS. NEVER TRUE.
    // if (totalRadians < Math.PI) { // MOSTLY CORRECT, but expectedly off by minor angle.
      ++frontDisplay;
      // .. do stuff
    } else {
      ++frontHide;
      // .. do other stuff
    }
  });

  $(this.rearGear.div).find('.geartooth').each(function(index, el) {
    var totalRadians = measureRotation(el);
    console.log('rear totalRadians = ' + totalRadians + ' '     // From 0 to TWO_PI
                + (totalRadians < this.bottomChainAngleRads));  // Always false. WTF.
    if (totalRadians < this.bottomChainAngleRads) { // <================ FAILS. NEVER TRUE.
    // if (totalRadians < Math.PI) { // MOSTLY CORRECT, but expectedly off by minor angle.
      ++rearHide;
      // .. do stuff
    } else {
      ++rearDisplay;
      // .. do other stuff
    }
  });

  // Below I expected approximately a 50/50 split on each gear.  Instead, I get...
  console.log('front: ' + frontDisplay + ', ' + frontHide     // Nothing, All.
              + '; rear: ' + rearDisplay + ', ' + rearHide);  // All, Nothing
}

抱歉，冗长的代码，但是因为我觉得我已经尝试了很多事情，所以我想给出一个大图。

Answer 1

each回调内部的上下文不再是您的对象实例， this指向单个DOM元素（ .geartooth ），这些元素显然没有属性bottomChainAngleRads 。

最简单的解决方法是保存正确的上下文引用。 尝试这个：

var self = this;
$(this.rearGear.div).find('.geartooth').each(function(index, el) {
    var totalRadians = measureRotation(el);
    if (totalRadians < self.bottomChainAngleRads) {
    ... 
});