-
Notifications
You must be signed in to change notification settings - Fork 13
how to call apply and bind in javascript
이 글에선 간단한 예제를 통해 자바스크립트의 call()
, apply()
그리고 bind()
메서드의 차이점을 논할 것이다. 함수는 자바스크립트에서 Object이기 때문에, 이 3가지 메소드는 함수의 호출을 제어하는데 사용된다. ECMAScript3에는 call()
및 apply()
가 도입되었고, ECMAScript5에서 bind()
가 추가되었다.
call()
/apply()
를 사용하여 함수를 즉시 호출할 수 있다. bind()
는 나중에 실행될 때 원래의 함수를 호출하는 올바른 컨텍스트("this")를 갖는 바인딩 함수를 반환한다. 그래서 bind()
는 함수가 특정 이벤트에서 나중에 호출되어야 할 경우에 유용하게 사용할 수 있다.
자바스크립트의 "this"를 이해하려면 Understanding "This" in JavaScript 글을 참조해라.
call()
에 대한 간단한 예제를 확인해 보자.
//Demo with javascript .call()
var obj = {name:"Niladri"};
var greeting = function(a,b,c){
return "welcome "+this.name+" to "+a+" "+b+" in "+c;
};
console.log(greeting.call(obj,"Newtown","KOLKATA","WB"));
// returns output as welcome Niladri to Newtown KOLKATA in WB
call()
메서드의 첫번째 파라미터는 함수가 호출되는 대상인 "this" 값을 설정한다. 위의 경우에는 "obj"이다.
나머지 매개변수는 실제 함수에 대한 대한 인수들이다.
apply()
에 대한 간단한 예제를 확인해 보자.
//Demo with javascript .apply()
var obj = {name:"Niladri"};
var greeting = function(a,b,c){
return "welcome "+this.name+" to "+a+" "+b+" in "+c;
};
// array of arguments to the actual function
var args = ["Newtown","KOLKATA","WB"];
console.log("Output using .apply() below ")
console.log(greeting.apply(obj, args));
/* The output will be Output using .apply() below welcome Niladri to Newtown KOLKATA in WB */
d
call()
메서드와 마찬가지로 apply()
메서드의 첫 번째 매개변수는 함수가 호출되는 대상인 "this" 값을 설정한다. 위의 경우엔 "obj" 객체이다. apply()
와 call()
의 유일한 차이는 두 번째 파라미터이다. apply()
는 배열로 실제 함수에 대한 인수를 받아 들인다.
bind()
에 대한 간단한 예제를 확인해 보자.
//Use .bind() javascript
var obj = {name:"Niladri"};
var greeting = function(a,b,c){
return "welcome "+this.name+" to "+a+" "+b+" in "+c;
};
//creates a bound function that has same body and parameters
var bound = greeting.bind(obj);
console.dir(bound); ///returns a function
console.log("Output using .bind() below ");
console.log(bound("Newtown","KOLKATA","WB"));
//call the bound function
/* the output will be Output using .bind() below welcome Niladri to Newtown KOLKATA in WB */
위의 코드 샘플에서 bind()
는 나중에 호출 될 컨텍스트가 있는 바운드 함수를 반환하고 있다. 다음과 같이 콘솔에서 바운드 함수를 볼 수 있다.
bind() 메서드의 첫 번째 매개변수는 바인딩 함수가 호출될 때 대상 함수의 "this" 값을 설정한다. 바인딩 함수가 "new" 연산자를 사용하여 구성된 경우 첫 번째 파라미터의 값은 무시된다는 점에 유의하라. 나머지 매개 변수는 대상 함수를 호출 할 때 바인드 된 함수에 제공된 인수 앞에 추가되는 인수로 전달된다.
여기까지이다. 읽어주어서 감사 드리며 이 게시물이 자바스크립트의 apply()
, call ()
및 bind ()
메소드와 관련된 문제를 겪고있는 초보자에게 도움이되기를 바란다.
일부 의역이 들어간 경우도 있으므로 해당 원문의 내용과 조금 다를 수 있습니다.
문제가 될 소지가 있다거나 혹은 수정이 필요한 사항이 있다면 있다면 issues 보내주세요.
기술문서
- 호출스택
- 원시자료형
- 값타입과 참조타입
- 명시적 변환, 암시적 변환, Nominal, 구조화, 덕 타이핑
- == vs === vs typeof
- 함수 범위, 블록 범위, 렉시컬(lexical) 범위
- 식(expression) vs 문(statement)
- IIFF, Modules, Namespaces
- 메세지큐와 이벤트루프
- setTimeout, setInterval, requestAnimationFrame
- 자바스크립트 엔진
- 비트 연산자, 형식화 배열, 버퍼(배열)
- DOM과 Layout Trees
- 팩토리와 클래스
- this, call, apply, bind
- new, 생성자, instanceof, 인스턴스
- 프로토타입의 상속과 체인
- Object.create와 Object.assign
- map, reduce, filter
- 순수함수, 부수효과, 상태변이
- Closure
- 고차함수
- 재귀
- 컬렉션과 생성기
- Promise
- async, await
- 자료구조
- 함수 성능과 빅 오 표기법
- 알고리즘
- 상속, 다형성, 코드의 재사용성
- 설계패턴
- 부분 어플리케이션, 커링, Compose, Pipe
- 클린코드