????? ??? ?? ???? ?? #5???. ?? ??? ??? ???? ?? ??? ???? ????? ??? ???? ?? ??? ???.

---

this ???? ?? ??? ????? ?? ????? ?????.

??? ?? ????? ????? ?????(??? ??), ??? ?? ??? ????. ? ?? ??? ????? ?? ???.

?? ??? ?? ????? ?? ??? ?? ? ?? ??? ????? ?????.

?? ?????? ???

new ???? ??? ???? ?? ??? this? ?? ??? ?? ????? ?????.

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

????? ???

call(), apply() ?? ???()? ???? ?? ??? this? ?? ????? ??? ? ????.

• call()? apply()? ??? ?? ???? ? ? ?????.
• ???()? ??? ??? ? ??? ?????.

const obj = { name: 'Ben' };

function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

const sayHelloToBen = sayHello.bind(obj);

sayHelloToBen(); // Hello, Ben!
sayHello.call(obj); // Hello, Ben!
sayHello.apply(obj); // Hello, Ben!

??? ????? ???

??? ??? ???? ?? ?? ??? ?????.

const person = {
  name: 'Ben',
  logThis: function() {
    console.log(this);
  }
}

person.logThis(); // { name: 'Ben', logThis: fn() }

?? ?? ????? ???(?? ?? ??)

?? ?????? ??? ???? ?? ?? ??(??? ??) ?? ???? ??(?? ??)? ?????.

????? ?? ?? ??? ????.

// Browser

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

showThis(); // Window { open: fn, alert: fn, ... }

?? ?????? ??? ???? ?? ??? ? ??? ??? ???. window.showThis()? ???? ??? ??? ????. ??? ??? ??? ??? ?????. (?? ??? ?????)

?? ??? ???? ?? ?? ??? ?? ??? ?????.

const obj1 = {
    value: 1,
    showThis: function() {
        console.log(this);
    },
};

const obj2 = { value: 2 };

obj1.showThis.call(obj2); // { value: 2 }

? ???? ??? ??? ??? ?????? ? ?? ??? ?????. ??? ???? ????? ???? ? ?? ???? ???.

??? ??

??? ??? ?? this ?? ???? ??? ??? ??? ??? ????. ?? ???? ? ?? ?????.

const person = {
  name: 'Ben',
  showThis: () => {
    console.log(this);
  },
  showThisWrapped: function() {
    const arrowFn = () => console.log(this);
    arrowFn();
  }
}

person.showThis(); // Window { open: fn, alert: fn, ... }
person.showThisWrapped(); // { name: 'Ben', showThis: fn, showThisWrapped: fn }

??? ??? ???? ??? ??? ???? ??? ?? ?????. ??? ???? HTML ??? this ?? ?????? ???? ??? ??? ???? ??????.

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

---

??

1. ?? ???(new Person())?? ?? ?? ??? ?? ????? ???.
2. bind(), call() ?? apply()? ???? ????? ???? ?? ?? ???? ??? ??? ?????.
3. ??? ????? ?? ???? ??? ??? ?????.
4. ?? ?? ?? ??? ?? ?? ??(??? ??) ?? ???? ??(?? ??)? ?????.
5. ?? ??? ???? ?? ?? ??? ??(1-4)? ?????.
6. ??? ???? ?? this? ????. ?? ?? ?? ???? ?????.

---

?? ?? ??? ??? ????? ????? ?? ??? ??? ??? ??? ??

? ??? JavaScript? `this` ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!