Почему я получил сообщение "Uncaught TypeError: Невозможно прочитать свойство 'counter' of undefined", хотя я использую функцию стрелки для SetTimeout?

Question

Следующая небольшая прикладная программа обратного отсчета Uncaught TypeError: Невозможно прочитать свойство 'counter' из неопределенного во время оценки this.counter.

<template>
  <v-app>
    <v-content>
      Redirect after {{counter}} sec.
    </v-content>
  </v-app>
</template>

<script>
/* eslint-disable no-console */
export default {
  name: 'App',

  components: {
  },
  mounted() {
    this.countdown();
  },
  created() {
  },
  methods: {
    countdown: () => {
      setTimeout(() => {
        if (--this.counter <=0){
          location.href=this.$redirectURL;
        } else {
          this.countdown();
        }
      }, 1*1000);
    }
  },

  data: () => ({
    counter: 5,
  }),
};
</script>

Uncaught TypeError: Невозможно прочитать свойство 'counter' из неопределенного следующим образом:

Понятия не имею, почему coutner оценивается как undefined несмотря на то, что я использую функцию стрелки, что означает, что область действия " this pointer" должна быть лексической. Спасибо за ваши предложения!

Answer 1

Функция countdown является функцией стрелки, что означает, что this внутри нее наследуется от внешней области видимости. То же самое верно для обратного вызова setTimeout. Итак, здесь:

export default {
  // ...
  methods: {
    countdown: () => {
      setTimeout(() => {
        if (--this.counter <=0){
          location.href=this.$redirectURL;
        } else {
          this.countdown();
        }
      }, 1*1000);
    }
  },
  // ...
}

this относится к this на верхнем уровне модуля, который в вашей настройке равен undefined.

Вы хотите this вместо этого ссылаться на текущий экземпляр: при вызове countdown он должен захватить новое значение this (экземпляра), а не наследовать this внешней области видимости. Итак, измените:

countdown: () => {

на

countdown() {

или

countdown: function() {