[38일차] Javascript - 객체, 생성자, 프로토타입, window

SOSO·2022년 6월 11일
0

학원

목록 보기
38/59
post-thumbnail

객체

객체란

이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합

프로퍼티 호출

객체이름.프로퍼티이름
객체이름["프로퍼티이름"]

예제

//객체 생성
	let product = {
			//속성(key(프로퍼티):value)
			제품명:'휴대폰',
			제품번호:'A1001',
			기능:'멀티윈도우',
			원산지:'대한민국',
			가격:1000,
			업데이트지원:true
	};
	//객체의 속성 호출
	document.write(product.제품명 + '<br>');
	document.write(product.가격 + '<br>');
	document.write(product['원산지'] + '<br>');
	document.write(product['업데이트지원']);

결과

휴대폰
1000
대한민국
true

반복문을 이용해서 객체의 프로퍼티 읽기

예제

let product = {
			//속성
			name:'eclipse',
			price:'10,000원',
			language:'한국어',
			supportOS:'win10',
			subscription:true
	};
	
	//for in 반복문을 이용해서 객체의 속성(key,value) 출력
	for(let key in product){
		document.write(key + ':' + product[key] + '<br>');
	}

결과

name:eclipse
price:10,000원
language:한국어
supportOS:win10
subscription:true

객체의 메서드 호출

예제

//배열 생성
	let member = [];
	
	//객체를 생성해서 배열에 추가
	member.push({이름:'홍길동',수입:3000,지출:2500});
	member.push({이름:'박문수',수입:5000,지출:1100});
	member.push({이름:'이순신',수입:4000,지출:3600});
	member.push({이름:'김유신',수입:7000,지출:4200});
	//배열의 모든 객체에 메서드 추가
	for(let i in member){
		//잔액을 구하는 메서드 추가
		member[i].getBalance = function(){
			return this.수입 - this.getTax() - this.지출;
		};
		//세금을 구하는 메서드 추가
		member[i].getTax = function(){
			return this.수입 * 0.05;
		};
	}
	//출력
	document.write('이름, 수입, 지출, 잔액, 세금<br>');
	for(let i in member){
		document.write(member[i].이름 + ', ' 
				     + member[i].수입 + ', ' 
				     + member[i].지출 + ', ' 
				     + member[i].getBalance() + ', ' 
				     + member[i].getTax() + '<br>');
	}

결과

이름, 수입, 지출, 잔액, 세금
홍길동, 3000, 2500, 350, 150
박문수, 5000, 1100, 3650, 250
이순신, 4000, 3600, 200, 200
김유신, 7000, 4200, 2450, 350

생성자

new 키워드를 사용해 객체 생성할 수 있는 함수

예제

//생성자 함수 지정
	function Student(name,korean,english,math){
		//속성 지정
		this.이름 = name;
		this.국어 = korean;
		this.영어 = english;
		this.수학 = math;
		
		//메서드 지정
		this.getSum = function(){
			return this.국어 + this.영어 + this.수학;
		};
		
		this.getAverage = function(){
			return this.getSum()/3;
		};
		
		this.toString = function(){
			return this.이름 + ', ' + this.getSum() + ', ' 
			                          + this.getAverage();
		};
	}
	
	//생성자 함수를 이용한 객체 생성
	let student = new Student('홍길동',100,99,98);
	document.write(student);

결과

홍길동, 297, 99

프로토타입

예제

//생성자 함수 지정
	function Student(name,korean,english,math){
		this.이름 = name;
		this.국어 = korean;
		this.영어 = english;
		this.수학 = math;
	}
	
	//프로토타입은 생성자 함수를 사용해 생성된 객체가 공통으로 가지는 공간
	Student.prototype.getSum = function(){
		return this.국어 + this.영어 + this.수학;
	};
	Student.prototype.getAverage = function(){
		return this.getSum()/3;
	};
	Student.prototype.toString = function(){
		return this.이름 + ', ' + this.getSum() + ', ' + 
		       this.getAverage();
	};
	
	//빈 배열 생성
	let students = [];
	
	students.push(new Student('홍길동',99,98,97));
	students.push(new Student('박문수',98,94,96));
	students.push(new Student('장영실',97,95,91));
	
	//출력
	document.write('이름, 총점, 평균<br>');
	for(let i in students){
		document.write(students[i] + '<br>');
	}

결과

이름, 총점, 평균
홍길동, 294, 98
박문수, 288, 96
장영실, 283, 94.33333333333333

window

window 객체는 웹 브라우저의 창(window)을 나타내는 객체

window의 메서드
setTimeout(function,millisecond) :
일정 시간 후에 함수를 한 번 실행
setInterval(function,millisecond) :
일정 시간마다 함수를 반복해서 실행

window의 속성
window.onload : 윈도우가 로드되면 onload 호출


	//윈도우가 로드되면 onload에 대입된 함수를 실행
	window.onload = function(){
		alert('경고창을 닫고 3초 후 이 페이지는 종료됩니다.');
		//3초 후에 함수를 실행
		window.setTimeout(function(){
			//현재 실행 중인 창을 닫음
			window.close();
		},3000);
	};
profile
한다 열심히

0개의 댓글