JavaScript

[Functions] JS - call() 메서드 - 함수호출방법2 (= call메서드 = 콜메서드)

목차
  1. 모든 함수는 메서드에 해당
  2. this 키워드
  3. call() 메서드 정의
  4. call() 메서드 예제 - 독립변수 사용

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

 

모든 함수는 메서드에 해당

 

  • JS에서 모든 함수는 객체 메서드에 해당.
  • 만약, 함수가 JS 객체의 메서드 아닌 경우, 그것은 전역객체의 함수임. 여기참고

 


[예제]

 

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


<script>

var mySite = { // 3개 속성 (site, host, plus) 가진 객체 생성

  site:"홈짱닷컴",

  host: "Homzzang.com",

  plus: function() {

    return this.site + " " + this.host;

  }

}

x = mySite.plus();

document.getElementById("demo").innerHTML = x

</script>

 

결과보기

 

this 키워드

 

함수 정의에서 this 키워드는 함수 소유자를 의미.

  • 위 예 경우, this는 plus() 함수 소유하는 mySite 객체 의미.
  • 즉, this.plus 코드는 this 객체 (= mySite) 객체의 plus 속성 의미.
  • 더 자세히 보기

 

 

call() 메서드 정의

 

객체가 다른 객체에 속하는 메서드 이용 가능케 함. (아래 예제)

  1. call() 메서드는 미리 정의된 JS 메서드임.
  2. 소유자 객체를 독립변수로 사용해 메소드 언급(=호출)하는 데 사용.

  


[예제]

 

<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.call(site1); //  site1에서 site의 plus 메서드 호출

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

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

</script>

 

 

결과보기

홈짱닷컴 Homzzang.com

그누보드 sir.kr

 

call() 메서드 예제 - 독립변수 사용

 

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


<script>

var site = {

  plus: function(open, intro) {

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

  }

}

var site1 = {

  name: "홈짱닷컴",

  host: "Homzzang.com"

}

var site2 = {

  name: "그누보드",

  host: "sir.kr"

}

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

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

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

</script>

 

결과보기

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


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Form JS - Forms - 폼양식 유효성 제어
Form JS - Forms API - 폼유효성
Object JS - Object - 객체개념(=객체의미=객체정의) ★ 3
Object JS - Object Property - 객체속성 ★
Object JS - Object Methods - 객체메서드 ★
Object JS - Object Accessors - 객체접근자 (Getter/Setter = 게러/세러 = 게터/세터… 2
Functions JS - Function Definition - 함수선언방법 + 함수호출방법 ★★★ (= 함수구문 + 함수특…
Functions JS - Function Parameter/argument - 함수 (매개변수/독립변수) ※ 변수 종류 ※ …
Functions JS - Function Invocation - 함수호출방법1 = (함수방식 + 메서드방식 + 함수생성자방…
Functions JS - call() 메서드 - 함수호출방법2 (= call메서드 = 콜메서드)
DOM JS - DOM (= 돔 = 문서객체모델) 정의
DOM JS - Method - 메서드 (= HTML 요소에 대한 수행 작업)
DOM JS - Document - 문서객체
DOM JS - Element Selector - 주요 요소선택자 (= 객체찾기) ※ JS외부링크호출 주의사항
DOM JS - HTML - 내용입력/내용변경/속성값변경(=속성값입력)
4/89
목록
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어 1
고급코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱 PC버전 로그인