bind()
.bind(thisArg[, arg1[, arg2[,...]]])
bind()
의 역할은 새로운 함수를 만든다.
이 함수의 실행 문맥은 .bind()
의 첫번째 인자로 받은게 된다.
바인딩함수는 미리 정의해둔 this
값으로 함수를 생성할 수 있기 때문에 매우 유용하다.
call()
.call(thisArg[,arg1[,arg2[,...]]])
call()
함수는 첫번째 인자로 함수 내부에서 사용할 this
로 만들어준다
나머지 parameter 는 메서드에 전달한 인자 목록이다.
apply()
.apply(thisArg[,argsArray])
apply()
함수는 call()
함수와 동일하지만 배열로 메서드에 인자를 전달한다는것이 차이이다.
헷갈리는 부분
call()
과 apply()
는 특정 객체의 메서드를 빌려쓴다는 개념이고
bind()
함수는 함수를 리턴한다. 이 함수는 앞서 말했듯이 미리 정의해둔 this
를 가진 새로운 함수이다.
bind()예제
function multiply(number) {
'use strict';
return this * number;
}
// 문맥을 지정해서 바인딩 함수를 생성
var double = multiply.bind(2);
// 바인딩 함수를 실행
console.log(double(3)); // => 6
console.log(double(10)); // => 20
call(), apply() 예제
var num = 5;
var obj = {
num: 50
};
function double(){
return this.num * 2;
}
// this 는 window
console.log(double());
console.log(double.call(this));
console.log(double.apply(this));
// this 는 obj
console.log(double.call(obj));
console.log(double.apply(obj));
생성자 함수를 new 를 붙이지 않고 호출할 경우
생성자 함수를 new
를 붙이지 않고 호출할경우 this
는 전역객체에 바인딩된다. 이런 현상을 막기위해 널리 사용되는 패턴이 있다.
function Foo(arg){
// 생성된 this 가 A의 인스턴스가 아니라면
// new 연산을 통해 바인딩
if(!(this instanceof A)){
return new Foo(arg);
}
this.value = arg ? arg : 0;
}