Javascript : Object(객체)
2023. 3. 15. 17:13ㆍjavascript
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>JavaScript - object</title>
<link rel="stylesheet" href="../../css/reset.css">
<link rel="stylesheet" href="../../css/dark.css">
<style>
</style>
</head>
<body>
<pre><script>
// 배열(array)
// - 같은 유형의 여러 데이터들의 집함
// → 이름들, 다수의 점수 ...
// - 배열 리터럴([])를 이용해서 생성하고,
// 각 원소(item)에 접근하기 위해 인덱스(index)를 이용
// - 배열은 객체 중 일부
// 즉, 배열의 자료형은 객체(object)
var array = [10, 20, 30, 40];
document.writeln("typeof array = " + (typeof array));
console.log(array);
// 객체(object)
// - 특정 대상(사물)을 표현하기 위한 여러 데이터들과
// 해당 데이터들을 다루기 위한 기능들의 집합
// → TV, 사용자(user), 학생 ...
// - 객체 리터럴({})를 이용해서 생성하고,
// 각 속성(property)에 접근하기 위해 키(key)를 사용
// → 속성의 키(key)는 식별자 형태 또는 문자열 형태로 지정할 수 있다.
// 일반적으로는 식별자 형태로 작성
// 객체가 가지는 데이터와 기능을 가지기 위해서는
// 데이터를 저장할 변수와 기능을 저장할 함수가 필요
// → 객체의 데이터를 저장할 키(key) = 속성(property)
// → 객체의 함수를 저장할 키(key) = 메서드(method)
// 객체 생성
var obj = {
// 속성(property)
// key : value
value1 : 300,
"value2" : 400,
"item-a" : "apple", // → itemA
// 메서드(method)
// - 함수의 본체만 저장되면 되기 때문에 익명 함수로 정의
// key : function() {...}
hello : function() {
document.writeln("Hello World!");
}
}
// 객체의 식별자와 인덱스 연산자([])를 통해 접근
// - 인덱스 연산자 내에는 문자열 형태의 키(key)가 들어가야한다.
// - 식별자 형태로 작성하면 변수로 처리된다.
// document.writeln("obj[value1] = " + obj[value1]);
document.writeln("obj[\"value1\"] = " + obj["value1"]);
document.writeln("obj[\"value2\"] = " + obj["value2"]);
document.writeln("obj[\"item-a\"] = " + obj["item-a"]);
obj["hello"](); // 실사용 잘 않함
// 객체의 식별자와 속성 접근 연산자(.)를 통해 접근
// - 식별자 형태의 키(key)를 작성하여 지정
// - 객체의 키(key) 가 식별자 형태로 표현이
document.writeln("obj.value1 = " + obj.value1);
document.writeln("obj.value2 = " + obj.value2);
// document.writeln("obj.item-a = " + obj.item-a);
obj.hello();
</script></pre>
<pre><script>
var userName = "Not User";
var userAge = -1;
// 사용자(User)를 표현하기 위한 객체
var user = {
// 속성
userName : "홍길동",
userAge : 21,
// 메서드
hello : function() {
// 자신의 이름과 나이를 출력
// 메서드 내에서 식별자를 지정하면
// 자신의 속성이 아닌 변수에 접근한다.
document.writeln("My name is " + userName);
document.writeln("My age is " + userAge);
document.writeln();
// 메서드 내에서 객체 밖의 변수에 접근하듯이
// 객체의 식별자를 통해 객체에 접근이 가능하다.
document.writeln("My name is " + user.userName);
document.writeln("My age is " + user.userAge);
document.writeln();
// 객체의 식별자가 바뀌거나 또는
// 객체의 식별자 없이 객체를 생성하는 경우
// 객체의 식별자를 통해 속성에 접근할 수 없게 된다.
// → 이를 해결하기 위한 것이 'this' 키워드
// this 키워드
// - 메서드 본체에서 사용하며, 메서드를 포함하는 객체를 의미
// - 즉, '자기 자신'을 의미하는 키워드
// - 식별자를 모르거나, 식별자가 없어도 this 를 통해
// 속성과 메서드에 접근할 수 있다.
document.writeln("My name is " + this.userName);
document.writeln("My age is " + this.userAge);
}
}
document.writeln("user.userName = " + user.userName);
document.writeln("user.userAge = " + user.userAge);
user.hello();
</script></pre>
<pre><script>
// 객체를 생성했을 당시에 선언된 속성과 메서드 뿐만 아니라
// 객체 생성한 이후에도 새로운 속성과 메서드를 추가할 수 있다.
// 학생을 표형하기 위한 빈 객체
var std = { };
// 객체 std 에 새로운 속성과 메서드를 추가
std.name = "Harry";
std.age = 21;
std.hello = function () {
document.writeln("My name is " + std.name);
document.writeln("My age is " + std.age);
// 해당 함수는 객체 std 의 hello 에 저장되며
// 해당 객체의 속성에 접근하려면 this 키워드를 이용
document.writeln("My name is " + this.name);
document.writeln("My age is " + this.age);
}
std.hello();
document.write("<hr>");
// 새로운 학생 객체 생성
var std2 = {};
std2.name = "Poter";
std2.age = 20;
// 객체 std 의 hello 에 저장된 함수 코드를
// 객체 std2 의 hello 에 복사
std2.hello = std.hello;
std2.hello();
</script></pre>
</body>
</html>
'javascript' 카테고리의 다른 글
| Javascript : Document (0) | 2023.03.15 |
|---|---|
| Javascript : Window(window 객체) (0) | 2023.03.15 |
| Javascript : Function(함수)2 (0) | 2023.03.15 |
| Javascript : Function(함수)1 (0) | 2023.03.15 |
| Javascript : Loop(반복문)3 (0) | 2023.03.15 |