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

[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 - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★ document.write() = 다큐먼트라이트
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