this, call, apply, bind
this
자바스크립트에서 this
는 어디서든 사용할 수 있으며, 상황에 따라 달라진다. 자바스크립트에서 this
는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, this
는 함수를 호출할 때 결정된다고 할 수 있다. 즉, 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다.
상황에 따라 달라지는 this
- 전역공간에서의
this
- 전역 객체를 가리킨다. 전역 객체는 개념상 전역 컨텍스트를 생성하는 주체이다.
- 브라우저 환경에선
Window
, Node.js 환경에서는global
이 전역 객체이다.
- 일반 함수 내부에서의
this
- 전역 객체를 가리킨다. 즉,
this
가 지정되지 않는다. - 이는 함수를 전역 공간에서 호출했을 때 뿐만 아니라 메서드 내부에서 함수를 호출했을 때도 마찬가지이다.
- 전역 객체를 가리킨다. 즉,
- 메서드 내부에서의
this
- 메서드를 호출한 주체를 가리킨다. 보통
객체.메서드()
의 형태로 많이 사용하는데, 이때this
는.
앞에 있는 객체를 가리킨다. Dot notation이 아닌 bracket notatiton을 사용해도 마찬가지이다. - 따라서 앞에
.
유무 여부를 따져 함수를 함수로서 호출한 것인지, 메서드로 호출한 것인지 알 수 있고, 그에 따라this
가 무엇인지 쉽게 알 수 있다.
- 메서드를 호출한 주체를 가리킨다. 보통
- 콜백 함수 내부에서의
this
- 콜백 함수 역시 함수이므로 기본적으로 전역 객체를 가리킨다.
- 하지만
addEventListner
등this
가 될 대상을 지정해놓은 콜백 함수의 경우는 그것에 따른다.
- 생성자 함수 내부에서의
this
- 새로 만들 구체적인 인스턴스를 가리킨다.
this
바인딩
명시적으로 this
에 별도의 대상을 바인딩하는 방법이 있다.
call
/ apply
메서드
const 실행할함수 = function() {};
실행할함수.call(지정할대상, 인자);
실행할함수.apply(지정할대상, [인자배열]);
call
, apply
메서드는 호출한 주체인 함수를 즉시 실행하되, 그 함수의 this
에 메서드의 첫 번째 인자를 바인딩하는 메서드이다. 나머지 인자들은 함수를 실행할 때 매개변수로 입력된다.
call
메서드와 apply
메서드의 차이는, call
메서드는 두 번째 인자부터 모든 인자들을 함수의 매개변수들로 지정하지만 apply
메서드는 함수의 매개변수로 사용할 인자들을 배열의 형태로 입력받는다는 것이다.
이 메서드는 this
를 명시적으로 바인딩하는 것 외에도, 유사배열객체를 배열로 형변환하는데 쓸 수 있다.
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"]
이 때의 call
, apply
는 쉽게 말해 어떤 함수를 '빌려다가' 특정한 대상에 적용하는 모양새이다. 위의 예제에선 Array.prototype.slice
라는 함수를 '빌려다가', 유사배열객체인 obj
에 적용했다.
bind
메서드
bind
메서드는 call
메서드와 비슷하지만 즉시 호출하지 않는다는 점이 다르다. bind
메서드는 넘겨받은 this
및 인수들을 바탕으로 새로운 함수를 반환하기만 한다. 만일 bind
를 통해 일부 인수들을 넘겨주고, 반환된 함수를 호출하며 새로운 인수를 입력했을 경우 bind
메서드를 호출할 때 전달했던 인수들의 뒤에 이어서 등록된다.
Author And Source
이 문제에 관하여(this, call, apply, bind), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@garudanish/this-call-apply-bind저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)