[Object] JS - Object Methods - 객체메서드 ★

Object Method 예제

 

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

<script>

var hz = {

  name: "홈짱닷컴",

  host : "Homzzang.com",

  open     : 2012,

  site : function() {

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

  }

};

document.getElementById("demo").innerHTML = hz.site();

</script>

 

결과보기

this 키워드

 

1.

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

 

2.

위 예제에서, this 키워드는 함수를 소유하는 hz 객체 가리킴.

즉, this.host 의미는 this 객체의 host 속성을 가리킴.

3.

더 자세한 건 여기 참고.

 

JS Method (메서드)

 

JS 메서드는 객체에서 수행 할 수있는 행위임.

JS 메서드는 함수 정의를 포함하는 속성임.

JS 메서드는 객체 속성으로 저장된 함수임.

 

site : function() { return this.name + " " + this.host; }

 

Object Method 접근

 

objectName.methodName()

 

---

 

1.

위 구문을 통해 객체 메서드에 접근 가능.

 

2.

hz.site()는 hz 객체의 site() 메서드라고 표현하고, site는 속성이라 표현.

site 속성이 ()와 함게 호출될 때는, 함수 실행 결과를 반환.

site 속성이 () 없이 단독 호출되면, 함수 정의 구문을 반환.

 

---

 

[메서드]

 

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

<script>

var hz = {

  name: "홈짱닷컴",

  host : "Homzzang.com",

  open     : 2012,

  site : function() {

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

  }

};

document.getElementById("demo").innerHTML = hz.site();

</script>

 

결과보기 : 홈짱닷컴 Homzzang.com

---

 

[속성]

 

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

<script>

var hz = {

  name: "홈짱닷컴",

  host : "Homzzang.com",

  open     : 2012,

  site : function() {

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

  }

};

document.getElementById("demo").innerHTML = hz.site;

</script>

 

결과보기 : function() { return this.name + " " + this.host; }

내장 메서드

 

(예제) 문자열을 대문자로 변환 위해 string 객체의 toUpperCase() 메서드 사용.

 

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

<script>

var hz = "홈짱닷컴 Homzzang.com";

var x = hz.toUpperCase();

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

</script>

 

결과보기 : 홈짱닷컴 HOMZZANG.COM

객체에 새 메서드 추가

 

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

<script>

var hz = {

  name: "홈짱닷컴",

  host : "Homzzang.com",

  open     : 2012,

};

hz.site = function() {

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

}

document.getElementById("demo").innerHTML = hz.site();

</script>

 

결과보기