안녕하세요. 신기한 연구소입니다.
이번 포스팅은 call() 함수에 대해 쉽게 정리해보겠습니다.
자바스크립트 책을 읽다 보니 call() 함수가 종종 나타나더군요.
그럼 좀 더 쉽게 이해하기 위해 예제 코드를 활용해보겠습니다.
그전에 구문에 대한 정리부터 해야겠지요?
구문
func.call(thisArg[, arg1[, arg2[, ...]]])
정의
이미 다른 객체에 사용 중인 메서드나 함수를 또 다른 객체에서 중복해서 재작성하지 않고
call()을 이용해서 사용할 수 있습니다.
생성자 호출 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function Prod(name, price){
this.name = name;
this.price = price;
}
function Food(name, price) {
debugger;
Prod.call(this, name, price);
this.category = 'food';
}
function Cloth(name, price) {
Prod.call(this, name, price);
this.category = 'cloth';
}
var cheese = new Food('cream', 30);
var shirt = new Cloth('robot', 40);
console.log(cheese.name);
console.log(shirt.name);
|
cs |
이 예제를 해석해 보겠습니다.
생성자를 call() 함수를 사용해서 재사용하는 예제입니다.
Prod 생성자는 name과 price값을 설정하는 기능을 구성되어 있습니다.
그 아래 Food와 Cloth 생성자도 Prod와 같이 name과 price 값을 사용합니다.
그래서 기 생성된 생성자인 Prod를 재활용하기 위해
call() 함수를 사용하고 있습니다.
같은 기능과 방식인데 중복해서 구현할 필요가 없이 재활용하면 된다는 것을 보여주고 있습니다.
Food 생성자 함수를 보면
Prod 생성자를 사용해서 생성자 구현을 하고 있습니다.
Prod.call(this, name, price);
Prod를 호출한다.
여기서 this는 무엇을 의미할까?
바로 Food 객체를 가리키고 있는 것이다.
생성자 내의 this는 생성자 객체를 가리키는 것으로 Prod의 this.name = name을 보면
입력 파라미터로 받은 name을 Prod의 이름(this.name)에 할당한다고 구현되어 있다.
객체 호출 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const person = {
fullName: function() {
return this.fName + " " + this.lName;
}
}
const per1 = {
fName : "Cho",
lName : "Chnagmee"
}
const per2 = {
fName : "Lee",
lName : "Young"
}
person.fullName.call(per2);
|
cs |
이번 예제는 생성자와 다르게 객체를 this 자리에 사용하고 있습니다.
person 객체의 메서드인 fullName을 보면 객체 내에선 fName, lName이 선언되어 있지 않습니다.
해당 객체의 fName으로 this.fName을 사용하고 있습니다.
그리고 실제 이름을 가지고 있는 per1, per2객체가 선언되어 있습니다.
per1 객체의 이름을 출력하고 싶다면 해당 객체에 출력하는 메서드를 선언하면 되지만
person 객체에서 fullName이라는 메서드가 같은 기능으로 선언이 되어 있습니다.
person.fullName 메서드를 per1 또는 per2 객체의 메서드로 call()을 사용해서 호출하고 있습니다.
person.fullName.call(per2);
해석하면 per2 객체는 자신이 갖고 있는 프로퍼티 값(fName. lName)을 가지고
person객체의 메서드인 fullName을 호출한다.입니다.
이렇게 다른 객체 또는 전역에 사용 중인 함수 또는 메서드를 재사용하기 위해
call()을 사용하는 방법에 대해 살펴봤습니다.
처음 이 함수를 접할 때 이해가 잘 안 되었다면 이 포스팅을 참고해서 쉽게 이해했으면 합니다.
즐 코딩하세요.
'Software > JavaScript' 카테고리의 다른 글
| [왕초보]자바스크립트 Function.prototype.bind() 함수 구문 이해하기. bind(). (0) | 2022.04.10 |
|---|---|
| [왕초보]자바스크립트 Function.prototype.apply() 함수 구문 이해하기. apply(). (0) | 2022.03.27 |
| [왕초보]자바스크립트 in, instanceof 연산자 사용해보기. (0) | 2022.02.13 |
| [왕초보]자바스크립트 논리 표현식 이해하기. &&, ||, ! [[논리연산자]] (0) | 2022.02.01 |
| [왕초보]자바스크립트의 데이터 타입, 문자열 타입 이해하기. (0) | 2021.11.07 |
