[TECH-QA] 자바스크립트에서 this와 명시적 바인딩 (call, apply, bind)

console.log(this); // 브라우저에서 실행 시: Window 객체

function sayHello() {
  console.log(this);
}
sayHello(); // Window 객체 (전역 호출)

"use strict";

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

sayThis(); // undefined

const person = {
  name: "Alice",
  greet: function() {
    console.log(this.name);
  }
};

person.greet(); // "Alice" (this는 person 객체를 가리킴)

const person = {
  name: "Hannah",
  sayName: function() {
    console.log(this.name);
  }
};

const func = person.sayName;
func(); // undefined (this는 전역 객체 Window를 가리킴)

const obj = {
  name: "Kate",
  outer: function() {
    console.log(this.name); //Kate
    function inner() {
      console.log(this.name); //undefined (this는 Window)
    }
    inner();
  }
};

obj.outer();
// 출력:
// Outer this: Kate
// Inner this: undefined (this는 Window)

const obj = {
  name: "Kate",
  outer: function() {
    const self = this;
    function inner() {
      console.log(self.name); // Inner this: Kate
    }
    inner();
  }
};

obj.outer(); // Inner this: Kate

const obj = {
  name: "Kate",
  outer: function() {
    const inner = function() {
      console.log(this.name);
    }.bind(this);
    inner();
  }
};

obj.outer(); // Inner this: Kate

function Car(model) {
  this.model = model;
}

const myCar = new Car("Tesla");

console.log(myCar.model); // "Tesla"

function introduce(age) {
  console.log(this.name, age);
}

const user = { name: "Bob" };

introduce.call(user, 25); // "Bob, 25"

function introduce(age) {
  console.log(this.name, age);
}

const user = { name: "Bob" };

introduce.apply(user, [30]); // "Bob 30"

function introduce(age) {
  console.log(this.name, age);
}

const user = { name: "Bob" };

const boundIntroduce = introduce.bind(user);

boundIntroduce(35); // "Bob 35"

const obj = {
  name: "Charlie",
  sayName: function() {
    const arrowFunc = () => console.log(this.name);
    arrowFunc();
  }
};

obj.sayName(); // "Charlie" (this는 obj를 가리킴)

const obj2 = {
  name: "David",
  sayName: function() {
    const self = this;
    const normalFunc = function() {
      console.log(self.name);
    };
    normalFunc();
  }
};

obj2.sayName(); // "David"

document.querySelector("button").addEventListener("click", function() {
  console.log(this); // <button> 요소
});

document.querySelector("button").addEventListener("click", () => {
  console.log(this); // Window 객체 (상위 스코프의 this)
});