Различная длина массива при использовании ключевого слова this - PullRequest
Новая
       0

Различная длина массива при использовании ключевого слова this

0 голосов
/ 10 декабря 2018

Я начал изучать JavaScript и написал небольшой фрагмент кода.Финальная версия выглядит так: 

var johnCalc = {
  bills: [124, 48, 268, 180, 42],
  tips: [],
  calcTips: function() {
    for (var i = 0; i < this.bills.length; i++) {
      console.log(this.bills.length);
      if (this.bills[i] < 50) tips[i] = 0.2 * this.bills[i];
      else if (this.bills[i] <= 200 && this.bills[i] >= 50) tips[i] = 0.15 * this.bills[i];
      else if (this.bills[i] > 200) tips[i] = 0.1 * this.bills[i];
    }
    console.log(tips);
  }
}

johnCalc.calcTips();

и работает нормально.Но прежде чем написать этот случай, который был правильным, я допустил ошибку при использовании ключевого слова this перед массивом tips , и мой код был таким: 

var johnCalc = {
  bills: [124, 48, 268, 180, 42],
  tips: [],
  calcTips: function() {
    for (var i = 0; i < this.bills.length; i++) {
      console.log(this.bills.length);
      if (this.bills[i] < 50) this.tips[i] = 0.2 * this.bills[i];
      else if (this.bills[i] < 200 && this.bills[i] > 50) this.tips[i] = 0.15 * this.bills[i];
      else if (this.bills[i] > 200) this.tips[i] = 0.1 * this.bills[i];
    }
    console.log(tips);
  }
}

johnCalc.calcTips()

Это было не правильно, но что меня удивляет, в результате я получил напечатанные в консоли элементы массива 3 (в правильной версии это 5).Почему это работает для 3 элементов, несмотря на то, что я без необходимости добавил это ключевое слово перед массивом tips ?Я думал, что это не должно работать вообще.

Я искал объяснение, но не мог найти ответ.Почему в первом случае длина массива tips равна 5, а во втором - 3?Не могли бы вы объяснить, как здесь работает это ключевое слово ?

1 Ответ

0 голосов
/ 11 декабря 2018

Скопируйте и вставьте код для тестирования в консоль.Затем следуйте встроенным комментариям. 

  var tips = ["sandwich"]; // This will be window.tips
  var johnCalc = {
  bills: [124, 48, 268, 180, 42],
  tips: ["pizza"],
  calcTips: function() {
    //tips references the global scope. ie. window.tips
    //tips should show on the console that there is no variable declared.
    //If tips works as "tips" as an array there must be a global tips that is declared.
    //this.tips references johnCalc.tips.
    console.log(window.tips,this.tips);
  }
}

johnCalc.calcTips();

Вывод будет.

Array ["sandwich"] Array ["pizza"]

...