How this works in VueJS

vue-this-examples.js

// In Browser - Window Object
// In Node - {}
console.log(this)

// In Browser - Window Object
// In Node - Node Object
function globalScoped() {
    console.log(this)
}
globalScoped()

// In Browser - Object { name: "kiro", tagLine: "js" }
// In Node - Object { name: "kiro", tagLine: "js" }
function testInstance(name, tagLine) {
    this.name = name;
    this.tagLine = tagLine;
}
new testInstance('kiro', 'js')

// Error. Should call super
class myClass extends myExantable {
    constructor() {
        this.name = 'Kiro';
        this.tagLine = 'js';
    }
}
new myClass();

// In Browser - The Button Element
<button onclick="alert(this)">
    click
</button>

// In Browser - The Button
<button id="test-btn">
    click
</button>
<script>
    const btn = document.getElementById('test-btn');

    function showTest() {
        console.log(this);
    }

    btn.addEventListener('click', showTest);
</script>

// In Browser - 'What'?
// In Node - 'What'?
// this is (colin const)
function ask() {
    return this.question
}

const colin = {
    question: 'What?',
    ask
}

console.log(colin.ask())

// In Browser - 'What'?
// In Node - 'What'?
// this is (colin const)
function ask() {
    return this.question
}

const colin = {
    question: 'What?'
}

console.log(ask.call(colin))