this

const test = {
  prop: 42,
  func: function () {
    return this.prop;
  },
};

console.log(test.func());
// Expected output: 42

//  ,  window    global:
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b); // "MDN"
console.log(b); // "MDN"

function f1() {
  return this;
}

//  :
f1() === window; // window -    

//  Node:
f1() === global; // global -    Node

function f2() {
  "use strict"; // . strict mode
  return this;
}

f2() === undefined; // true

//      call  apply    ,
//     this.
var obj = { a: "Custom" };

//     
var a = "Global";

function whatsThis() {
  return this.a; // this     
}

whatsThis(); // 'Global'
whatsThis.call(obj); // 'Custom'
whatsThis.apply(obj); // 'Custom'

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = { a: 1, b: 3 };

//   -      
// 'this',    
//   call
add.call(o, 5, 7); // 16

//   -      
// 'this',  - ,   
//     call
add.apply(o, [10, 20]); // 34

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7); // [object Number]
bar.call("foo"); // [object String]

function f() {
  return this.a;
}

const g = f.bind({ a: "qwerty" });
console.log(g()); // qwerty

const h = g.bind({ a: "yoo" }); // bind    !
console.log(h()); // qwerty

const o = { a: 37, f, g, h };
console.log(o.a, o.f(), o.g(), o.h()); // 37 37 qwerty qwerty

const obj = {
  getThisGetter() {
    const getter = () => this;
    return getter;
  },
};

const fn = obj.getThisGetter();
console.log(fn() === obj); // true

const fn2 = obj.getThisGetter;
console.log(fn2()() === globalThis); // true   

var o = {
  prop: 37,
  f: function () {
    return this.prop;
  },
};

console.log(o.f()); // logs 37

var o = { prop: 37 };

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37

o.b = { g: independent, prop: 42 };
console.log(o.b.g()); // logs 42

var o = {
  f: function () {
    return this.a + this.b;
  },
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

function modulus() {
  return Math.sqrt(this.re * this.re + this.im * this.im);
}

var o = {
  re: 1,
  im: -1,
  get phase() {
    return Math.atan2(this.im, this.re);
  },
};

Object.defineProperty(o, "modulus", {
  get: modulus,
  enumerable: true,
  configurable: true,
});

console.log(o.phase, o.modulus); // logs -0.78 1.4142

/*
 *    :
 *
 * function MyConstructor(){
 *   //  ,   .
 *   //    |this| 
 *   // ,   ; ,
 *   this.fum = "nom";
 *   //  ..
 *
 *   //    ,
 *   //  ,   
 *   //   |new|.   ,
 *   //   - ,
 *   //      |this|
 *   // (..    ).
 * }
 */

function C() {
  this.a = 37;
}

var o = new C();
console.log(o.a); // logs 37

function C2() {
  this.a = 37;
  return { a: 38 };
}

o = new C2();
console.log(o.a); // logs 38

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = { a: 1, b: 3 };

//   -  ,    
// 'this',   
//     
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

//   - ,    
// 'this',   - ,
//        
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7); // [object Number]

//    ,    
function bluify(e) {
  //  true
  console.log(this === e.currentTarget);
  // true,  currentTarget  target  
  console.log(this === e.target);
  this.style.backgroundColor = "#A5D9F3";
}

//      
var elements = document.getElementsByTagName("*");

//  bluify   ,  
//      
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("click", bluify, false);
}

<button > this</button>

<button >
    this
</button>