** 동영상으로 공부하고 싶은 분은 아래 주소를 클릭해 주세요.
https://www.youtube.com/watch?v=k0HterZEszY
1. 객체의 종류
- 객체는 자바스크립트가 명령가능한 모든 대상을 의미합니다.
1) 객체의 큰 부분
| 종류 | 설명 |
| 기본내장객체 | 기본적인 객체들로 보통 컴퓨터 언어들은 갖고 있는 객체 |
| BOM(Browser Object Model) | 브라우저오브젝트 모델, 브라우저 관련 객체 |
| DOM(Document Object Model) | 문서객체모델, 태그나 컨텐츠 등을 의미하는 객체 |
| 사용자정의객체 | 개발자가 직접적으로 생성하는 새로운 객체 |
2) 기본내장객체
| 종류 | 설명 |
| String | 문자열 객체 |
| Number | 숫자 객체 |
| Math | 수학 객체 |
| Array | 배열 객체 |
| Date | 날짜시간객체 |
- 기본내장객체는 첫 글자를 대문자로 작성하는 것이 규칙
3) BOM객체
| 종류 | 설명 |
| window | 브라우저 창 객체, BOM의 최상위 객체 |
| location | 주소표시줄 객체 |
| screen | 운영체제 화면 객체 |
| history | 방문기록 객체 |
| navigator | 브라우저정보 객체 |
| document | 문서객체 - body태그부분을 의미 |
- BOM은 전부 소문자로 쓰는 것이 규칙입니다.
- DOM은 BOM의 일부이나 매우 중요하기 때문에 따로 나눠서 봅니다.
2. 객체 - Object
- 여기서 말하는 객체는 사용자(즉 개발자)가 만드는 사용자 정의 객체를 의미합니다.
- 그래서 객체 종류를 확인하면 위와 같이 첫 글자가 대문자인 [Object]로 처리됩니다.
1) 객체모델링
- 보통 컴퓨터 언어에서 말하는 객체모델링이란 현실 세계 객체를 컴퓨터객체로 변경하는 것을 의미합니다.
- 예시로 자동차를 들어보도록 하겠습니다.
## Object
현실에서 존재하는 객체입니다.
속성설명
자동차이름 : MINI
자동차모델 : MINI COOPER S
자동차색상 : 빨간색
자동차연비 : 12.3km/ℓ
움직임설명
자동차의 시동을 킨다.
자동차가 움직인다.
자동차가 멈춘다.
자동차의 시동을 끈다.
## javascript 식 문법으로 정리
| Object | Properties | Method |
| car | car.name = 'MINI' | car.start() |
| car.model = 'MINI COOPER S' | car.drive() | |
| car.color = '빨간색' | car.brake() | |
| car.mileage = 12.3 | car.stop() |
## 속성과 메서드
- 속성(properties) : 객체가 갖고 있는 고유한 특징을 기술한 것을 말합니다.
- 메서드(method) : 객체가 갖고 있는 동작 혹은 객체에 주는 명령을 의미합니다.
2) 객체 선언
## 객체 선언 문법
var 객체명 = {
속성명: 값,
메서드: function(){
}
}- JS에서의 속성 : 값이 함수가 아닌 숫자, 문자열, 불, 객체로 이루어진 것입니다.
- JS에서의 메서드 : 값이 함수인 것을 의미합니다.
## 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 객체</title>
<script>
var car = {
name: 'MINI',
model: 'MINI COOPER S',
color: ['red','green','blue'],
mileage: 12.3,
starting: function(x){
if(x == 'on'){
alert('자동차시동이 켜집니다.');
}else if(x == 'off'){
alert('자동차시동이 꺼집니다.');
}
}
}
</script>
</head>
<body>
</body>
</html>
3) 객체 호출
## 문법
//속성호출1
객체명.속성명;
//속성호출2
객체명["속성명"];
//메서드호출
객체명.메서드명();
## 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 객체</title>
<script>
var car = {
name: 'MINI',
model: 'MINI COOPER S',
color: ['red','green','blue'],
mileage: 12.3,
starting: function(x){
if(x == 'on'){
alert('자동차시동이 켜집니다.');
}else if(x == 'off'){
alert('자동차시동이 꺼집니다.');
}
}
}
//속성호출
alert(car.model);
alert(car.color[0]);
//메서드호출
car.starting('on');
</script>
</head>
<body>
</body>
</html>
## 코드 결과
4) this키워드
- this키워드는 함수에서는 함수의 '소유자'를 의미합니다.
- 객체에서는 이 함수를 소유하고 있는 객체를 의미합니다.
- 자세한 내용은 추후에 새로운 챕터에서 따로 공부할 예정입니다.
## 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 객체</title>
<script>
var car = {
name: 'MINI',
model: 'MINI COOPER S',
color: ['red','green','blue'],
mileage: 12.3,
myCar: function(){
alert('내 차이름은 ' + this.name + '입니다');
}
}
car.myCar();
</script>
</head>
<body>
</body>
</html>
- [this.name]부분에 [car.name]을 써도 현재 인식은 잘 됩니다.
- 하지만 객체가 한 개 사용되는 것이 아니라 여러 개 사용되는 경우 선택이 모호해집니다.
- 그래서 this키워드를 쓰는 것이 좋습니다.
## 코드 결과
3. 객체 생성자함수
1) 생성자 함수
- 생성자 함수란 [객체]를 생성할 때 사용하는 함수입니다.
- 여러 개의 통일한 속성을 가지는 객체를 생성하기 위해 필요합니다.
- Protptype을 이용해서 메모리를 절감을 위해서도 필요합니다.
## 선언 문법
function 생성자함수명(){
this.속성 = 값;
}- 생성자함수명은 대문자로 시작하는 것이 관례입니다.
- 이는 함수와 구분 짓기 위해서 그렇습니다.
- 약간 C++이나 JAVA의 클래스(class)처럼 사용된다고 보면 됩니다.
- 하지만 자바스크립트도 클래스 방식이 새롭게 나왔습니다.
## 호출 문법
var 변수명 = new 생성자함수명();- new라는 생성자함수 키워드를 사용해서 객체를 새로운 인스턴스로 생성합니다.
## 예시코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 객체</title>
<script>
function Mini(model, color, mileage){
this.model = model;
this.color = color;
this.mileage = mileage;
this.starting = function(x){
if(x == 'on'){
alert(this.color + '인 ' + this.model + '가 시동이 켜졌습니다.');
}else if(x == 'off'){
alert(this.color + '인 ' + this.model + '가 시동이 꺼졌습니다.');
}
}
}
var johnCar = new Mini('Mini Cooper S','빨간색',12.3);
var janeCar = new Mini('Mini Cooper 5Door','노란색',11.7);
johnCar.starting('on');
janeCar.starting('on');
</script>
</head>
<body>
</body>
</html>
- Mini라는 차를 생성자함수로 생성했습니다.
- 그리고 존의 차와 제인의 차로 각각 생성했습니다.
## 코드 결과
2) Prototype(프로토타입)
- Prototype이란 생성자 함수로 생성한 객체들이 properties(속성)과 method(메서드)를 공유하기 위해 사용하는 객체입니다.
- new를 통해 새롭게 생성한 객체의 속성과 메서드가 복사된 객체만큼 계속 생성되어 메모리를 많이 차지하기 때문에 비효율적입니다.
- 같은 속성과 메서드이기 때문에 메모리를 잡아먹지 않도록, 이를 해결하기 위해 나온 것이 프로토타입입니다.
## __proto__ 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 객체</title>
<script>
function Mini(model, color, mileage){
this.model = model;
this.color = color;
this.mileage = mileage;
this.starting = function(x){
if(x == 'on'){
alert(this.color + '인 ' + this.model + '가 시동이 켜졌습니다.');
}else if(x == 'off'){
alert(this.color + '인 ' + this.model + '가 시동이 꺼졌습니다.');
}
}
}
var johnCar = new Mini('Mini Cooper S','빨간색',12.3);
var janeCar = new Mini('Mini Cooper 5Door','노란색',11.7);
console.log(johnCar);
console.log(janeCar);
</script>
</head>
<body>
</body>
</html>
- 모든 JavaScript객체는 prototype의 속성과 메서드를 상속합니다.
- 동일한 생성자 함수로 생성된 객체들은 내부적으로 [__proto__]라는 속성을 사용하여 생성자 함수에 존재하는 prototype이라는 속성을 참조하여 같은 공간을 공유하고 있습니다.
## 프로토타입으로 빼기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 객체</title>
<script>
function Mini(model, color){
this.model = model;
this.color = color;
}
//공통 주제를 프로토타입으로 빼고 처리
Mini.prototype.mileage = 14;
Mini.prototype.starting = function starting(x){
if(x == 'on'){
alert(this.color + '인 ' + this.model + '가 시동이 켜졌습니다.');
}else if(x == 'off'){
alert(this.color + '인 ' + this.model + '가 시동이 꺼졌습니다.');
}
}
var johnCar = new Mini('Mini Cooper S','빨간색');
var janeCar = new Mini('Mini Cooper 5Door','노란색');
console.log(johnCar);
console.log(janeCar);
</script>
</head>
<body>
</body>
</html>- 마일리지도 14로 공통이라고 보면 바꿀 필요가 없어서 프로토타입으로 뺐습니다.
- 시동을 키는 것도 공통적인 메서드로 뺐습니다.
## 결과 보기
- 보면 전면적으로 호출은 생성자 함수 내부의 코드만 호출이 되고, 나머지는 프로토타입으로 들어가게 됩니다.
- 그러면 호출시 바뀌는 값만 찾기 때문에 메모리 절감이 됩니다.
## 문제
| 학생들의 국어, 영어, 수학점수를 통해 평균을 구하시오. 단, 객체로 생성하시오. |
## 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 객체</title>
<script>
//각각의 학생의 이름과 국어,영어,수학점수는 모두 다르기 때문에 각각 받도록 작성
function Score(name,kor,eng,math){
this.name = name;
this.kor = kor;
this.eng = eng;
this.math = math;
}
//평균은 그 점수로 인한 결과이므로 어떤 학생이든지 간에 수식이 같으므로 메모리를 덜 차지하게 하기 위해 prototype으로 작성
Score.prototype.avg = function avg(){
return "학생이름 : " + this.name + '<br>' + '평균 : ' + ((this.kor + this.eng + this.math) / 3).toFixed(2) + '<br>' + '===============<br>';
}
var student01 = new Score('홍길동',90,80,75);
var student02 = new Score('김철수',100,80,90);
var student03 = new Score('박영희',100,90,100);
document.write(student01.avg());
document.write(student02.avg());
document.write(student03.avg());
</script>
</head>
<body>
</body>
</html>
- 각각의 학생의 이름과 국어, 영어, 수학점수는 모두 다르기 때문에 각각 받도록 작성하였습니다.
- 평균은 그 점수로 인한 결과이므로 어떤 학생이든지 간에 수식이 같으므로 메모리를 덜 차지하게 하기 위해 prototype으로 작성하였습니다.
## 코드 결과
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 11강 자바스크립트 기본내장객체 - Number와 Math - 오쌤의 니가스터디 (0) | 2020.12.02 |
|---|---|
| [JS강좌] 10강 자바스크립트 기본내장객체 - String (0) | 2020.12.01 |
| [JS강좌] 8강 자바스크립트 내장함수 - 오쌤의 니가스터디 (2) | 2020.11.29 |
| [JS강좌] 7강 자바스크립트 함수 - 오쌤의 니가스터디 (0) | 2020.11.27 |
| [JS강좌] 6강 자바스크립트 반복문 - 배열과 for in문 - 오쌤의 니가스터디 (2) | 2020.11.27 |
