안녕하세요. 신기한 연구소입니다.
이번 포스팅은 bind() 함수에 대해 쉽게 정리해보겠습니다.
이번 포스팅은 Function.prototype.bind()에 대해 살펴보겠습니다.
그럼 먼저 bind() 구문에 대해 알아보겠습니다.
구문
func.bind(thisArg[, arg1[, arg2[, ...]]])
정의
이 함수( bind )가 호출되는 시점에 새로운 함수가 만들어집니다.
이 함수를 사용하면 객체가 다른 객체의 메서드를 빌려서 사용할 수 있습니다.
현재 객체에는 없지만 다른 객체에 필요한 메서드가 있는 경우
중복해서 선언할 필요 없이 bind()해서 새로운 함수를 만들어 사용하면 됩니다.
thisArg 뒤의 인수들은 bind 한 메서드들에게 전달한 인자 값을 지정할 수 있는 겁니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
this.a = 55;
const obj = {
a:42,
getData:function() {
return this.a;
}
};
console.log(obj.getData());
var aaa = obj.getData;
console.log(aaa());
var bbb = aaa.bind(obj);
console.log(bbb());
|
cs |
위 예제를 보겠습니다.
먼저 전역에 a = 55로 값을 할당했고 obj 객체를 선언하면서
내부 변수 a에 42를 할당했습니다.
obj 객체에 getData 함수(메서드)를 선언했고
this.a 로 값을 return 하도록 구현했습니다.
결과가 흥미로운데요.
첫 번째 obj.getData()를 실행하면 객체의 메서드인 getData를 실행하면서
this.a인 내부 변수인 a를 찾게 됩니다.
결과는 obj 변수인 42를 출력합니다.
두 번째 aaa를 obj의 getData (obj.getData)로 obj의 내부 메서드 그 자체를 할당했습니다.
이제 obj 객체를 벗어난 순수한 getData만 보면 되겠습니다.
aaa(); 를 실행하면 obj 와는 전혀 관계없이 getData만 전역으로 실행됩니다.
그러므로 전역 변수인 a를 찾게 되고 55를 출력하게 됩니다.
만약 전역의 this.a = 55;를 주석처리한다면 undefined가 출력될 것입니다.
하지만 우리는 obj의 메서드인 getData를 객체 내부의 메서드로 실행하고 싶은 경우가 있습니다.
이런 경우 바로 객체의 메서드로 빌려 쓰는 bind() 메서드를 사용하면 원하는 기능으로 가능하게 됩니다.
그래서 bbb를 할당하는데 aaa(obj.getData)에 객체 obj를 바인딩(bind)하는 식으로 표현하면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const name = {
fName : "hoon",
lName : "kim",
fullName : function () {
console.log(this.fName + ' ' + this.lName);
}
};
//name.fullName();
let a = name.fullName.bind(name);
//console.log(setTimeout(name.fullName, 1000));
console.log(setTimeout(a, 1000));
|
cs |
이번 예제는 setTimeout을 사용할 때 bind 함수를 사용하는 방법에 대해 구현해봤습니다.
먼저 9번 라인을 보면 객체 name.fullName()을 실행하면 해당 객체의 메서드가 정상 실행됩니다.
하지만 11번 라인의 setTimeourt 내부에서 name.fullName을 실행하면 this 변수가 마찬가지로
전역을 바라보게 되어 undefined가 됩니다.
이럴 경우는 10번 라인처럼 bind를 사용해서 연결을 합니다.
그리고 바인드 된 a를 setTimeout에 사용하면 정상적으로 잘 출력됨을 확인할 수 있습니다.
이렇게 다른 객체 또는 전역에 사용 중인 함수 또는 메서드와 연결해서 재사용하기 위해서
bind()을 사용하는 방법에 대해 살펴봤습니다.
처음 이 함수를 접할 때 이해가 잘 안 되었다면 이 포스팅을 참고해서 쉽게 이해했으면 합니다.
'Software > JavaScript' 카테고리의 다른 글
| [자바스크립트] 리터럴(literal) 쉽게 이해하기 편. with javascript (1) | 2022.05.24 |
|---|---|
| [초보코딩]자바스크립트 사용하기 편. -Javascript (0) | 2022.04.25 |
| [왕초보]자바스크립트 Function.prototype.apply() 함수 구문 이해하기. apply(). (0) | 2022.03.27 |
| [왕초보]자바스크립트 Function.prototype.call() 함수 구문 이해하기. call(). (0) | 2022.03.13 |
| [왕초보]자바스크립트 in, instanceof 연산자 사용해보기. (0) | 2022.02.13 |
