모던 자바스크립트 Deep Dive - 22장

박상은·2021년 10월 2일
0

요약

1. this

this의 사용하는 이유는 생성자에 정의한 메서드에서 자신의 객체를 가리킬 방법이 없기 때문이다.
무슨말이냐면 생성자에서 메서드를 정의하는 시점객체를 생성하는 시점을 구분해서 나눠보면 이해가 쉽다.

필연적으로 메서드를 정의하는 시점이 객체를 생성하는 시점보다 먼저오게 된다.
그러면 메서드에서는 자신을 호출한 객체의 값을 알아야하는데 객체가 생성하기전에 정의를 해버리니 알 수 없게되지만, 이를 해결하기위해 this를 사용하게 된다.

즉, 대부분의 this는 메서드를 호출한 객체값을 가지는 식별자다.
물론 항상 객체값을 가지는 식별자는 아니고 함수호출방식에 의해서 동적으로 this값이 바인딩된다.

여기서 짚고 넘어가야할점은 함수의 호출 방식에 의해서 동적으로 결정된다는 것이다.
참고할만한 다른 내용은 함수의 스코프 결정은 함수가 정의된 시점에서 결정된다는 것이다.

  • 전역객체값을 가질 때
    1. 일반 함수에서 this ( strict mode에서는 undefined )
    2.

  • 호출된 인스턴스값을 가질 때
    1. 생성자 함수에서 this
    2. 메서드에서 this

2. this 명시적 변경

  1. Function.prototype.apply(thisArg[, argsArray])
    thisArg로 변경, 호출할 함수에 전달할 인수를 두 번째 매개변수에 배열로 만들어서 넣기 ( 함수호출 )
  2. Function.prototype.call(thisArg[, arg1, arg2, ...])
    thisArg로 변경, 호출할 함수에 전달할 인수를 두 번째 매개변수부터 넣기 ( 함수호출 )
  3. Function.prototype.bind(thisArg)
    this값을 thisArg로 변경한 함수를 리턴
// arguments가 유사배열이라 배열메서드 사용이 불가능해서 배열메서드를 빌려쓰기위한 코드

// apply 배열로 전달
function sum(){
  return Array.prototype.reduce.apply(arguments, [(p, c) => p + c, 0]);
}
console.log(sum(1, 2, 3, 4));	// 10

// call 하나씩 인수로 전달
function sum(){
  return Array.prototype.reduce.call(arguments, (p, c) => p + c, 0);
}
console.log(sum(1, 2, 3, 4));	// 10

// bind 새로운 함수 반환
function sum(){
  return Array.prototype.reduce.bind(arguments, (p, c) => p + c, 0);
}
console.log(sum(1, 2, 3, 4)());	// 10

1개의 댓글

comment-user-thumbnail
2021년 10월 5일

안녕하세요. 위키북스입니다.
저작권자의 허락을 받지않고 글을 무단으로 게재할 경우 저작권법 위반으로 고발될 수 있습니다. 도서와 관련된 글을 삭제하거나 비공개 조치 진행해주시기 바랍니다.

답글 달기