해당 내용은 '코어 자바스크립트' 서적을 참고하여 작성되었으며, 초보 개발자에게 유익한 책을 지필해주신 지은이 정재남 님께 감사의 말씀을 드립니다.
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
정보를 상속하기 위한 우회법을 살펴보았는데var obj = {
outer: function () {
var inner = function () {
console.log(this);
};
inner(); // 전역객체 출력됨
inner.call(this); // obj 출력됨(상위범주(outer)의 this 값을 전달했기 때문에)
},
};
obj.outer();
this
정보를 바인딩하는 과정이 아예 없기 때문에 this
정보에 접근하려하면 스코프체인을 통해 상위 범주의 this
정보를 가져온다.var obj = {
outer: function () {
var inner = () => {
console.log(this);
};
inner(); // obj 정보 출력
},
};
obj.outer();
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