专栏首页终身学习者如何修复Vue中的 “this is undefined” 问题

如何修复Vue中的 “this is undefined” 问题

作者:Michael Thiessen 译者:前端小智 来源:techalyst


当我们使用 Vue 在愉快的开发项目的时候,突然报了一个错误:

this is undefined

别担心,不只有你一个人,我也经常遇到这个问题很多次,接下我们一起来看看如何解决这个问题。

一个可能的原因是混淆了常规函数和箭头函数的用法,如果你遇到这个问题,我猜你用的是箭头函数。如果用常规函数替换箭头函数,它可能会为你修复这个问题。

我们再深入一点,试着理解为什么会这样。

毕竟,知识就是力量,如果知道造成问题的原因,那么我们将来可以避免很多挫败感和时间浪费。

还有一些其它原因可能也会出现此类错误。

  • 使用 fetchaxios 获取数据
  • 使用像 lodashunderscore 这类的库

理解两种主要的函数类型

在 JS 中,我们有两种不同的函数。它们以几乎相同的方式运作,除了它们处理变量的方式不同。

这给新旧Javascript开发人员带来了很多困惑,但是当我们弄懂这个问题时,就很好会有这个困惑。

常规函数

常规函数可以用几种不同的方式定义。

第一种方法在 Vue 组件中较不常见,因为写出来要更长一些:

methods: {
  regularFunction: function() {
    // Do some stuff
  }
}

第二种方法是简写方式,我们也经常使用:

methods: {
  shorthandFunction() {
    // Do some stuff
  }
}

在像这样的常规函数中,this将引用函数的“所有者”。因为我们是在Vue组件上定义它的,所以this指的是Vue组件。

在大多数情况下,我们应该在 Vue 中使用常规函数,特别是在创建时

  • methods
  • computed props
  • watched props

虽然常规函数通常是我们所需要的,但是箭头函数也非常方便。

箭头函数

箭头函数可以更短,更快的编写,因此最近获得了广泛的欢迎。但是,它们在对象上定义方法时并没有太大的不同,就像我们在编写Vue组件时所做的那样。

这是他们在Vue组件上的样子:

methods: {
  arrowFunction: () => {
    // Do some stuff
  }
}

在处理 this 问题时,真正的差异开始发挥作用。

箭头函数采用词法作用域,意味着箭头函数从它的上下文中获取this

如果试图从Vue组件上的箭头函数内部访问 this,将得到一个错误,因为 this 不存在

data() {
  return {
    text: 'This is a message',
  };
},
methods: {
  arrowFunction: () => {
    console.log(this.text);  // ERROR! this is undefined
  }
}

简而言之,尽量避免在Vue组件上使用箭头函数。这将会省去许多头痛和困惑的问题。

有时使用箭头函数是很好的,但这只在不引用this的情况下才有效。

computed: {
  location: () => window.location,
}

现在我们知道两种主要的函数类型,如何正确使用它们?

匿名函数

当我们只需要创建一个函数而不需要从其他任何地方调用它时,匿名函数非常有用。

下面是使用匿名函数的一些场景

  • 使用 axiosfetch 访存数据
  • filtermapreduce等函数方法
  • 在 Vue 方法中的任何地方

来个例子看一下:

// Fetching data
fetch('/getSomeData').then((data) => {
  this.data = data;
});

// Functional methods
const array = [1, 2, 3, 4, 5];
const filtered = array.filter(number => number > 3);
const mapped = array.map(number => number * 2);
const reduced = array.reduce((prev, next) => prev + next);

从示例中可以看到,大多数情况下,当我们创建匿名函数时,使用箭头函数。我们通常使用箭头函数有几个原因

  • 更短、更简洁的语法
  • 改善可读性
  • this 取自父类

在Vue方法中,箭头函数也可以作为匿名函数使用。

等等,我们不是刚发现当我们试图访问 this 时,箭头函数不起作用吗?

这就是区别所在。

当我们在常规函数或简写函数中使用箭头函数时,常规函数将this设置为我们的Vue组件,而箭头函数则不一样。

来个例子:

data() {
  return {
    match: 'This is a message',
  };
},
computed: {
  filteredMessages(messages) {
    console.log(this); // Vue
    
    const filteredMessages = messages.filter(
      // 引用我们的Vue组件
      (message) => message.includes(this.match)
    );
    
    return filteredMessages;
  }
}

filter方法可以访问this.match,因为箭头函数使用的方法与filteredMessages方法使用的上下文相同。 由于此方法是常规函数(而不是箭头函数),因此将其自身的上下文设置为Vue实例。

让我们进一步讨论如何使用axiosfetch来获取数据。

在获取数据时使用正确的函数

如果正在使用fetchaxios获取异步数据,最好使用 PromisePromise喜欢匿名箭头函数,它们也使处理this问题变得容易得多。

如果你正在获取一些数据并想在你的组件上设置它,这是你应该做的正确的方式:

