this

this란 무엇인가?

✅ 자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다.

✅ this는 함수가 호출한 방법에 따라 달라진다.

1. A.B 형식일 때 A로 바인딩, B형식일 때 window로 바인딩

const car = {
  name: 'KIA',
  getName: function() {
    console.log("car getName", this) //여기서 this는 car
  }
}

// car.getName(); // car

// const globalCar = car.getName;
// globalCar() // window

const car2 = {
  name:'hyundai',
  getName: car.getName
}

// car2.getName(); //car2

A.B 형식으로 car가 getName을 호출했으므로 this는 Car가 된다.

반면에 globalCar는 A.B형식이 아니다. 이럴 때에는 Window객체가 호출했다고 생각하여 this는 Window객체가 된다.

A.B형식으로 car2가 getName을 호출했으므로 car.getName의 this는 car2가 된다.

var value = 100;
var myObj = {
  value: 1,
  func1: function() {
    console.log(`func1's this.value: ${this.value}`);

    var func2 = function() {
      console.log(`func2's this.value ${this.value}`);
    };
    func2();
  }
};

myObj.func1();
// console> func1's this.value: 1
// console> func2's this.value: 100

func1은 myObj를 통해 호출하고 있다. 그래서 this는 myObj가 된다. 반면 func2는 A.B형식이 아니다. 그래서 전역 객체 window가 바인딩 된다.

2. 생성자 함수를 통해 객체를 생성할 때

✅ new 키워드를 통해서 생성자 함수를 호출할 때는 this는 객체 자신이 된다.

var Person = function(name) {
  console.log(this);
  this.name = name;
};

var foo = new Person("foo"); // Person
console.log(foo.name); // foo

apply, call, bind를 통한 호출

➡️ bind 는 함수가 가리키는 this 만 바꾸고 호출하지 않음. (this 를 고정시킨다)

➡️ call 은 this를 바인딩하고 함수를 호출하고 실행시킨다. (this 를 설정해줄 수 있다)

➡️ apply 는 call과 거의 똑같지만 인자 전달을 배열로 해준다.

const mike = {
  name: "Mike"
}

const tom = {
  name: "Tom"
}

function showThisName() {
  console.log(this.name)
}

function update(birthYear, occupation){
  this.birthYear = birthYear;
  this.occupation = occupation;
}


showThisName() // window객체 undefined

update.call(mike, 1999, "singer")
console.log(mike);

update.call(tom, 2002, "teacher")
console.log(tom);

update.apply(mike, [1999, "singer"])
console.log(mike);

update.apply(tom, [2002, "teacher"])
console.log(tom);

const updateMike = update.bind(mike);

updateMike(1980, "police");
console.log(mike);