티스토리 뷰

UI_UX/JavaScript & JQuery

[JavaScript] 5. Object 객체 만들기

쟌쥰 2020. 1. 26. 15:08 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	
	function myClassQ(){
		this.name = "kh정보교육원";	//this. -> 외부에서 접근 가능
		var name02 = "Q 강의실";	//지역변수 -> 외부에서 접근 불가 당연히
		
		this.getName02 = function(){	//this. 지역변수를 함수로 리턴 -> 외부에서 열람 가능
			return name02;
		}
	}
	
	// 변수에 바디만 넣어서 바로 객체로 만들 수 있음!!!
	var classQ = {
			name:"kh 정보 교육원",
			print:function(){
				return classQ.name + "!!!!";
			}
	}
	
	// 이미 생성된 클래스에 기능을 추가할 수 있음!!
	myClassQ.prototype.printName = function(){
		alert(this.name + ", " + this.getName02() + " 화이팅! ");
	}
	
	function objTest(){
		
		var cls = new myClassQ();
		console.log(cls.name);
		console.log(cls.name02);
		console.log(cls.getName02());

		console.log(classQ.name);
		console.log(classQ.print());
		
		cls.printName();
		
	}
	
</script>

</head>
<body>
	
	<pre>
		객체의 구성
		- 메서드 : 기능 정의
		- 속성 : 객체 내부의 데이터
		- this : 객체 내부의 메서드나 속성을 정의할 때 사용
		- 프로토타입 : 객체의 확장
	</pre>
	
	<button onclick="objTest();">객체</button>
</body>
</html>

 

'UI_UX > JavaScript & JQuery' 카테고리의 다른 글

[JavaScript] 7. trans Object 형변환  (0) 2020.01.26
[JavaScript] 6. Number 객체 사용  (0) 2020.01.26
[JavaScript] 4. DOM 탐색  (0) 2020.01.26
[JavaScript] 3. 함수의 사용  (0) 2020.01.26
[JavaScript] 2. 변수의 선언  (0) 2020.01.26
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함