.png)
🤔 객체(Object) ?
자바스크립트(JavaScript)는 객체기반의 스크립트 언어이며 키(key)와 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다.
프로퍼티의 값으로 함수가 올 수 있는데, 이러한 프로퍼티를 메소드(method)라고 한다.
예제
var cat = "나비"; // 일반적인 변수의 선언
// 객체도 많은 값을 가지는 변수의 하나임.
var kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 };
cat // 나비
kitty.name // 나비
자바스크립트에서는 숫자, 문자열, boolean, undefined 타입을 제외한 모든 것이 객체이다.
하지만 숫자, 문자열, boolean과 같은 원시 타입은 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 된다.
객체 프로퍼티 참조
자바스크립트에서 객체의 프로퍼티를 참조하는 방법은 다음과 같다.
객체이름.프로퍼티이름
또는
객체이름["프로퍼티이름"]
var person = {
name: "홍길동", // 이름 프로퍼티를 정의함.
birthday: "030219", // 생년월일 프로퍼티를 정의함.
pId: "1234567", // 개인 id 프로퍼티를 정의함.
fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.
return this.birthday + this.pId;
}
};
person.name // 홍길동
person["name"] // 홍길동
객체 메소드 참조
자바스크립트에서 객체의 메소드를 참조하는 방법은 다음과 같다.
객체이름.메소드이름()var person = {
name: "홍길동",
birthday: "030219",
pId: "1234567",
fullId: function() {
return this.birthday + this.pId;
}
};
person.fullId() // 0302191234567
person.fullId; // function () { return this.birthday + this.pId; } 객체 생성
1. 리터럴(literal) 방식
var 객체이름 = {
프로퍼티1이름 : 프로퍼티1의값,
프로퍼티2이름 : 프로퍼티2의값,
...
};
각각의 프로퍼티는 이름과 값을 콜론(:)으로 연결하고, 쉼표(,)를 사용해 다른 프로퍼티와 구분한다.
var kitty = {
name: "나비",
family: "코리안 숏 헤어",
age: 1,
weight: 0.1
};
document.write("우리 집 새끼 고양이의 이름은 " + kitty.name + "이고, 종은 " + kitty.family + "입니다.");2.생성자(constructor) 방식
new 연산자를 사용하여 객체를 생성하고 초기화 할 수 있다.
이때 사용되는 메소드를 생성자(constructor)라고 하며, 이 메소드는 새롭게 생성되는 객체를 초기화하는 역할을 한다.
var day = new Date(); // new 연산자를 사용하여 Date 타입의 객체를 생성함.
document.write("올해는 " + day.getFullYear() + "년입니다.");this 키워드
자바스크립트에서 this 키워드는 해당 키워드가 사용된 영역을 포함하고 있는 객체를 가르킨다.
매소드 내부에서 사용된 this 키워드는 해당 메소드를 포함하고 있는 객체를 가리킨다.
또한, 객체 내부에서 사용된 this 키워드는 객체 그 자신을 가리킨다.
function Dog(color, name, age) {
this.color = color;
this.name = name;
this.age = age;
}
var myDog = new Dog("흰색", "마루", 1); //객체를 생성과 동시에 초기화
Prototype
자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다.
모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속 받는다.
이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(protype)이라고 한다.
function Dog(color, name, age) {
this.color = color;
this.name = name;
this.age = age;
}
var myDog = new Dog("흰색", "마루", 1);
myDog.family = "시베리안 허스키"; // 품종에 관한 프로퍼티를 추가함.
myDog.breed = function() { // 털색을 포함한 품종을 반환해 주는 메소드를 추가함.
return this.color + " " + this.family;
}
document.write("우리 집 강아지는 " + myDog.breed() + "입니다.");위 예제에서 새롭게 추가된 breed() 메소드는 오직 myDog 인스턴스에만 추가 된다.
이미 생성된 다른 Dog 객체나 차후에 생성되는 어떠한 다른 Dog 객체에도 추가 되지 않는다.
Prototype 프로퍼티
prototype 프로퍼티를 이용하면 현재 존재하고 있는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가할 수 있다.
function Dog(color, name, age) {
this.color = color;
this.name = name;
this.age = age;
}
// 현재 존재하고 있는 Dog 프로토타입에 family 프로퍼티를 추가함.
Dog.prototype.family = "시베리안 허스키";
// 현재 존재하고 있는 Dog 프로토타입에 breed 메소드를 추가함.
Dog.prototype.breed = function() {
return this.color + " " + this.family;
};
var myDog = new Dog("흰색", "마루", 1);
var hisDog = new Dog("갈색", "콩이", 3);
document.write("우리 집 강아지는 " + myDog.family + "이고, 친구네 집 강아지도 " +
hisDog.family + "입니다.");
document.write("우리 집 강아지의 품종은 " + myDog.breed() + "입니다.<br>");
document.write("친구네 집 강아지의 품종은 " + hisDog.breed() + "입니다.");
