[JavaScript] Object(오브젝트 / 객체)

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object</title>

<script type="text/javascript">
	function KCine(){
		// this -> 외부에서 접근 가능
		this.name = "강씨네집";
		// var -> 외부에서 접근 불가
		var name02 = "씨네";
		
		this.getName02 = function(){
			return name02;
		}
	}
	
	// 객체 리터럴
	var myCine = {
			name : "Cine",
			print : function(){
				alert(myCine.name + " 최고!!!");
			}
	}
	
	// 프로토타입 : 객체의 확장(이미 만들어진 객체에 기능을 추가함)
	KCine.prototype.printName = function(){
		var res = "최고!!!";
		alert(this.name + " " + this.getName02() + res);
	}

	function objectTest(){
		// 객체 생성
		var cls = new KCine();
		alert(cls.name);
		alert(cls.name02);
		alert(cls.getName02);
		
		alert(myCine.name);
		myCine.print();
		cls.printName();
	}
</script>


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

	<button onclick="objectTest();">클릭!</button>
</body>
</html>

가장먼저 실행되면 위의 결과가 웹에 출력됩니다.

클릭버튼을 눌러오면 objectTest()함수를 호출합니다.

	function objectTest(){
		// 객체 생성
		var cls = new KCine();
		alert(cls.name);
		alert(cls.name02);
		alert(cls.getName02);
		
		alert(myCine.name);
		myCine.print();
		cls.printName();
	}

이 함수에서 KCine()객체를 만들게 되고 cls라는 변수에 담습니다.

처음 alert명령에서 보면 KCine()함수에 있는 name을 출력하게 되겠네요.

this.name = "강씨네집";

alert(cls.name02);

두번째 명령을 보면

var name02 = "씨네";

name02 라는 변수가 var타입으로 선언되어있지만 이 변수는 외부에서 참조할수 없습니다.

따라서 씨네 라고 나오는게 아니라 undefined가 나오네요!

alert(cls.getName02);

cls.getName02를 호출하니까 이상한 외계어가 나오네요?

this.getName02 = function(){
	return name02;
}

alert(myCine.name);

myCine.name을 호출하니 Cine가 출력이 되네요.

// 객체 리터럴
var myCine = {
		name : "Cine",
		print : function(){
			alert(myCine.name + " 최고!!!");
		}
}

위의 선언으로 객체 리터럴 되어 name값이 Cine로

myCine.print();

myCine객체에 print함수를 호출합니다.

print : function(){
			alert(myCine.name + " 최고!!!");
		}

myCine.name의 값인 Cine와 최고 !!!라는텍스트가 나옵니다!

cls.printName();

cls에 담겨있는 KCine객체가 있습니다.

// 프로토타입 : 객체의 확장(이미 만들어진 객체에 기능을 추가함)
KCine.prototype.printName = function(){
	var res = "최고!!!";
	alert(this.name + " " + this.getName02() + res);
}

또한 프로토타입으로 인하여 명령을 추가하게 됩니다.

728x90

'JS 관련 > JavaScript' 카테고리의 다른 글

[JavaScript] TransObject(형변환) (0)	2022.01.16
[JavaScript] NumberObject (0)	2022.01.15
[JavaScript] DOM(돔) 구조 (0)	2022.01.13
[JavaScript] rolling(롤링)을 이용한 그림 바꾸기 (0)	2022.01.12
[JavaScript] 명시적함수, 익명함수, 리터럴함수, 아규먼트 속성, 클로저 (0)	2022.01.11

'JS 관련 > JavaScript' 카테고리의 다른 글

티스토리툴바