export default {
  data() {
    return {
      dataFromServer: undefined,
    };
  },
  methods: {
    fetchData() {
      fetch('/dataEndpoint')
        .then(data => {
          this.dataFromServer = data;
        })
        .catch(err => console.error(err));
    }
  }
};

请注意,我们如何在 Vue 组件上使用常规函数作为方法,然后在 Promise 内部使用匿名箭头函数

.then(data => {
  this.dataFromServer = data;
})

fetchData()作用域内,我们将this设置为Vue组件,因为它是一个常规函数。由于箭头函数使用外部作用域作为它们自己的作用域,因此箭头函数也将this设置为我们的Vue组件。

这允许我们通过this访问 Vue 组件并更新dataFromServer

但是,如果需要将函数传递帮助库,比如lodashunderscore,该怎么办呢

与 Lodash 或 Underscore 一起使用

假设我们的Vue组件上有一个要使用LodashUnderscore方法。如何防止this is undefine的错误。

如果你用过 React ,你可能见过类似的东西。

这是我们用Vue做的。

created() {
  this.methodToDebounce = _.debounce(this.methodToDebounce, 500);
},
methods: {
  methodToDebounce() {
    // Do some things here
  }
}

就是这样!

我们要做的就是获取函数,将其包装在debounce函数中,然后返回一个内建了debounce的新函数。现在,当我们在Vue组件上调用this.methodToDebounce()时,我们将调用debounced版本。

什么是词法作用域

如前所述,常规函数和箭头函数之间存在差异的主要原因与词法作用域有关。来分析一下它的含义。

首先,作用域是程序中存在变量的任何区域。在Javascript中,window 变量具有全局作用域,它在任何地方都可用。尽管大多数变量被限制在定义它们的函数、它们所属的类或模块中。

其次,单词“词法”仅仅意味着作用域由你如何编写代码决定。某些编程语言只在程序运行时才确定作用域内的内容。这可能会让人很困惑,所以大多数语言都只使用词法作用域。

箭头函数使用词法作用域,而常规函数和简写函数不使用。

这里最棘手的部分是词法作用域如何在函数中影响 this。对于箭头函数,this与外部作用域的this绑定在一起。常规函数的this绑定方式有些奇怪,这就是引入箭头函数的原因,也是为什么大多数人尽可能多地使用箭头函数的原因。

作用域如何在函数中工作

下面是一些示例,它们演示了作用域如何在这两种函数类型之间以不同的方式工作

// 此变量在 window 作用域内
window.value = 'Bound to the window';

const object = {
  // 此变量在 object 作用域内
  value: 'Bound to the object',
  arrowFunction: () => {
    console.log(this.value); // 'Bound to the window'
  },
  regularFunction() {
    console.log(this.value);  // 'Bound to the object'
  }
};

将作用域绑定到函数上

我们可以使用 bind 方法来改变 this 的绑定

const boundFunction = unboundFunction.bind(this);

这使我们在编写Vue组件时具有更大的灵活性,更轻松地重用方法。当然,可读性相对差点,应该尽量避免太频繁地使用它。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文: https://www.techalyst.com/pos...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 什么场景不适合箭头函数

    这些年来,ES6 将 JS 的可用性提升到一个新的水平时: 箭头函数、类等等,这些都很棒。

    前端小智@大迁世界
  • JavaScript重构技巧 — 对象和值

    JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。

    前端小智@大迁世界
  • 编写高质量箭头函数的5个最佳做法

    箭头功能值得流行。 它的语法简洁明了,使用词法绑定绑定 this,它非常适合作为回调。在本文中,通过了解决学习5个最佳实践,以便我们可以从中学习更多箭头函数的知...

    前端小智@大迁世界
  • 前端测试题: 关于箭头函数的描述,错误的是?

    箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。

    舒克
  • ES6的箭头函数的详细介绍

    如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

    Javanx
  • (自制翻译)如何解决在vue中this报错undefined

    当你开心地在编程,惊叹于vue的神奇,这时你却遇到这样的情况: 你的vue应用无法正常工作,你收到的报错是:this is undefined

    杨肆月
  • 论普通函数和箭头函数的区别以及箭头函数的注意事项、不适用场景

    箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程...

    OBKoro1
  • 深入理解JavaScript闭包之什么是闭包

    在看本篇文章之前,可以先看一下之前的文章 深入理解JavaScript 执行上下文 和 深入理解JavaScript作用域,理解执行上下文和作用域对理解闭包有很...

    木子星兮
  • SSH远程登陆好帮手-AutoSSH

    项目地址:https://github.com/FeeiCN/autossh。 简单易用,源码也比较简单,基于expect脚本实现。expect脚本在之前的文章...

    歪脖贰点零
  • Insta360 ONE X发布:5.7K画质高品质防抖,运动全景相机新纪元

    10月10 日,全景相机全球领军品牌 Insta360 宣布,其次世代防抖运动相机ONE X正式发布,同时适配iOS和Android系统,现已在Insta360...

    VRPinea

扫码关注云+社区

领取腾讯云代金券