전체적용 [ 강제로, 함수에서, this(context) 를 고정시켜주는 bind()]
func.bind(context)는 함수처럼 호출 가능한 '특수 객체(exotic object)'를 반환합니다.
이 객체를 호출하면 "this가 context로 고정된 함수 func가 반환"됩니다.
따라서 boundFunc를 호출하면 "this가 고정된 func를 호출하는 것과 동일한 효과"를 봅니다.
아래 funcUser에는 "this가 user로 고정된 func"이 할당됩니다.
let user = {
firstName: "John"
};
function func() {
alert(this.firstName);
}
let funcUser = func.bind(user);
funcUser(); // John
** "변수 funcUser 로 묶지 않고", func.bind(user) 으로 "직접사용" 해도 상관없다.
부분적용 [ this(context)는 아무거나(null), 첫번째로 수신한 아규먼트(인수)는 X 로 설정하는, 부분적용 "func.bind(null, X)"]
==> 부분적용이란,
func.bind(context , arg1, arg2...) 라 할때,
"전체적용"처럼 bind의 첫번째 값(context)은, 적용할 함수의 "this" 를 고정시켜주는 역할을 하고
bind의 두번째 이후 값(arg1, arg2 ...) 은, "적용할 함수의 파라미터에 들어갈 아규먼트"를 "고정"시켜 주는 역할을 한다.
function mul(a, b) {
return a * b;
}
let double = mul.bind(null, 2);
alert( double(3) ); // = mul(2, 3) = 6
alert( double(4) ); // = mul(2, 4) = 8
alert( double(5) ); // = mul(2, 5) = 10
==> 위의 함수 mul에는 파라미터가 두개 있다.
위의 함수 mul은, "객체안의 함수"(메서드) 가 아니므로, this 라 해도 받을 것이 없다.
그러므로, "this 고정은 제외하고, 첫번째 파라미터 안에 들어갈 인수(아규먼트)" 만을 "고정" 시켜주기 위해,
[ func.bind(null, 3) ]
을 사용한다면," this는 상관 없으니 null", "첫번째 아규먼트를 3으로 고정시킨 함수가 재탄생"하는것이다.
** "변수 double 로 묶지 않고", mul.bind(null,2) "직접 사용"해도된다.
** bind 를 사용할때는 "context는 항상 넘겨주어야 하니",
"아규먼트를 고정시키면서, 메서드(객체 안의 함수)가 아니라면"
항상 "bind의 첫번째 값은 null" 로 적용시키고, "두번째 값을 사용하도록"하자
부분적용의 활용 [ "하나의 고정된 페이지"에, "무한히 증식가능한 Button을 넣을때," 각 버튼마다 다른 역할을 하게 만들 수 있다.]
: "하나의 고정된 페이지"에, "무한히 증식가능한 Button을 넣을때," 각 버튼마다 다른 역할을 하게 만들 수 있다.
"A" 라는 페이지는, "a, b, c, d..." 등의 "데이터로 만든, 무한증식 배열이 있는 페이지이다."
데이터 "a" 일때는 "A-a"
데이터 "b" 일때는 "A-b" ...
로 이동하는 버튼(함수)을 만들고 싶을때,
function XXPage(props) {
const { ArrayA } = props
function move(id){
window.location.href = `/${id}`
}
return(
ArrayA.map((item) => (
<button onClick={move.bind(null, item.id )}> 이동 </button>
))
)
=> 배열객체에 의해, 버튼은 무한히 증식되어도, 각 버튼은 bind 에 의해 고정된 인수를 가지므로,
각 버튼은 다른 역할을 하게 만들 수 있다.
댓글