javascript - 为什么我得到了 "Uncaught TypeError: Cannot read property ' counter' of undefined"尽管我使用了 SetTimeout 的箭头函数？

Question

以下小倒计时应用程序导致未捕获的类型错误:无法读取未定义的属性“计数器”在评估 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>

未捕获的类型错误:无法读取未定义的属性“计数器”如下:



我不知道为什么 柜台 被评估为 未定义 尽管我使用了箭头函数，这意味着“ 这个指针”的范围必须是词法的。谢谢你的建议!

Answer 1

countdown function 是一个箭头函数，这意味着 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() {