CoreJavaScript_03.this(3)

손병진·2020년 11월 8일
0

CoreJavaScript

목록 보기
7/10

해당 내용은 '코어 자바스크립트' 서적을 참고하여 작성되었으며, 초보 개발자에게 유익한 책을 지필해주신 지은이 정재남 님께 감사의 말씀을 드립니다.

명시적으로 this를 바인딩하는 방법

bind

  • 앞선 포스팅에서 나왔던 call, apply 와 같이 this 값을 지정하는 메서드이다.
  • 차이점이 있다면,
    call, apply 메서드는 해당 함수의 this 값을 지정하고 실행시키는 반면,
    bind 메서드는 해당 함수의 this 값을 지정한 새로운 함수를 반환한다.
function func() {
  console.log(this);
}

func.call({ x: 1 }); // {x:1}
// call, apply 이런 식으로 바로 실행된다

var newFunc = func.bind({ x: 1 });
newFunc(); // {x:1}
// bind 바로 실행되지 않고 새로운 함수를 반환하기 때문에 할당해주어야 한다
  • 또 하나 차이점이 있다면 name 프로퍼티로 확인할 수 있다.
console.log(func.name); // function
console.log(newFunc.name); // bound function
// 이렇게 bind 메서드를 활용하여 생성된 함수에는 bound 라는 접두사가 붙는다
  • bind 마지막 특징은 부분적용함수 라는 것인데, 새로운 함수를 반환할 때 고정 인자를 설정할 수 있다.
function func(a, b) {
  console.log(this);
  console.log(a);
  console.log(b);
}

var newFunc = func.bind({ x: 1 }, 1);
newFunc(); // {x:1} 1 undefined
newFunc(2); // {x:1} 1 2
/* 이렇게 고정된 인자를 설정할 수 있으며 bound 함수에 인자를 넣어 실행하면 
기존에 설정된 인자 뒤에 이어서 붙는다*/

this 정보 상위범주에서 하위범주로 전달

call/apply/bind

  • 앞선 포스팅에서 this 정보를 상속하기 위한 우회법을 살펴보았는데
    위 메서드를 활용하면 훨씬 용이하게 상속시킬 수 있다.
var obj = {
  outer: function () {
    var inner = function () {
      console.log(this);
    };
    inner(); // 전역객체 출력됨
    inner.call(this); // obj 출력됨(상위범주(outer)의 this 값을 전달했기 때문에)
  },
};

obj.outer();

arrow function

  • 화살표 함수는 this 정보를 바인딩하는 과정이 아예 없기 때문에 this 정보에 접근하려하면 스코프체인을 통해 상위 범주의 this 정보를 가져온다.
var obj = {
  outer: function () {
    var inner = () => {
      console.log(this);
    };
    inner(); // obj 정보 출력
  },
};

obj.outer();

콜백함수와 함께 this 정보를 인자로 받는 메서드

  • 배열 메서드 중에 콜백함수를 인자로 받는 메서드가 있는데
    그 중에서 그 콜백함수의 this 값을 지정하는 인자까지 받는 메서드가 있다
    (이런 인자를 통상 thisArg 라고 표현한다)
// forEach 메서드 예시: 두번째 인자가 this 정보
var obj = {
  method: function () {
    [1, 2].forEach(function (a) {
      console.log(a, this);
    }, this); //  상위 범주의 this 를 받음
  },
};

obj.method();
// 1 obj
// 2 obj

이렇게 콜백함수와 함께 thisArg 정보를 인자로 받는 메서드가 있다
forEach map filter some every find findIndex flatMap from

profile
https://castie.tistory.com

0개의 댓글