JAVASCRIPT
[문법] 자바스크립트 객체 : 내장 객체, 사용자 정의 객체, 프로토타입
온풀
2022. 4. 11. 01:03
자바스크립트 객체
1. 내장 객체, 사용자 정의 객체
※ 내장 객체는 생성자 함수가 미리 정의되어(작성되어) 있으며,
사용자 정의 객체는 사용자가 이 생성자 함수를 정의하는 것이다.
2. 사용자 정의 객체
1.객체와 연관된 데이터는 객체가 생성될 때 초기화 되어야 한다 → 생성자라고 부르는 특별한 함수가 객체를 활성화 시키는 데 필요하다.
2.생성자로 객체를 생성하기 위해서는 자바와 마찬가지로 『new』 연산자를 활용하게 된다.
3.생성자(객체)의 이름은 첫 글자를 대문자로 표기한다.
4.생성자 내부에 속성, 함수를 생성하기(정의하기) 위해 『this』 키워드를 사용한다.
5.객체의 멤버인 속성과 함수는 『.(dot)』 연산자로 접근한다.
6.사용자 정의 객체를 만드는 기본 형식 및 구조 (생성자를 구성하는 기본 형식 및 구조)
function 생성자명(인자리스트) ← 생성자명의 첫 글자... 대문자
{
// 속성 정의
this.멤버명 = 인자;
// 메소드(함수) 정의
this.멤버명 = function(인자리스트)
{
// 메소드(함수) 내부 코드
return 리턴값;
};
} 7.프로토타입 : 한 객체가 가지고 있는 속성과 메소드(함수)를 다른 객체(혹은 여러 다른 객체)가 공유할 수 있도록 지원하는 개념
ex) function Car(x, y)
{
this.x=x;
this.y=y;
this.getDistance = function()
{
return (this.x * this.x + this.y * this.y);
};
} 이 코드가 자동차(Car)를 나타내는 객체라고 가정한다.
여기서 『getDistance()』는 원래 위치부터 이동 거리를 계산하는 함수라고 가정한다.
여러 개의 자동차를 사용하는 경우
var c1 = new Car(10, 20);
var c2 = new Car(10, 50);
:
var c100 = new Car(10,42); 이와 같은 구문들을 활용하여 객체를 생성했다면...
객체들마다 『getDistance()』 함수를 가지게 되면서 메모리를 낭비하게 된다.
이 때... 객체들마다 함수를 가지는 것이 아니라 하나의 함수를 만들어 공유하기 위해 프로토타입을 정의하게 된다.
※ 모든 객체는 프로토타입이라는 숨겨진 객체를 포함하고 있다.
『Car』 객체의 프로토타입은 『Car.prototype』이라는 숨겨진 객체를 갖고 있다는 것이다.
function Car(x, y)
{
this.x=x;
this.y=y;
}
Car.prototype.getDistance = function()
{
return (this.x * this.x + this.y * this.y);
};
var c3 = new Car(10, 80);
c3.getDistance();
사용자 정의 객체(생성자)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test036.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
th {text-align: left;}
</style>
<script type="text/javascript">
function objTest()
{
// 확인
//alert("함수 호출");
// 사용자 정의 객체(생성자) 정의
function Blog(b, d)
{
// 객체를 구성하는 속성
this.body=b;
this.date=d;
}
// this가 가리키는 것은 선언하고 있는 객체 자체이다. → Blog(b,d)
// 객체 생성
var blog = new Blog("블로그 개설", "2022-01-14");
// new 예약어는 새로운 객체를 만들 때 사용한다.
// 생성된 객체의 속성(멤버) 접근
var str = blog.body + " / " + blog.date;
// 확인
//alert(str);
/*
var ob1 = new Blog("블로그 개설", "2022-01-14");
var ob2 = new Blog("블로그 레이아웃 구성", "2022-02-10");
var ob3 = new Blog("생성자 이용한 객체 생성", "2022-02-16");
var arr = [ob1, ob2, ob3];
*/
// 위와 같은 구문
// 사용자 정의 객체 여러 개를 배열 구조에 저장
var arr = [ new Blog("블로그 개설", "2022-01-14")
, new Blog("블로그 레이아웃 구성", "2022-02-10")
, new Blog("생성자 이용한 객체 생성", "2022-02-16") ];
str = "<table border='1' class='table'>";
str += "<tr><th>제목</th><th>날짜</th></tr>";
// 변수에 테이블 태그 넣을 수 있구나!
for (var i = 0; i < arr.length; i++)
{
str += "<tr>";
str += "<td>" + arr[i].body + "</td>";
str += "<td>" + arr[i].date + "</td>";
str += "</tr>";
}
str + "</table>";
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>자바스크립트 객체(사용자 정의 객체)</h2>
<div> <!-- 속성 이름, 값 띄어쓰기 가급적 X -->
<input type="button" value="사용자 정의 객체 테스트" class="btn control" onclick="objTest()">
<br><br>
<div id="result"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test037.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
function objTest()
{
// 확인
//alert("확인");
// 사용자 정의 객체
// Test036.html 에서와 마찬가지로 사용자 정의 객체 구성
// 단, 차이점 확인~!!! check~!!!
function Blog(b, d)
{
// 주요 속성 구성
this.body=b;
this.date=d;
// 날짜 출력용 함수 정의
this.userLocalString = function() // 내부 함수 정의하는 형태 check~!!!
{
return d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
};
// 자바스크립트 내장 객체 이용해서 함수 생성
// userLocalString이라는 변수에 함수 생성?
}
// 객체 생성
var blog = new Blog("블로그 개설", "2022-01-14");
var str = blog.body + " / " + blog.date;
// 확인
//alert(str);
// Test036.html 에서와 마찬가지로
// 사용자 정의 객체 여러 개를 자바스크립트 배열 구조에 저장.
// 단, 차이점 확인~!!!
// → 자바스크립트 내장 객체 활용
var arr = [new Blog("블로그 개설", new Date("2022/01/14"))
, new Blog("블로그 레이아웃 구성", new Date("2022/02/10"))
, new Blog("생성자 이용한 객체 생성", new Date("2022/02/16")) ];
/*
○ 자바스크립트에서의 날짜 데이터
Date 객체는 날짜와 시간 작업을 하는 데 사용되는
가장 기본적인 자바스크립트 내장 객체이다.
var now = new Date();
now.toString();
now.toLocaleString();
now.toLocaleDateString();
now.toLocaleTimeString();
now.getFullYear();
now.getMonth()+1; //-- check!!! (월 단위는 자바에서처럼 0부터 시작한다.)
now.getDate();
※ 주의
var userDate1 = new Date("2022/04/08"); // ○
var userDate2 = new Date(2022, 04, 08); // ○
var userDate3 = new Date(Apr, 8, 2022); // ○
var userDate3 = new Date("2022-04-08"); // Ⅹ
var userDate3 = new Date("20220408"); // Ⅹ
*/
str = "<table border='1' class='table'>";
str += "<tr>";
str += "<th>제목</th><th>날짜</th>";
str += "</tr>"
// check~!!!
/*
for (var i = 0; i < arr.length; i++)
{
str += "<tr>";
str += "<td>" + arr[i].body + "</td>";
str += "<td>" + arr[i].date + "</td>";
str += "</tr>";
}
*/
// check~!!!
for (var i = 0; i < arr.length; i++)
{
str += "<tr>";
str += "<td>" + arr[i].body + "</td>";
str += "<td>" + arr[i].userLocalString() + "</td>";
str += "</tr>";
}
str += "</table>";
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>자바스크립트 객체(사용자 정의 객체)</h2>
<div> <!-- 속성 이름, 값 띄어쓰기 가급적 X -->
<input type="button" value="사용자 정의 객체 테스트" class="btn control" onclick="objTest()">
<br><br>
<div id="result"></div>
</div>
</div>
</body>
</html>