Object
자바스크립트 객체
1. 기본 객체(코어객체) : Array, Math, String, Date
2. 사용자 객체
1) Object()생성자를 활용해서 생성 : 생성자객체 >> 싱글톤객체
- new할 필요없이 객체명.속성/ 객체명.메소드로 접근할 수 있음
- 예)
let obj = new Object();
obj.name = " ";
obj.age = " ";
2) 리터럴표기법으로 생성 : 리터럴객체/JSON객체 >> 싱글톤 객체
- new할 필요없이 객체명.속성/ 객체명.메소드로 접근할 수 있음
- 예)
let obj = {키:값, 키:값, 키:값 }
(접근) obj.키 또는 obj[0]
* JSON(자바스크립트 객체 표기법)
. 키와 값을 쌍으로 이루어진 테스트를 사용하는 개방형 표준 포맷의 데이터 표기법
. 여러 프로그램에서도 사용할 수 있는 독립형 언어
. 배열의 형태임
3) 프로토타입 : 함수형 객체 >> 인스턴트 객체
- new 생성자(); 생성하여 활용
- 예)
function Student(a,b,c){
this.a = 값;
this.b = 값;
this.c = function() { return this.a }
}
* this: 자신의 객체와 바인딩되는 예약어
>> window객체, DOM객체, 함수형 객체 일 수도 있음
3. HTML DOM (Document Object Model) 객체
- 요소(태그) : DOM객체, document객체
4. BOM (Browser Object Model) 객체
- window객체, navigation객체, screen객체,,
* class A {
생성자
constructor(a,b,c){
this.a = a;
}
메소드
function(){
}
}
<script type="text/javascript">
function f() {document.write(this.name+"님은 잠을 잡니다.<br>")}
1. 첫번째 방식: 생성자 객체 - Object()생성자 활용
let obj1 = new Object();
속성
obj1.name = "서대길";
obj1.age = 23;
메소드
obj1.sleeping = function(){document.write(this.name+"님은 잠을 잡니다<br>")};
obj1.func= f; 함수 이름만
*************************************************
활용
document.write(obj1.name+"<br>"); // 객체명.속성
document.write(obj1.age+"<br>");
obj1.sleeping();
obj1.func(); ()해줬음
document.write("<hr>");
2. 두번째 방식: 리터럴객체/JSON객체
let obj2 = {
name:"서대길",
age:23,
sleeping:function(){document.write(this.name+"님은 잠을 잡니다.")}
};
활용
document.write(obj2.name+"<br>");
document.write(obj2.age+"<br>");
obj2.sleeping();
document.write("<hr>");
for(i in obj2){
document.write(obj2[i]+"<br"); 함수는 개별호출 해야 함
}
document.write("<hr>");
3. 함수형 객체
정의
function f2() {return(this.a-this.b);}
function FObject(a,b){
this.a = a;
this.b = b;
this.c = function(){
return (this.a+this.b)};
this.d=f2; 추가
}
document.write("<hr>");
활용
let obj3 = new FObject(5,4);
let obj4 = new FObject(8,3); 객체를 계속 생성할 수 있음
document.write(obj3.a+"<br>");
document.write(obj3.b+"<br>");
document.write(obj3.c()+"<br>");
document.write(obj3.d()+"<br>");
</script>
<script type="text/javascript">
var person = new Object();
person.name="서대길";
person.nickName="덕담";
person.age=23;
person.mbti="ISTP";
</script>
</head>
<body>
<h3>Object()생성자를 활용한 객체생성</h3>
<hr>
<script type="text/javascript">
document.write("이름 : "+person.name+"<br>");
document.write("나이 : "+person.age+"<br>");
document.write("별명: "+person.nickName+"<br>");
document.write("mbti: "+person.mbti+"<br>");
</script>
Object()생성자를 활용해서 다음과 같은 객체를 생성하시오.
예금주 000
계좌번호 1111-2222
잔액 50000
잔액조회 잔액을 조회하여 리턴해주는 함수
예금처리 돈을 입력받아서 잔액에 증가시켜주는 함수
출금처리 요청한 돈을 입력받아 잔액을 감소시켜주는 함수
잔액조회 객체함수
function inquiry(){
return this.balance;
}
예금 객체함수
function deposit(money){ 매개변수로 입금액 받음
this.balance = this.balance + money; 누적
}
*********************************************************
1. 객체생성
let account = new Object();
account.owner="서대길";
account.code="1111-2222";
account.balance="50000";
메소드
account.inquiry = inquiry; 잔액조회 - 객체함수
account.deposit = deposit; 잔액조회 - 객체함수
account.withdraw = function (money){ 출금처리 - 객체함수를 직접 안에서 작성한 경우(함수명 무방)
if (this.balance < money){
document.write("잔액이 부족합니다.");
} else{
this.balance = this.balance - money;
}
}
**********************************************************
</script>
</head>
<body>
<h3>입출금 처리</h3>
<hr>
<script type="text/javascript">
document.write("예금주: "+account.owner+"<br>");
document.write("계좌번호: "+account.code+"<br>");
document.write("잔 액: "+account.balance+"<br>");
입금 1만원
account.deposit(10000);
document.write("현재잔액: "+account.balance+"<br>");
</script>
prompt 활용
<script type="text/javascript">
정의
function Account(name, code, balance) {
속성
this.name = name;
this.code = code;
this.balance = balance;
메소드
this.inquiry = function() {return this.balance;}
this.deposit = function(money) {this.balance += money;}
this.withdraw= function(money) {this.balance -= money;}
}
</script>
</head>
<body>
<script type="text/javascript">
var name = prompt("이름을 입력해주세요");
var code = prompt("계좌번호를 입력해주세요");
var balance = parseInt(prompt("금액을 입력해주세요"));
var account = new Account( name, code, balance );
document.write(account.name + "<br>");
document.write(account.code + "<br>");
document.write(account.balance);
</script>