티스토리 뷰
//기본 함수 호출방법
function func(){
}
func();
//apply()를 사용하여 호출하기
funcion sum(arg1, arg2){
return arg1 + arg2};
alert(sum.apply(null, [1,2]) // output: 3
// 이 예제처럼 단순한 코드일 경우에는 apply()를 사용하는 것은 바람직하지 않다. 그냥 sum(1,2)로 하는 것이 맞다.
//하지만 우리가 apply()메소드를 사용하는 이유는 앞의 null을 다른 값을 넣어서 사용할 수 있기 때문이다.
- 객체에 값이 들어가 있다면 속성(property)라고 하고 함수가 들어가 있다면 메소드(method)라고 합니다.
- JS에서 함수는 객체입니다. -> 함수에는 JS가 기본적으로 제공하는 내장된 메소드,객체를 가지고 있습니다. *내장된 메소드일 경우 console에서 "{ native code }" 라고 내용물을 보여주지 않는 형태로 코드를 가려둡니다.
- 그래서 위의 코드에서 func.apply() 혹은 func.call()이라는 메소드를 사용할 수 있게 됩니다.
- apply()와 call()은 우리가 정의한 함수 func()를 호출하는 역할을 합니다. 두 메소드는 같은 취지이며 사용방법이 다른 차이점을 가지고 있습니다.
- apply의 첫번째 인자로 null을 전달 의미: apply가 실행된 함수 인스턴스는 전역객체(브라우저에서는 window)를 맥락으로 실행되게 된다.
apply()를 사용하여 함수호출하기
//아래 생성한 o1,o2객체는 각각 다르 속성의 이름과 속성의 수를 가지고 있다.
const o1 = { val1: 1, val2: 2, val3: 3 };
const o2 = { v1: 10, v2: 50, v3: 100, v4: 25 };
/*함수 sum()은 객체의 속성을 열거할 때 사용하는 for in문을 이용하여
객체 자신(this)의 값을 열거한 후에 각 속성의 값을 지역변수 _sum에 저장한 후 리턴*/
function sum() {
let _sum = 0;
for (name in this) {
_sum += this[name];
}
return _sum;
}
alert(sum.apply(o1)); // output:6 , sum을 객체 o1의 메소드로 만들고 sum을 호출한 후에 sum을 삭제
alert(sum.apply(o2)); // 185
/*아래는 기존 함수 호출법을 사용하는 방법*/
const o1 = { val1: 1, val2: 2, val3: 3, sum:sum };
const o2 = { v1: 10, v2: 50, v3: 100, v4: 25, sum:sum };
function sum() {
let _sum = 0;
for (name in this) {
//더하려고 하는 값의 타입이 함수와 같지 않을 경우에만 더하라
if(typeof this[name] !== "function")
_sum += this[name];
}
return _sum;
}
alert(o1.sum()); //결과는 같지만 sum function의 내부코드도 같이 출력된다.
// 이를방지하기 위해 if문을 넣어줘야한다.
alert(o2.sum());
- apply()메소드는 두개의 인자를 가질 수 있으며, 첫번째 인자는 함수(sum)이 실행될 맥락이고 두번째 인자는 배열이다. 이 배열에 담긴 원소가 함수(sum)의 인자로 순차적으로 대입된다.
- apply()를 사용하게 되면 이 메소드가 실행되는 시점에서 apply메소드를 적용하는 함수의 this값을 프로그래밍적으로 변경하여 sum()이라는 함수가 o1의 속성인 것처럼 활용할 수 있다는 장점이 있습니다.
- sum의 o1소속의 메소드가 된다는 것은 함수 sum에서 this의 값이 전역객체가 아니라 o1이 된다는 의미
- 일반적인 객체지향 언어에서는 하나의 객체에 소속된 함수는 그 객체의 소유물이되지만 JS에서 함수는 독립적인 객체로서 존재하고, apply나 call메소드를 통해 다른 객체의 소유물인 것처럼 실행될 수 있다!
'Frontend > JavaScript' 카테고리의 다른 글
[생활코딩] JS문법(객체지향)- 생성자와 new (0) | 2022.01.16 |
---|---|
[생활코딩] JS문법(객체지향)- 객체지향 프로그래밍? (0) | 2022.01.15 |
[생활코딩] JS문법(함수)- arguments (0) | 2022.01.14 |
[생활코딩] JS문법(함수)- 클로저 (0) | 2022.01.12 |
[생활코딩] JS문법(함수)- 값으로서의 함수,콜백, 비동기처리 (0) | 2022.01.11 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- nvm경로 오류
- 원티드 프리온보딩 FE 챌린지
- 원티드 3월 프론트엔드 챌린지
- 프리렌더링확인법
- D 플래그
- 원티드 FE 프리온보딩 챌린지
- is()
- aspect-ratio
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- nvm 설치순서
- 타입스크립트 DT
- getStaticPaths
- && 셸 명령어
- 항해99추천비추천
- ~ ^
- reactAPI
- getServerSideProps
- fs모듈 넥스트
- 타입스크립트 장점
- 틸드와 캐럿
- 프리온보딩 프론트엔드 챌린지 3월
- 형제 요소 선택자
- text input pattern
- 항해99프론트
- grid flex
- 부트캠프항해
- Prittier
- tilde caret
- float 레이아웃
- 항해99프론트후기
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함