[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 영카트