• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Functions] JS - apply() 메서드 - 함수호출방법3 (= 어플라이메서드)

apply() 메서드 사용하면 다른 객체에서 사용 가능한 메서드 작성 가능.


apply() 메서드

 

1.

apply() 메서드는 미리 정의된 JS 메서드임.

2.
call() 메서드와 유사하나, 독립변수 받을 때 차이 있음. 
call() 메서드는 개별적으로, apply() 메서드는 배열로 받음.

 


 

<p id="demo"></p>


<script>

var site = {

  plus: function() {

    return this.name + " " + this.host;

  }

}

var site1 = {

  name: "홈짱닷컴",

  host: "Homzzang.com"

}

var site2 = {

  name:"그누보드",

  host: "sir.kr"

}

var x = site.plus.apply(site1); //  site1에서 site의 plus 메서드 호출

var y = site.plus.apply(site2); //  site2에서 site의 plus 메서드 호출

document.getElementById("demo").innerHTML = x + "<br>" + y;   

</script>

 

 

결과보기

홈짱닷컴 Homzzang.com

그누보드 sir.kr

 

apply() vs. call() 차이점

 

call()

독립변수를 개별로 취함.

apply()
독립변수를 배열로 취함. (※ 독립변수 많을 때 편리.)

 

 

apply() 메서드에 독립변수 사용하기

 

<p id="demo"></p>


<script>

var site = {

  plus: function(openintro) {

    return this.name + " " + this.host + " (" + open + ") : " + intro;

  }

}

var site1 = {

  name: "홈짱닷컴",

  host: "Homzzang.com"

}

var site2 = {

  name: "그누보드",

  host: "sir.kr"

}

var x = site.plus.apply(site1, ["2012", "홈페이지 제작강의"]); 

var y = site.plus.apply(site2, ["2001", "그누보드5 영카트"]);

document.getElementById("demo").innerHTML = x + "<br>" + y; 

</script>

 

결과보기

홈짱닷컴 Homzzang.com (2012) : 홈페이지 제작강의
그누보드 sir.kr (2001) : 그누보드5 영카트

 

max() 메서드를 배열에 적용하기

 

1.
JS 배열이 아닌 경우 최대값 구하기 : 
Math.max() 메서드 이용


<p id="demo"></p>


<script>

document.getElementById("demo").innerHTML = Math.max(3,4,5)

</script>

 

결과보기


 

2.

JS 배열 경우엔 max() 메서드 존재 안 하므로, 아래 방식으로 최대값 산출 가능.


Math.max.apply(null, array)

 

null

임의의 값.


array
배열. (예) [a, b, c]

 






※ 아래 예제들은 모두 동일 결과 출력.



예제1

 

<p id="demo"></p>


<script>

document.getElementById("demo").innerHTML = Math.max.apply(null, [3,4,5]); // 5

</script>

 

결과보기


예제2

 

<p id="demo"></p>


<script>

document.getElementById("demo").innerHTML = Math.max.apply(Math, [3,4,5]); // 5

</script>

 

결과보기


예제3

 

<p id="demo"></p>


<script>

document.getElementById("demo").innerHTML = Math.max.apply(" ", [3,4,5])

</script

 

결과보기


예제4

 

<p id="demo"></p>


<script>

document.getElementById("demo").innerHTML = Math.max.apply(0, [3,4,5]); 

</script>

 

결과보기

 

 

apply() 메서드의 첫번째 독립변수가 객체 아닌 경우

 

JS 엄격모드 경우, 첫번째 객체는 호출된 함수의 소유자 (객체)가 됨. 

JS 일반모드 경우, 첫번째 객체는 전역객체가 됨. 

 



분류 제목
HTML_Objects JS - <option> 객체 ★ - 선택사항 (= 옵션사항 = option태그 = 옵션태그)
HTML_Objects JS - <output> 객체 - 계산결과값출력 (= 산출태그 = output태그 = 아웃풋태그) (HTML…
HTML_Objects JS - <p> 객체 - 글단락 (= p태그 = p요소 = 글문단 = 단락태그 = 문단태그 = 피태그)
HTML_Objects JS - <param> 객체 - 미디어매개변수 (= param태그 = 패럼태그 = 파람태그 = 패러미터태그 …
HTML_Objects JS - <pre> 객체 ★ - 공백줄바꿈보존 (= 보존태그 = 있는그대로태그 = 있는대로태그 = pre태그…
HTML_Objects JS - <progress> 객체 - 진행상태바 (=진행바 = 진행막대 = 작업막대 = progress태그 …
HTML_Objects JS - <q> 객체 - 짧은인용구 (= 짧은인용태그 = q태그 = 큐태그)
HTML_Objects JS - <s> 객체 - 취소선 (= 취소태그 = s태그 = 에스태그 = 스트라이크쓰루태그) (HTML5 재…
HTML_Objects JS - <samp> 객체 - 프로그램산출예제 (= 예제태그 = samp태그 = 샘프태그 = 샘플태그)
HTML_Objects JS - <script> 객체 ★ - JS코드입력 (= 동적기능언어입력 = script태그 = 스크립트태그)
HTML_Objects JS - <section> 객체 ★ - 문서단락 (= section태그 = 섹션태그, IE9)
HTML_Objects JS - <select> 객체 ★★ - 선택메뉴 (= select메뉴 = select태그 = 실렉트태그/셀렉…
HTML_Objects JS - <small> 객체 - 작은글씨 (= small태그 = 스몰태그)
HTML_Objects JS - <source> 객체 - 미디어소스 불러오기 (= source태그 = 소스태그, IE9)
HTML_Objects JS - <span> 객체 ★★★ - 인라인요소그룹 (= span태그 = 스팬태그)</span>
HTML_Objects JS - <strong> 객체 ★ - 굵은 글씨 (=폰트 굵게 = 글씨 굵게 = strong태그 = 스트롱태…
HTML_Objects JS - <style> 객체 ★ - 요소에 CSS스타일적용 (= style태그 = 스타일태그)
HTML_Objects JS - <sub> 객체 ★ - 아래첨자 (= 하단작은글씨 = 하단태그 = sub태그 = 서브태그)
HTML_Objects JS - <summary> 객체 - 세부사항의 머리글 (= summary태그 = 서머리태그 = 써머리태그)…
HTML_Objects JS - <sup> 객체 ★ - 위첨자 (= 상단작은글씨 = 상단태그 = sup태그 = 섭태그 = 서프태그 …
59/67
목록
찾아주셔서 감사합니다. Since 2012