this

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

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

this

function getThis() {
  return this;
}

const obj1 = { name: "obj1" };
const obj2 = { name: "obj2" };

obj1.getThis = getThis;
obj2.getThis = getThis;

console.log(obj1.getThis()); // { name: 'obj1', getThis: [Function: getThis] }
console.log(obj2.getThis()); // { name: 'obj2', getThis: [Function: getThis] }

const obj3 = {
  __proto__: obj1,
  name: "obj3",
};

console.log(obj3.getThis()); // { name: 'obj3' }

const obj4 = {
  name: "obj4",
  getThis() {
    return this;
  },
};

const obj5 = { name: "obj5" };

obj5.getThis = obj4.getThis;
console.log(obj5.getThis()); // { name: 'obj5', getThis: [Function: getThis] }

function getThisStrict() {
  "use strict"; // 
  return this;
}

// 
Number.prototype.getThisStrict = getThisStrict;
console.log(typeof (1).getThisStrict()); // "number"

console.log(typeof getThisStrict()); // "undefined"

function getThis() {
  return this;
}

// 
Number.prototype.getThis = getThis;
console.log(typeof (1).getThis()); // "object"
console.log(getThis() === globalThis); // true

function logThis() {
  "use strict";
  console.log(this);
}

[1, 2, 3].forEach(logThis); // undefined, undefined, undefined

[1, 2, 3].forEach(logThis, { name: "obj" });
// { name: 'obj' }, { name: 'obj' }, { name: 'obj' }

const globalObject = this;
const foo = () => this;
console.log(foo() === globalObject); // true

const obj = { name: "obj" };

// call  this 
console.log(foo.call(obj) === globalObject); // true

// bind  this 
const boundFoo = foo.bind(obj);
console.log(boundFoo() === globalObject); // true

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

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

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

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

class C {
  instanceField = this;
  static staticField = this;
}

const c = new C();
console.log(c.instanceField === c); // true
console.log(C.staticField === C); // true

this = new Base();

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return { a: 5 };
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

//  window 
console.log(this === window); // true

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

function test() {
  //  eval
  console.log(eval("this") === this);
  //  eval 
  console.log(eval?.("this") === globalThis);
  //  eval 
  console.log(eval?.("'use strict'; this") === globalThis);
}

test.call({ name: "obj" }); // Logs 3 "true"

const obj = {
  a: this,
};

console.log(obj.a === window); // true

//  'call'  'apply' 'this' 
const obj = { a: "Custom" };

// var 'globalThis' 
var a = "Global";

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

whatsThis(); // 'Global'  'this' 'globalThis'
obj.whatsThis = whatsThis;
obj.whatsThis(); // 'Custom' 'this'  obj 

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

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

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

//  'this' 
//  2 
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]
bar.call(undefined); // [object Window]

function f() {
  return this.a;
}

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

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

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

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

function sum() {
  return this.a + this.b + this.c;
}

const o = {
  a: 1,
  b: 2,
  c: 3,
  get average() {
    return (this.a + this.b + this.c) / 3;
  },
};

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

console.log(o.average, o.sum); // 2 6

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

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

//  bluify 
// 
for (const element of elements) {
  element.addEventListener("click", bluify);
}

<button >Show this</button>

<button >
  Show inner this
</button>

class Car {
  constructor() {
    //  sayHi  sayBye 
    this.sayBye = this.sayBye.bind(this);
  }

  sayHi() {
    console.log(`Hello from ${this.name}`);
  }

  sayBye() {
    console.log(`Bye from ${this.name}`);
  }

  get name() {
    return "Ferrari";
  }
}

class Bird {
  get name() {
    return "Tweety";
  }
}

const car = new Car();
const bird = new Bird();

//  'this' 
car.sayHi(); // Hello from Ferrari
bird.sayHi = car.sayHi;
bird.sayHi(); // Hello from Tweety

// 'this' 
bird.sayBye = car.sayBye;
bird.sayBye(); // Bye from Ferrari

const obj = {
  foo() {
    return this;
  },
};

with (obj) {
  console.log(foo() === obj); // true
}