本文转载于：http://www.fly63.com/article/detial/5834（若有侵权，请作者联系本人删除）
本文仅用于学习记录使用
当你开心地在编程，惊叹于vue的神奇，这时你却遇到这样的情况：
你的vue应用无法正常工作，你收到的报错是：this is undefined
产生问题的原因是你混合使用了普通函数和箭头函数。我猜你肯定用了一个箭头函数。如果你把这个箭头函数替换成普通函数，也许能解决上面你遇到的问题。
接下来让我们深入原理来了解为什么会产生这个问题。
毕竟，知识是强大的，如果你知道了问题的原因，你将能够避免更多问题并节省时间。
还有一些其他场景下会让你遇到this is undefined的报错：
当你使用fetch或axios请求数据时
当你使用lodash库或underscore库时
我接下来也会提到这些场景并告诉你如何解决
理解两种类型的函数
在Javascript里我们可以使用两种不同的函数。它们运行方式几乎是一样的，除了它们处理变量this的方法有所不同。
普通函数
一个普通函数有许多定义方式
第一种方式在vue组件中不太常见，因为写起来股票于冗长：
methods: {
regularFunction: function() {
// Do some stuff
}
}
第二种方式的写法简短且通用
methods: {
shorthandFunction() {
// Do some stuff
}
}
在一个普通函数中，this归属于函数的“拥有者”。由于我们是在vue组件里定义的，那么this归属于vue组件。接下来我将解释this的作用域。
大多数情况下你在vue里最好使用普通函数，特别是当你构建：
methods
computed props
watched props
普通函数通常是你所需要的，而箭头函数用起来更便利。
箭头函数
箭头函数书写起来更简略更快捷，并能为我们获得更多人气。但是它变得不那么好了当我们在一个对象里定义方法时，比如当我们编写vue组件时。
以下是箭头函数在vue组件里的写法：
methods: {
arrowFunction: () => {
// Do some stuff
}
}
普通函数和箭头函数真正的差异产生于它们处理this的方式。
在一个箭头函数里，this并不归属于函数的拥有者。
箭头函数的作用域被称为词法作用域(或静态作用域lexical scoping)。我们将深究其中的原理，但首先我们要明白在箭头函数中，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,
}
既然我们了解了函数的两种主要类型，那么我们该如何在正确的场景下使用它们呢？
匿名函数
当你仅仅是想快速构建一个函数且并不需要调用它时，使用匿名函数是非常适合的。这类函数之所以被称为匿名函数，是因为它们不需要赋予函数名和参数值。
以下场景适合使用匿名函数：
使用fetch或axios请求数据
使用函数型方法，比如filter、map、reduce
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的methods里使用匿名函数，箭头函数也能发挥强大的作用。
桥豆麻袋，难道我们已经搞清箭头函数在引用this没起作用的原因了？
emmmm下面才切入重点。
当我们在普通函数里使用箭头函数时，普通函数会设置this作为我们的vue组件，这样箭头函数就能正常使用this了
看下面这个例子：
data() {
return {
match: 'This is a message',
};
},
computed: {
filteredMessages(messages) {
console.log(this); // Our Vue component
const filteredMessages = messages.filter(
// References our Vue Component
(message) => message.includes(this.match)
);
return filteredMessages;
}
}
filter之所以能正常引用this.match，是因为箭头函数和mehod里的filteredMessages使用了同一上下文。正因为这个method使用的是普通函数(而不是箭头函数)，它在vue里创建了自己的上下文。
接下来继续拓展当你使用axios或fetch请求数据时该怎么解决箭头函数的问题。
使用正确的函数来请求数据
当你使用fetch或axios来异步请求数据时，你肯定也会用到promise。Promises非常喜欢使用匿名箭头函数，并且也让this的使用更加简单。
如果你要在你的组件里请求数据，你一般会这么做：
export default {
data() {
return {
dataFromServer: undefined,
};
},
methods: {
fetchData() {
fetch('/dataEndpoint')
.then(data => {
this.dataFromServer = data;
})
.catch(err => console.error(err));
}
}
};
可以看到我们再vue组件的methods里先是使用了普通函数，然后在promise里使用了匿名箭头函数
.then(data => {
this.dataFromServer = data;
})
在普通函数fetchData()的作用域里，this被设置成vue组件。由于箭头函数使用的是父级作用域作为自己的作用域，所以箭头函数也把this当做是vue组件了。
这样就允许我们通过this去引用vue组件并更新dataFromServer
使用Lodash库或Underscore库
（没用过这两个库，不翻译了）
什么是lexical scoping（静态作用域）
正如我们之前提到的，普通函数和箭头函数存在这样一个差异：静态作用域。
首先，作用域出现在变量存在的地方。在Javascript中，window变量有全局作用域——在任何地方都可以被调用。大多数变量只在被定义的函数里、class类中、模块里会生效。
其次，“静态”这个词意味着代码块里的作用域。一些程序语言仅仅是在运行程序时才定义作用域。这将导致很多问题，所以大部分语言使用的是静态作用域。
箭头函数使用静态作用域，但普通函数并不是。
静态作用域的奇妙之处在于它在函数中对this的影响。对于箭头函数，this引用的是外层作用域的this。而普通函数引用this就很奇怪，这也是为什么箭头函数被更多人推荐使用。
在函数中作用域是如何工作的
// This variable is in the window's scope
window.value = 'Bound to the window';
const object = {
// This variable is in the object's scope
value: 'Bound to the object',
arrowFunction: () => {
// The arrow function uses the window's scope for `this`
console.log(this.value); // 'Bound to the window'
},
regularFunction() {
// The regular function uses the object's scope for `this`
console.log(this.value); // 'Bound to the object'
}
};
现在你知道作用域在函数里如何工作了吧。
但也有办法通过重写改变这种行为。
绑定另一个函数的作用域
const boundFunction = unboundFunction.bind(this);