Alright, there are 3 cases that I want to talk about. I know that arrow functions have lexical scoping and this will propagate outwards until a match is found. However here are some cases where the behaviours are not making sense to me, so some explanation would be great.
1. Inside a Single File Component's methods
// HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="nonArrow">click me</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
nonArrow() {
console.log(this);
},
arrow: () => {
console.log(this);
}
}
}
</script>
nonArrow() displays VueComponent instance as usual. arrow() displays undefined but shouldn't it display window ?
2. Inside Vue component from script tag.
new Vue({
el: '#app',
data: {
},
methods: {
noArrow() {
console.log(this);
},
arrow: () => {
console.log(this);
}
})
noArrow() gives a Vue instance, but arrow() gives the window object. Why is window not being referenced in the previous example?
3. Using strict mode
methods: {
noArrow() {
console.log(this);
},
arrow: () => {
"use strict";
console.log(this);
}
}
In the 2nd example, if I use strict mode with the arrow function inside the methods, it still outputs window object, whereas a normal arrow function defined outside with strict mode will console log undefined. What is going on here?
