<template>
<p>my test </p>
</template>
<script>
export default {
name: 'Test',
data () {
return {
}
},
mounted () {
setTimeout(() => {
console.log('箭头函数', this)
}, 500)// 打印结果 vueComponent
setTimeout(function () {
console.log('匿名函数', this)
}, 500)// 打印结果 Window
this.printThis()
},
methods: {
printThis (file) {
console.log('普通函数', this)// 打印结果 vueComponent
}
}
}
</script>
箭头函数和普通函数的this区别如下。
普通函数：调用时被决定。
根据调用我的人（谁调用我，我的this就指向谁），
this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this指向的是window；当函数被作为某个对象的方法调用时，this就等于那个对象
箭头函数：定义时被决定。
根据所在的环境（我在哪个环境中，this就指向谁），Arrow functions bind the parent context。
匿名函数：匿名函数的执行环境是全局性的。
匿名函数中this指向window