FRONTEND/자바스크립트
[자바스크립트] 자바스크립트 객체 생성
꾸준히개발하자
2022. 3. 18. 02:17
자바스크립트 객체 생성
자바스크립트는 객체지향 프로그램을 완벽하게 지원하고 있지는 않지만 자바스크립트가 지원하는 몇가지 기능만으로
충분하게 객체지향적으로 프로그래밍 할 수 있다.
prototype을 이용한 자바 스크립트 클래스 만들기
자바스크립트는 Date,RegEx,String 등의 클래스가 있고 이들 클래스를 사용하여 새로운 객체를 생성할수있다.
ex>
var now = new Date();
var year = now.getFullYear();
var year = now.getFullYear();
자바스크립트가 제공하는 기본적인 클래스외에 추가적으로 개발자가 직접 새로운 클래스를 정의 할수 있으며
이를 통해 함수기ㅂ반이 아닌 객체기반으로 자바스크립트 프로그래밍이 가능하다
1. 새로운 클래스 정의
클래스 이름 = function (파라메티) {
...
}
2. 객체 생성시 id,name 파라메타 값을 전달받는 member 라는 클래스 정의
Member = function(id,name) {
this.id = id;
this.name = name;
}
생성
var mem = new Member("a001",천송이");
3. 클래스내에 함수 정의
# 함수정의
클래스이름.prototype.함수이름 = function(파라메타) {
....
}
#. 정의에 Member 클래스에 setValue 라는 함수를 추가
Member.prototype.setValue = function(newId.newname) {
this.id = id;
this.name = newname;
}
#호출
var mem = new Member("a001","천송이")
mem.setValue('a002','전지현');
member.js
Member = function(name, id, securityNo) {
this.name = name;
this.id = id;
this.securityNo = securityNo;
}
Member.prototype.setValue = function(newName, newId, newSecurityNo)
{
this.name = newName;
this.id = newId;
this.securityNo = newSecurityNo;
}
Member.prototype.getAge = function() {
var birthYear = parseInt(this.securityNo.substring(0, 2));
var code = this.securityNo.substring(6,7);
if (code == '1' || code == '2') {
birthYear += 1900;
} else if (code == '3' || code == '4') {
birthYear += 2000;
}
var today = new Date();
return today.getFullYear() - birthYear;
}
Member.prototype.toString = function() {
return this.name + "[" + this.id + "]";
}
useMember.html
member.js
//자바스크립트 객체
// 버전이 높아지면서 자바스크립트도 객체를 쓸수있게 바뀌었다
// Member 클래스
// 자바스크립트로 member 클래스 만듬
Member = function(id,name,addr){
this.id = id;
this.name = name; // 초기화도 가능 인스턴스 변수
this.addr = addr;
}
//메소드(함수)정의 - setter
// 프로토타입 : 클래스안에 메소드를 만듬
// setValue 라는 메소드를 만드는데 3개의 값을 넣어서 초기화
Member.prototype.setValue = function(id,name,addr){
this.id = id;
this.name = name;
this.addr = addr;
}
// 메소드(함수)정의--getter
Member.prototype.getValue = function() {
return "[" + this.id + "]" + this.name + "(" + this.addr + ")";
}
memberJson.js ( 만듬 getValue , setValue, getId, setId )
// 자바스크립트로 패키지를 만들수 있다.
var com = new Object(); // com이라는 이름으로 객체 하나 생성
com.util = new Object(); // com.util이 생기면서 객체 하나 생성
// 패키지만듬
com.util.Member = function(id,name,addr){ //패키지 만든것.
this.id = id;
this.name = name;
this.addr = addr;
};
// 메소드를 json형식으로
com.util.Member.prototype = { // json의 중괄호 newsTitleJson
//KEY VALUE
setValue:function(id,name,addr){
this.id = id;
this.name = name;
this.addr = addr;
},
// 하나의 데이터를 가져오는 setter
setId:function(id){ //하나의 데이터 입력하는 setter
this.id = id;
},
// 전체데이터 가져오는 getter
getValue:function(){ //전체데이터 가져오는 getter
return this.id + ":" + this.name + ":" + this.addr;
},
getId:function(){ //하나의 데이터 가져오는 getter
return this.id;
},
// 메소드로 만드는 getter
toString:function(){ //메소드로 만든 getter
return this.id + ":" + this.name + ":" + this.addr;
}
};
memberClass.jsp
setter 로 객체를 만들고 getter 로 호출한다.
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- data/js log.js,member.js 자바스크립트 클래스,메소드 정의한걸 가져옴 -->
<script type="text/javascript" src="<%=cp%>/data/js/log.js"></script>
<script type="text/javascript" src="<%=cp%>/data/js/member.js"></script>
<script type="text/javascript">
function memberClass() {
//1.member.js없이 실행
var object1 = {}; // 객체를 만드는 방법 json방법
object1.id = "suzi";
object1.name = "배수지";
log("log1:" + object1.id + ", " + object1.name); // log(msg)
//2.member.js없이 실행
var object2 = new Object(); // new로 객체를 만들수있다.
object2.id="inna";
object2.name="유인나";
log("log2:" + object2.id + ", " + object2.name);
//3.Member 클래스 객체
var member = new Member("insun","정인선","서울");
log("member1: " + member.id + ", " + member.name + ", " + member.addr);
//4.setter 로 객체 만듬
member.setValue("suzin","경수진","옥탑방");
log("member2: " + member.id + ", " + member.name + ", " + member.addr);
// 5.getter로 호출
var memberInfo = member.getValue(); // suzin,경수진,옥탑방을 memberInfo에 넣는다
log("member.getValue(): " +memberInfo);
}
window.onload = function() {
memberClass();
}
</script>
</head>
<body>
<h1>JavaScript 클래스 사용 </h1>
<hr/>
<div id="console"></div> <!-- log.js 의 console에 출력 -->
</body>
</html>
memberJSONClass.jsp
set 으로 생성자를 통해서 생성하고
get 으로 불러온다.
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=cp%>/data/js/log.js"></script>
<script type="text/javascript" src="<%=cp%>/data/js/memberJson.js"></script>
<script type="text/javascript">
function memberClass(){
//1.
var member = new com.util.Member("dami","다미","서울"); //생성자로 초기화
log("member1 : " + member.id + ", " + member.name + ", " + member.addr);
//2.
member.setValue("inna","인나","부산");
log("member2 : " + member.id + ", " + member.name + ", " + member.addr);
//3.
var memberInfo = member.getValue();
log("member.getValue(): " + memberInfo);
//4.
member.setId("insun");
log("member.toString(): " + member.toString());
//5 >> 4번에서 setiD값을 불러옴
var id = member.getId();
log("member.getId(): " + id);
}
window.onload = function(){
memberClass();
}
</script>
</head>
<body>
<h1>Javascript 클래스 사용[JSON]</h1>
<hr/>
<div id="console"></div>
</body>
</html>