[JS인터뷰준비]자바스크립트 this(2)

Bonggus·2021년 10월 31일

JavaScript this

자바스크립트

목록 보기

23/23

1. this

함수를 호출하는 객체를 의미한다.

2. 존재이유

this를 이용해 함수를 다른 객체에서도 재사용 가능하다

function menuGlobal() {
  console.log("오늘 저녁", this.name);
};

const myDinner = {
  name: '김치찌개',
  menu: menuGlobal,
}
myDinner.menu(); // 오늘 저녁 김치찌개: 호출한 객체에 바인딩

const yourDinner = {
  name: '된장찌개',
  menu: menuGlobal,
};

yourDinner.menu(); // 오늘 저녁 된장찌개

3. this 제어

일반적으로 this의 값은 자동으로 할당된다. 하지만 상황에따라 제어 가능하다.

3.1 call()

call 메서드는 this의 값을 바꿀수도, 함수를 실행할 때 사용할 인수도 전달가능하댜.

call(바인딩될 객체, 파라미터)

function menuGlobal(item) {
  console.log('오늘 저녁은' + item + this.name);
}

const myDinner = {
  name: '김치찌개',
};

menuGlobal.call(myDinner, '묵은지'); // 오늘 저녁은묵은지김치찌개

const yourDinner = {
  name: '된장찌개',
};

menuGlobal.call(yourDinner, '차돌') // 오늘 저녁은차돌된장찌개

3.2 apply()

함수를 실행할 때 인수를 배열로 묶어 한번에 전달한다.

function menuGlobal(item1, item2) {
  [item1, item2].forEach(e => {
    console.log('오늘 저녁은' + e + this.name);
  }, this);
}

const myDinner = {
  name: '김치찌개',
};

menuGlobal.apply(myDinner, ['묵은지', '참치']);
// 오늘 저녁은묵은지김치찌개
// 오늘 저녁은참치김치찌개

const yourDinner = {
  name: '된장찌개',
};

menuGlobal.apply(yourDinner, ['차돌', '삼겹살']);
// 오늘 저녁은차돌된장찌개
// 오늘 저녁은삼겹살된장찌개

3.3 call vs apply

call은 전달할 인자는 하나하나 전달해야한다. apply는 배열로 묶어 한번에 전달하다. 인수를 배열로 보내는 차이점 뺴고는 call, apply는 동일한 기능을 수행한다.

3.4 bind()

es5에서 추가된 기능이다. this 값을 어디서 사용하든 호출 객체가 바뀌지 않게 고정시킨다.

function menuGlobal(item) {
    console.log('오늘 저녁은 ' + item + this.name);
}

const myDinner = {
  name: '김치찌개',
};

const yourDinner = {
  name: '된장찌개',
};

const menuGlobalForMe = menuGlobal.bind(myDinner);
menuGlobalForMe('묵은지') // 오늘 저녁은 묵은지김치찌개

const menuGlobalForYou = menuGlobal.bind(yourDinner);
menuGlobalForMe('차돌') // 오늘 저녁은 차돌된장찌개

myDinner.menuMine = menuGlobalForYou;
myDinner.menuMine('묵은지') // 오늘 저녁은 묵은지된장찌개

다른 객체에서 사용되던 함수도, 그 함수가 바라보는 객체를 고정시켜 줄 수 수 있다.

3.5 array function

array function의 this는 일반적인 this처럼 함수를 호출한 객체를 할당하지 않고, 바로 상위 스코프의 this를 할당한다.

function menuGlobal(item1, item2) {
  console.log(this); // { name: '김치찌개' };
  [item1, item2].forEach(function(e) {
	console.log(this); // window
    console.log('오늘 저녁은' + e + this.name);
  });
}

const myDinner = {
  name: '김치찌개',
};

menuGlobal.apply(myDinner, ['묵은지', '참치']);


//vs
function menuGlobal(item1, item2) {
  console.log(this); //  { name: '김치찌개' };

  [item1, item2].forEach(e => {
	console.log(this);
    console.log('오늘 저녁은' + e + this.name);
  });
}

const myDinner = {
  name: '김치찌개',
};

menuGlobal.apply(myDinner, ['묵은지', '참치']);
// 오늘 저녁은묵은지김치찌개
// 오늘 저녁은참치김치찌개