This 2
코어 자바스크립트(정재남 저) 책을 기본으로 하여 자바스크립트를 공부하면서 내용을 정리하고자 한다.
03 This
🔗 명시적 this 바인딩 (Explicit Binding)
this 는 위에서처럼 상황별로 그 대상이 달라진다. 그러나 별도의 대상을 지정해서 사용할 수도 있다.
이걸 명시적 this 바인딩이라고 한다. this 의 역할을 직접 지정해준다고 보면 된다.
🤾♀️ 다음 3가지 방법이 있다.
🥏 call 메서드
🥏 apply 메서드
🥏 bind 메서드
🪡 call 메서드
👉🏼 For Example
methodCall 함수를 실행하면 this는 전역 객체가 그 대상이지만, call 메서드를 붙이면 지정한 객체가 this 의 대상이 된다.
👉🏼 For Example 2
func 메서드를 실행하면 this는 methodCall 객체가 그 대상이지만, 마찬가지로 call 메서드를 붙이면 지정한 객체가 this 의 대상이 된다.
🪡 apply 메서드
apply 메서드는 call 메서드와 작동 원리는 동일하다. 다른 점은 두번째 인수로 배열을 받는다는 점이다.
👉🏼 For Example
👉🏼 For Example 2
🏂 call / apply 메서드의 활용
🪃 유사배열객체에 배열 메서드를 붙이고 싶을 때
👉🏼 For Example
배열은 객체이지만, 인덱스와 length를 가진다.
유사배열객체는 배열처럼 인덱스와 length 프로퍼티를 가진 객체로 배열과 동일한 접근이 가능하다.
그러나, 배열의 메소드를 유사배열객체에서는 사용할 수 없다. 원칙적으로 배열이 아니기 때문이다.
배열메소드인 push는 유사배열객체인 obj에 적용되지 않음을 알 수 있다.
🔦 call / apply 메소드는 이러한 유사배열객체에 배열과 동일하게 배열메소드를 적용하고 싶을때 사용이 가능하다.
위의 예시처럼, call 메소드를 사용하여 유사배열객체에 배열 메소드인 push 메소드를 사용할 수 있다.
유사배열객체인 obj에 새로운 인수 ‘Voldemort’가 들어간 것을 볼 수 있다.
참고로 배열메소드 slice를 사용하면 유사배열객체를 배열로 만들 수 있다.
🪢 POINT 🪢
그럼, 유사배열객체는 어떤 것들이 있는가?
자바스크립트에서 사용되는 대표적인 유사배열객체는 함수의 arguments 객체, HTMLCollection, NodeList 등이 있다.
👉🏼 For Example
유사배열객체인 arguments 객체에 apply 메소드를 사용하여 배열메소드 push를 사용할 수 있다.
또 다른 유사배열객체 NodeList 역시 마찬가지다.
👉🏼 For Example 2
🔖 Additional
ES6에서는 유사배열객체를 배열로 바꿔주는 메소드가 생겨났다.
⛳️ Array.from()
🪃 생성자 함수 내부에서 사용
👉🏼 For Example
생성자 함수 내부에 다른 생성자와 중복되는 내용이 있을 경우, call / apply를 사용하면 간결한 코드 처리가 가능하다.
🪡 bind 메서드
bind 메서드는 call / apply 메서드와 비슷하지만 다른 점이 있다. 바로 호출되지 않는다는 점이다. this 로 지정한 대상 및 옵션값으로 고정된 인수를 받으면 그것들을 고정시킨 새로운 함수를 반환만 한다.
call / apply 메서드와 같이 바로 값을 반환하지 않기 때문에 반환된 함수를 호출해야만 값을 반환한다.
1. bind 메서드 기본 적용
위의 코드를 보면 좀 더 이해가 된다.
func.bind(context)에서 context는 this로 지정할 대상이다. 위의 코드처럼 bind 메서드로 this를 바인딩하면 boundFunc 변수에는 값이 저장되는 것이 아니라 고정된 this의 값을 가지고 있는 함수가 반환된다.
즉, boundFunc는 새로운 함수가 된다.
👉🏼 For Example
func.bind(user)에서 user 객체를 바인딩하였다. 그러나 위의 코드처럼 funcUser는 값이 아닌 함수이기에 funcUser 함수를 실행해야 바인딩된 this 의 대상인 user의 firstName인 Harry가 반환된다.
👉🏼 For Example 2
bind 메서드를 사용하면 객체를 따로 명시하지 않아도 객체 메서드 실행이 가능하다.
2. bind 메서드 부분 적용
bind 메서드는 this의 대상만 고정하는 것이 아니라 함수의 인수도 고정할 수 있다.
👉🏼 For Example
greeting 함수는 인수 a와 b를 받는 함수이다.
bind 메서드로 새로 만든 changeGreeting 함수는 this의 대상이 전역객체이고
greeting 함수의 a 인수가 “Hello”로 고정된 함수이다.
result1은 greeting 함수의 a 인수, b 인수로 각각 `Hi`, `Everyone`을 받아 결과값으로 반환되었다.
result2는 changeGreeting 함수의 a 인수는 고정이므로, b 인수인 `Harry` 를 받아 결과값을 반환하였다.
result3은 역시 changeGreeting 함수의 b 인수로 `Harry`를 받았고, 추가로 다른 값을 전달받았으나,
해당 값은 함수에 지정된 인수가 아님으로 무시된다.
👉🏻 Next Page
