명시적 this 바인딩
자동으로 부여되는 상황별 this의 규칙을 깨고 this에 별도의 값을 저장하는 방법입니다.
크게, **call / apply / bind**에 대해 알아보겠습니다.
- call 메서드
- 호출 주체인 함수를 즉시 실행하는 명령어에요.
- call명령어를 사용하여, 첫 번째 매개변수에 this로 binding할 객체를 넣어주면 명시적으로 binding할 수 있어요. 쉽죠?
- 예시를 통해 확인해봅시다.
var func = function (a, b, c) {
console.log(this, a, b, c);
};
// no binding
func(1, 2, 3); // Window{ ... } 1 2 3
// 명시적 binding
// func 안에 this에는 {x: 1}이 binding돼요
func.call({ x: 1 }, 4, 5, 6}; // { x: 1 } 4 5 6
아래 예시를 통해, 예상되는 this가 있음에도 일부러 바꾸는 연습을 해봅시다!
var obj = {
a: 1,
method: function (x, y) {
console.log(this.a, x, y);
}
};
obj.method(2, 3); // 1 2 3
obj.method.call({ a: 4 }, 5, 6); // 4 5 6
- apply 메서드
- call 메서드와 완전히 동일해요! 다만, this에 binding할 객체는 똑같이 넣어주고 나머지 부분만 배열 형태로 넘겨줍니다.
- 예시
var func = function (a, b, c) {
console.log(this, a, b, c);
};
func.apply({ x: 1 }, [4, 5, 6]); // { x: 1 } 4 5 6
var obj = {
a: 1,
method: function (x, y) {
console.log(this.a, x, y);
}
};
obj.method.apply({ a: 4 }, [5, 6]); // 4 5 6
- call / apply 메서드 활용
- 유사배열객체(array-like-object)에 배열 메서드를 적용
- 물론 this binding을 위해 call, apply method를 사용하기도 하지만 더 유용한 측면도 있습니다.
//객체에는 배열 메서드를 직접 적용할 수 없어요.
//유사배열객체에는 call 또는 apply 메서드를 이용해 배열 메서드를 차용할 수 있어요.
var obj = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
Array.prototype.push.call(obj, 'd');
console.log(obj); // { 0: 'a', 1: 'b', 2: 'c', 3: 'd', length: 4 }
var arr = Array.prototype.slice.call(obj);
console.log(arr); // [ 'a', 'b', 'c', 'd' ]
- Array.from 메서드(ES6)따라서, ES6에서는 **Array.from**이라는 방법을 제시했는데요. 아주 편리해요!
사실, call/apply를 통해 this binding을 하는 것이 아니라 **객체 → 배열**로의 형 변환 만을 위해서도 쓸 수 있지만 원래 의도와는 거리가 먼 방법이라 할 수 있습니다.
// 유사배열
var obj = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
// 객체 -> 배열
var arr = Array.from(obj);
// 찍어보면 배열이 출력됩니다.
console.log(arr);
- 생성자 내부에서 다른 생성자를 호출(공통된 내용의 반복 제거)
Student, Employee 모두 Person입니다. name과 gender 속성 모두 필요하죠. 그러니 Student와 Employee 인스턴스를 만들 때 마다 세 가지 속성을 모두 각 생성자 함수에 넣기 보다는 Person이라는 생성자 함수를 별도로 빼는게 ‘구조화’에 도움이 더 되겠네요 😉
'Javascript' 카테고리의 다른 글
콜백함수 현명하게 사용하기 (0) | 2023.12.18 |
---|---|
call & apply & bind보다 편리한 방법은?_v3.11 (0) | 2023.12.16 |
this 콜백함수 & 생성자 함수_v3.9 (1) | 2023.12.16 |
함수선언문 < 함수표현식_v3.8 (0) | 2023.12.16 |
record & 호이스팅_v3.7 (0) | 2023.12.16 |