four Steps to master this

WhatThisIs.js

// 0.IS `addEventLister()` and `click` ... <EVENT> used?
// //   => `this` === who triggered the <EVENT>
// 1.Is it an arrow function ?
// //   => `this` in arrow function === `this` around(arrow function) the closest valid line 
// 2.Is it `bind` `call` `apply`
// //   => `this` === `this` inside those [key words method]
// 3.Is it called with prefix `.`
// //   => `this` === who is in fornt of `.`
// //   => no `.` added => `this` === window
const $ = console.log;
const printThis = {
  
  // demonstration of 1
  test1() {
    const arrow = () => $(this);
    arrow();
  },
  
  // demonstration of 2
  test2() {
    $(this)
  },
  
  // demonstration of 3
  test3() {
    $(this)
  }
}


printThis.test1()// `this` === `this`(of test1 function) === Object(PrintThis)
printThis.test2.call(window)//`this` === window
printThis.test3()// `this` === Object(PrintThis)