본문 바로가기
Frontend/Javascript

사용자 정의 객체

olli2 2021. 12. 13. 11:48

사용자 정의 객체

  • 사용자가 직접 필요한 객체를 생성해서 사용

사용자 정의 객체 생성 방법

  • (1) 리터럴 이용
  • (2) 생성자 함수 (function()) 이용
  • (3) new Object() 이용 (ES5에 추가)
  • (4) class 정의하고 객체 생성 (ES6에 추가)

(1) 리터럴 이용

// 객체 생성
var 객체 = {
  // 변수 : 프로퍼티(속성)
  프로퍼티명(속성명)1 : 값1,
  프로퍼티명(속성명)2 : 값2
  
  // 멤버 메소드
  메소드명 : function() {
    수행 코드;
  }
};


// 객체 사용
객체.프로퍼티;
객체.메소드();

 

사용 예시

var person = {
  name : “홍길동”,
  age : 20,
  getName : function() {
    return this.name;
  }
};

//객체 사용 
person.getName();  //객체의 멤버 메소드 사용 (호출)

// 프로퍼티 존재 여부 확인
console.log("name" in person);

// 전체 프로퍼티 값 출력
for (let i in person) {
  console.log(person[i]);
}

 

(2) 생성자 함수 (function()) 이용

  • 함수 선언과 같은 방식으로 function 키워드 사용하여 선언(정의)
  • 함수를 클래스처럼 사용
  • 프로퍼티 설정 : this.프로퍼티
  • new 연산자를 사용해서 객체 생성
function 함수명() {
  //프로퍼티 추가
  this.프로퍼티1 = 값1;
  this.프로퍼티2 = 값2;

  // 메서드 추가
  this. 메서드 = function() {
    수행 코드;
  }
}

// 객체 생성
var 객체(인스턴스) = new 함수명();

// 객체 사용
객체.메소드();
객체.프로퍼티1;

 

사용 예시

// 생성자 함수를 이용하여 함수 정의
function People() {
  // 멤버 변수 : 프로퍼티(속성)
  this.name = "홍길동";
  this.age = 21;
  this.getName = function() {
  return this.name;
  }
}

// new 연산자를 사용해서 객체 (인스턴스) 생성
var person = new People();
var person2 = new People();
console.log(person.name);
console.log(person.age);
console.log(person.getName());

// 생성자 함수를 변경하지 않고도 프로퍼티(속성/메소드) 추가 가능
person.address = "서울";
person.getAddress = function() {
  return this.address;
}

// 새로 추가된 메소드 호출
console.log(person.getAddress());

// person2에는 address, getAddress()추가되지 않았음
/* console.log(person2.getAddress()); */

 

예제 : 생성자 함수를 이용해서 객체 정의

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			// 생성자 함수를 이용해서 객체 정의 (선언)
			function ListTag() {
				// 프로퍼티 지정
				this.ulTag = document.createElement("ul");
				this.ulTag.type = "square";
				
				// <li> 태그 생성해서 <ul> 태그에 추가
				for (var i=0; i<=5; i++) {
					var listItem = document.createElement("li");
					var itemInput = prompt("꽃" + i+1 + "입력");
					listItem.innerHTML = itemInput;
					// <ul> 태그에 <li> 태그 추가
					this.ulTag.appendChild(listItem);
				}
				
				// 멤버 메서드
				this.getListItem = function() {
					return this.ulTag;
				}
			}
			
			// 객체 생성
			window.onload = function() {
				var list = new ListTag();
				
				// box <div> 태그에 <ul>태그 (객체) 추가
				var box = document.getElementById("box");
				box.appendChild(list.getListItem());
			}
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

(3) new Object() 이용 (ES5에 추가)

  • new Object()로 빈 객체 생성한 후 프로퍼티, 멤버 메서드 추가
var 객체 = new Object(); // 빈 객체 생성 (new 생략 가능)

// 프로퍼티 추가
객체.프로퍼티 = 값;

// 멤버 메서드 추가
객체.메서드명 = function(){
  수행 코드;
}

// 객체의 멤버 메서드 호출 (사용)
객체.메서드();

 

예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			// new Object() 이용해서 빈 객체 생성
			var person = new Object();
			
			// 프로퍼티 추가
			person.name = "홍길동";
			person.age = 20;
			
			// 멤버 메서드 추가
			person.getName = function() {
				return this.name;
			}
			
			console.log(person.getName());
			console.log(person.age);
		</script>
	</head>
	<body>
		
	</body>
</html>

(4) class 정의하고 객체 생성 (ES6에 추가)

  • class 키워드 사용
  • 생성자 / Getters / Setters 가능
  • Getters / Setters : 프로퍼티 사용 사 앞에 _ 붙여서 사용
  • 호이스팅 불가
class 클래스명 {
  생성자() { }
  Getters 
  Settters
  메서드();
}

// 객체 생성
let 객체 = new 클래스();
객체.메서드();

 

예제 - 1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			class Person {
				constructor(name, age) {
					// 프로퍼티 정의
					this.name = name;
					this.age = age;
				}
				
				// getter : 프로퍼티 반환
				get name() {
					return this._name;
				}
				
				get age() {
					return this._age;
				}
				
				set name(name) {
					this._name = name;
				}
				
				set age(age) {
					this._age = age;
				}
				
				// 필요한 메서드 추가
				toString() {
					return this.name+"은 " + this.age + "살입니다.";
				}
			}
			
			// 객체 생성 : 호이스팅 불가 (클래스 정의 이전에 객체 생성 불가)
			let person1 = new Person('홍길동', 25);
			let person2 = new Person('이몽룡', 30);
			
			// getter 호출
			console.log('성명 : ' + person1.name + ', 나이 : ' + person1.age);
			console.log('성명 : ' + person2.name + ', 나이 : ' + person2.age);
			
			// toString 메서드 호출
			console.log(person1.toString());
			console.log(person2.toString());
			
			person1.age=27;
			console.log(person1.toString());
			
			person2.name="성춘향";
			person2.age=20;
			console.log(person2.toString());
		</script>
	</head>
	<body>
		
	</body>
</html>

 

예제 - 2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			class Rectangle {
				constructor(width, height) {
					// 프로퍼티 정의
					this.width = width;
					this.height = height;
				}
				
				// getter : 프로퍼티 반환
				get width() {
					return this._width;
				}
				
				get height() {
					return this._height;
				}
				
				set width(width) {
					this._width = width;
				}
				
				set height(height) {
					this._height = height;
				}
				
				getArea() {
					return this._width*this._height;
				}
			}
			
			let rect = new Rectangle(30, 10);
			console.log("가로 길이 : " + rect.width + " 세로 길이 : " + rect.height);
			console.log("사각형의 넓이 : " + rect.getArea());
			
			rect.width = 20;
			rect.height = 30;
			console.log("사각형의 넓이 : " + rect.getArea());
		</script>
	</head>
	<body>
		
	</body>
</html>
저작자표시 비영리 변경금지

'Frontend > Javascript' 카테고리의 다른 글

자바스크립트 객체 JSON 변환  (0) 2021.12.13
프로토타입; prototype  (0) 2021.12.13
폼 유효성 확인 예제  (0) 2021.12.13
form 객체  (0) 2021.12.10
이벤트 핸들러와 이벤트 처리  (0) 2021.12.10

'Frontend/Javascript' Related Articles

티스토리툴바