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

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

 

결과보기


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

분류 제목
Basic JS - Common Mistakes -
Basic JS - Performance -
Basic JS - Reserved Words -
Basic JS - Versions -
Basic JS - JSON (제이슨) - 데이터 전송 위한 가벼운 자료 형식.
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 - 내용입력/내용변경/속성값변경(=속성값입력)
3/67
목록
찾아주셔서 감사합니다. Since 2012