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

[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)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012