body {
  color: white;
  font-size: 3rem;
  font-family: sans-serif;
  background: linear-gradient(90deg, #cfecd0, #a0cea7, #9ec0db);
}

"use strict";

// === Пример с элементами на странице ===
const p = document.querySelector("p");
function f1() {
  // тут this будет вычисляться при вызове
  console.log(this);
  return (this.style.background = "yellow");
}
// сработает
p.onclick = f1;

const div = document.querySelector("div");
const arrrow = () => {
  // тут this будет равен window
  console.log(this);
  return (this.style.background = "blue");
};
// не сработает!
div.onclick = arrrow;

// === Пример с функциями в строгом  режиме ===
console.log("LOG use strict");
// тут выведет window
console.log(this);
// но...
function ff() {
  console.log(this);
}
// тут выведет undefined ! ! !
ff();

// === Пример для метода bind() ===
console.log("LOG bind()");
function f() {
  return this.a;
}

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

let h = g.bind({ a: "yoo" }); // bind only works once ! ! !
console.log(h()); // azerty

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

// === Пример для вложенных объектов ===

const cpu1 = {
  name: "AMD",
  price: "100$",
  getPrice() {
    console.log(this.price);
  },
  discountInfo: {
    price: ["80$", "70$"],
    getPrice() {
      console.log(this.price);
    }
  }
};

cpu1.getPrice(); // 100$
cpu1.discountInfo.getPrice(); // Array ["80$", "70$"]

// === Пример для вложенных объектов с внешней функцией ===

function getPrice() {
  console.log(this.price);
}

const cpu11 = {
  name: "AMD",
  price: "100$",
  getPrice,
  discountInfo: {
    price: ["80$", "70$"],
    getPrice
  }
};

const cpu22 = {
  name: "Intel",
  price: "300$"
};
cpu22.getPrice = cpu11.getPrice;

cpu11.getPrice(); // 100$
cpu11.discountInfo.getPrice(); // Array ["80$", "70$"]
cpu22.getPrice(); // 300$

const cpu3 = {
  name: "Exynos",
  getName() {
    console.log("cpu3", this);
    function showName() {
      console.log("window", this);
    }

    showName();
  }
};

cpu3.getName();

// === Пример обработчика событий и setTimeout ===
function log() {
  console.log(this);

  setTimeout(function () {
    console.log(this);
  }, 500);

  setTimeout(() => {
    console.log(this);
  }, 1000);
}

const btn = document.querySelector("button");
btn.addEventListener("click", log); // при клике получим - <button>Click</button>, через 500мс - window, через 1с опять <button>Click</button>

btn.addEventListener("mouseover", () => console.log(this)); // при arrow получим внешний this - window

// === Пример arrFn в объектах через литерал и конструктор ===

const object = {
  name: "objectName",
  fnMethod: function () {
    console.log(this);
  },
  arrMethod: () => console.log(this)
};

object.fnMethod(); // object - {name: 'objectName', fnMethod: ƒ, arrMethod: ƒ}
object.arrMethod(); // window

function Test(prop) {
  this.prop = prop;

  this.arrow = () => {
    return this.prop;
  };

  this.func = function () {
    return this.prop;
  };
}

const test = new Test("Text");
console.log(test.arrow());
console.log(test.func());