[JS] javascript에서 함수 호출 방식과 상관없이 this 를 지정하는 방법

javascript에서 객체 자기자신을 가르키는 키워드가 this이다.

this에 대해서는 이전 포스팅에서 생성자 함수를 얘기하면서 잠시 언급한 적이 있다.

https://devkingdom.tistory.com/308?category=841890 

[JS] javascript 에서 객체 (object) 사용하기 - 객체 리터럴, 생성자

 

프로그래밍을 하다보면 함수를 호출하다 this를 잃어버리는 초보적인 실수를 하곤 한다.

 

오늘은 js에서 함수 호출 방식과 상관없이 this를 지정하는 방법 3가지에 대해 정리할 것이다.

 

call

 

먼저 call 메서드에 대해 알아보자. call은 모든 함수에서 사용이 가능하고 this를 특정값으로 지정할 수가 있다.

 

아래 예시를 보자.

const user1 = {
  name : "kang"
}

const user2 = {
  name : "kim"
}

function callThisName() {
  console.log(this.name);
}

callThisName();
callThisName.call(user1);
callThisName.call(user2);

위와 같이 작성했을때, call 없이 그냥 함수만 호출하면 this가 어떤 객체의 this인지 알지를 못한다.

그런데 아래 두 경우처럼 call로 어떤 객체인지 지정을 해주면, 해당 객체에 대한 name값을 잘 읽어 오게 된다.

 

call 을 이용해서 객체를 update해주는 것도 가능하다.

const user1 = {
  name : "kang"
}

const user2 = {
  name : "kim"
}

function update(age, gender) {
  this.age = age;
  this.gender =gender;
}

update.call(user1, 33, 'M');
update.call(user2, 29, 'F');

console.log(user1);
console.log(user2);

첫 번째 매개변수에는 this로 사용될 값이 들어가고, 두번째 이후 매개변수들은 함수에 들어가는 매개변수를 순서대로 나열해준다. 위 결과에서 보면 정상적으로 추가한 값이 업데이트 된 것을 볼 수 있다.

 

apply

apply는 call과 비슷하나 함수의 매개변수를 처리하는 방법이 약간 다르다.

call은 일반적인 함수 처럼 매개변수를 직접 받는데, apply는 배열의 형태로 매개변수를 받는다.

아래 예제를 보자.

 

const user1 = {
  name : "kang"
}

const user2 = {
  name : "kim"
}

function update(age, gender) {
  this.age = age;
  this.gender =gender;
}

update.apply(user1, [33, 'M']);
update.apply(user2, [29, 'F']);

console.log(user1);
console.log(user2);

call과는 다르게 매개변수가 배열형태로 들어가 있는 것을 확인할 수 있다.

 

bind

 

마지막으로 bind를 살펴보자. bind는 함수의 this값을 영구적으로 바꿀수가 있다.

아래 예시를 보자.

const user = {
  name : "kang"
}

function update(age, gender) {
  this.age = age;
  this.gender =gender;
}

const updateUser = update.bind(user);

updateUser(33, 'M');
console.log(user);

위의 예시를 보면, update라는 함수에 user라는 객체를 영구적으로 바인딩해주면서 updateUser라는 함수가 영구적으로 this가 user가 되도록 해준다.

 

더 정확한 이해를 위해 예제를 하나 더 들어보겠다.

아래 예제를 보자.

const user = {
  name : "kang",
  introduce: function() {
    console.log('my name is ' + this.name);
  }
}

//this를 잃어버림
let func = user.introduce;
func();

let bindFunc = func.bind(user);
bindFunc();

let func = user.introduce;
func();

에서 user.introduce를 func라는 함수에 할당해줬을 때... this가 정상적으로 유지되기를 기대했지만... this 값을 잃어버렸다.

 

이럴때 아래처럼 bind를 이용해주면 this값을 영구적으로 셋팅해줄 수 있다.

let bindFunc = func.bind(user);
bindFunc();

 

 

오늘은 간단하게 this를 지정하는 방법 3가지를 익혀봤다. 상황에 따라서 다 사용되는 녀석들이니 잘 익혀두도록 하자.

끝.