JavaScript - this(2)

자바스크립트 - this(2)

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

call 메서드

Function.prototype.call(thisArg[,arg1[,arg2,...]]])

• 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령
• 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 함
• call 메서드를 이용하면 임의의 객체를 this로 지정 가능

apply 메서드

Function.prototype.aplly(thisArg[,argsArray])

• call 메서드와 기능적으로 완전히 동일
• 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정

call / apply 메서드의 활용

유사배열객체에 배열 메서드를 적용

• 객체에는 배열 메서드 직접 적용 ❌
• 단, 키가 0 또는 양의 정수인 프로터피가 존재하고 length 프로퍼티의 값이 0 또는 양의 정수인 객체
  • 배열의 구조와 유사한 객체의 경우(유사배열객체) call 또는 apply 메서드 이용해 배열 메서드 차용 가능
• push를 객체 obj에 적용해 프로퍼티 3에 ‘d’ 추가
• call 메서드를 이용해 원본인 유사배열 객체의 얕은 복사 수행
• slice 메서드를 적용해 객체를 배열로 전환
  • 배열메서드이기 때문에 복사본은 배열로 반환

• 문자열의 경우 length 프로퍼티가 읽기 전용이기 때문에 원본 문자열에 변경을 가하는 메서드(push,pop,shift,unshift,splice 등)에는 error를 던짐

• concat처럼 대상이 반드시 배열이어야 하는 경우에는 에러는 나지 않지만, 제대로 된 결과 ❌

• ES6에서는 유사배열객체 또는 순회 가능한 모든 종류의 데이터 타입을 배열로 전환하는 Array.from 메서드 도입

생성자 내부에서 다른 생성자를 호출

• 생성자 내부에 다른 생성자와 공통된 내용이 있을 경우
  • call or apply를 이용해 다른 생성사를 호출하면 간단하게 반복을 줄일 수 있음

여러 인수를 묶어 하나의 배열로 전달하고 싶을 때 - apply 활용

• 여러 개의 인수를 받은 메서드에게 하나의 배열로 인수들을 전달하고 싶을 때 활용

• ES6에서는 spread operator를 이용하면 apply보다 더욱 간편하게 작성 가능

bind 메서드

Function.prototype.bind(thisArg[, arg1[,arg2[, ...]]])

• ES5에 추가된 기능
• call과 비슷하지만 즉시 호출하지 않고, 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드
• 함수에 this를 미리 적용하는 것과 부분 적용 함수를 구현하는 두 가지 목적을 지님

name 프로퍼티

• bind 메서드를 적용해서 새로 만든 함수는 한 가지 독착한 성질이 있음
  • name 프로퍼티에 동사 bind의 수동태인 ‘bound’라는 접두어가 붙는다는 점
• 어떤 함수의 name 프로퍼티가 ‘bound xxx’라면 이는 곧 함수명이 xxx인 원본 함수에 bind 메서드가 적용한 새로운 함수라는 의미
• 기존의 call or apply보다 코드 추적이 수월함

상위 컨텍스트의 this를 내부함수나 콜백 함수에 전달하기

• call or apply or bind 메서드를 이용하여 메서드의 내부함수에서 메서드의 this를 그대로 바라보게 하기 가능

• 기본적으로 콜백 함수 내에서의 this에 관여하는 함수 또는 메서드에 대해서도 bind 메서드를 이용하면 this값을 사용자의 입맛에 맞게 수정 가능

화살표 함수의 예외사항

• ES6에 새롭게 도입된 화살표 함수는 실행 컨텍스트 생성 시, this를 바인딩하는 과정 ❌
• 함수 내부에 this가 아예 없으며, 접근하고자 하면 스코프체인상 가장 가까운 this에 접근

• 별도의 변수로 this를 우회할 필요 ❌
• call/apply/bind 적용할 필요 ❌ , 더욱 간결하고 편리

별도의 인자로 this를 받는 경우(콜백 함수 내에서의 this)

• 콜백 함수를 인자로 받는 메서드 중 일부는 추가로 this로 지정할 객체(thisArg)를 인자로 지정할 수 있는 경우 ⭕️
• 이러한 메서드의 thisArg 값을 지정하면 콜백 함수 내부에서 this 값을 원하는 대로 변경 가능
• 배열 메서드에 많이 포진
• ES6에 새로 등장한 set,map 등의 메서드에도 일부 존재 / 그 중 대표적인 배열 메서드인 forEach

콜백함수와 함께 thisArg를 인자로 받는 메서드

Array.prototype.forEach(callback[,thisArg])
Array.prototype.map(callback[,thisArg])
Array.prototype.filter(callback[,thisArg])
Array.prototype.some(callback[,thisArg])
Array.prototype.every(callback[,thisArg])
Array.prototype.find(callback[,thisArg])
Array.prototype.findIndex(callback[,thisArg])
Array.prototype.flatMap(callback[,thisArg])
Array.prototype.from(arrayLike[,(callback[,thisArg]])
set.prototype.forEach(callback[,thisArg])
Map.prototype.forEach(callback[,thisArg])

참고 : 코어 자바스크립트(Core JavaScript), 정재남

• javascript