[자바스크립트] 객체 / 클래스 / 프로토타입

1. 객체

• 프로그래밍에서 ‘객체’는 데이터를 저장하고 처리하는 기본 단위
• 자바스크립트에서 객체는 관련된 정보와 동작을 함께 모아 놓은 것
• 내장 객체 : 프로그래밍을 할 때 자주 사용하는 요소들을 자바스크립트에서 미리 정의해 놓은 객체

문서 객체 모델(DOM)
- 웹 문서 자체도 객체
- 웹 문서에 포함된 이미지, 링크, 텍스트 필드 등은 모두 이미지 객체, 링크 객체, 폼 객체처럼 각각 별도의 객체
- 관련 포스팅 : [자바스크립트] DOM(문서 객체 모델)

브라우저 객체 모델(BOM)
- 웹 브라우저에서 사용하는 정보도 객체로 지정되어 있다.

• 사용자 정의 객체 : 필요할 때마다 사용자가 만들어 사용하는 객체

 

객체 복사

원시 유형 자료 복사
- 값을 복사함
- 복사한 자료의 값을 변경하면 원래 자료의 값은 그대로임

객체 복사
- 주소를 복사함
- 복사한 자료의 값을 변경하면 원래 자료의 값도 변경됨

 

객체의 구조

• 여러개의 프로퍼티를 갖고있음
  • 프로퍼티 중에는 메서드도 포함
  • 프로퍼티의 구조는 '키:값' 형태
• 객체 생성 시 객체 이름 다음에 중괄호({})를 사용하고, 중괄호 사이에 ‘키 : 값’ 형식으로 필요한 프로퍼티를 나열함
  • 객체의 키는 문자열이나 숫자, 심벌만 사용할 수 있고, 각 프로퍼티는 쉼표(,)를 넣어 구분

객체명 { 
	키1 : 값1, 
	키2 : 값2, 
	…… 
}

 

 

객체 관련 조작법

객체 선언

let book1 = {
	title : "웹 표준의 정석",
	pages : 648 // 만약 변수와 프로퍼티 이름이 같다면 단축 가능(예 - page : page인 경우 page로)
}

book1   // {title : "웹 표준의 정석", pages : 648 }

• 빈 객체를 만들고, 이후에 프로퍼티를 추가해줄수도 있음

/*빈 객체 만들기*/
//방법 1
let book2 = { } 
//방법 2
let book2 = new Object()

 

객체 프로퍼티 접근

book1.title    // 점 표기법. 프로퍼티키에 큰따옴표 없음 
book1["title"] // 괄호 표기법. 프로퍼티키에 큰따옴표 있음

 

객체 프로퍼티 수정 및 추가

/* 수정 */
book1.pages = 50 
book1 // {title: "웹 표준의 정석", pages: 50 }

/* 추가 */
book1.author = "고경희"
book1  // {title: "웹 표준의 정석", pages: 50, author: "고경희"}

 

객체 중첩

• 객체 안에 또 다른 객체를 넣을 수 있음

let student = {
	name : "Doremi",
        score : {
            history : 85,
            science : 94,
            average : function () {
                return (this.history + this.science) / 2
            }
	}
}
student.score.history // 85
student.score.average() // 89.5

 

메서드 정의

• 메서드(method) : 객체의 프로퍼티 중 객체의 동작을 지정하는 함수
• 메서드를 선언하는 방법은 일반적인 함수를 선언하는 것과 비슷함

메서드명 : function() {
	……
}

//기본
let book3 = {
    title : "점프 투 파이썬",
    pages : 360,
    buy : function () {
    	console.log("이 책을 구입했습니다.");
    }
}
 
//ES6
let book3 = {
    title : "점프 투 파이썬",
    pages : 360,
    buy () {
    	console.log("이 책을 구입했습니다.");
    }
}

 

• this : 메서드에서 객체 안에 있는 프로퍼티값을 사용할 때, 현재 객체를 가리키는 예약어

let book4 = {
    title : "Javascript",
    pages : 500,
    author : "고경희",
    done : false,
    finish : function() {
        this.done=== false ? console.log("읽는 중") : console.log("완독");
    }
}
book4.finish()  // "읽는 중"

 

객체의 키와 값에 접근하기

for…in 사용하기

• for...in 문을 사용하면 객체의 키만 가져올 수 있다.

let bag = {
    type : "backpack",
    color : "blue",
    size : 15
}
for(key in bag) {
    console.log(`${key}`); 
    // type, color, size
}
for(key in bag) {
    console.log(`${key} : ${bag[key]}`); 
    // type : backpack, color : blue, size : 15
}

 

keys(), values(), entries() 메서드 사용하기

• keys() : 객체의 키만 가져옴

let book1 = {
    title : "웹 표준의 정석",
    pages : 648, 
    buy : function () {
        console.log("이 책을 구입했습니다.");
    }
}
let keys = Object.keys(book1); // 키만 가져오기
console.log(keys); // ['title', 'pages', 'buy']
let values = Object.values(book1); // 값만 가져오기
console.log(values); // ['웹 표준의 정석', 648, ƒ]
let entries = Object.entries(book1); // 키와 값 함께 가져오기
console.log(entries); // [Array(2), Array(2), Array(2)]

 

 

---

2. 클래스

생성자 함수

• 객체마다 반복되는 프로퍼티와 메서드가 있는 경우, 객체 틀을 미리 정의해 놓고 그 틀으로 객체를 만들 수 있음
• 객체의 틀을 만들 때 사용하는 함수를 ‘생성자 함수’라고 함
• 생성자 함수를 사용해서 찍어 내는 객체를 ‘인스턴스’ 또는 ‘인스턴스 객체’라고 부름

 

생성자 함수를 사용해 객체 정의하기

• 생성자 함수는 일반적인 함수와 같은 형식
• 함수 이름의 첫 글자는 보통 대문자 작성함
• 함수 내부에선 this를 사용함

/* 생성자 함수로 객체 정의하기 */
function Book(title, pages, done = false) {
	this.title = title;
	this.pages = pages;
	this.done = done;
	this.finish = function () {
		let str = "";
		return str;
	}
}

/* 인스턴스 객체 만들기 */
let book1 = new Book("웹 표준의 정석", 648, false);
let book2 = new Book("점프 투 파이썬", 360, true);
console.log(`${book1.title} - ${book1.pages}쪽 - ${book1.finish()}`);
console.log(`${book2.title} - ${book2.pages}쪽 - ${book2.finish()}`);

 

클래스

• 자바스크립트의 클래스는 정확한 클래스 개념이 아님
• 생성자 함수를 좀 더 표현하기 쉽게 바꾼, 신택틱 슈거(syntactic sugar)임

/* 클래스로 객체 정의하기 */
class Book2 {
    constructor(title, pages, done) {
        this.title = title;
        this.pages = pages;
        this.done = done;
    }
    finish() {
        let str = "";
        this.done === false ? str = "읽는 중" : str = "완독";
        return str;
    }
}

/* 인스턴스 객체 만들기 */
let book1 = new Book2("웹 표준의 정석", 648, false);
let book2 = new Book2("점프 투 파이썬", 360, true);
console.log(`${book1.title} - ${book1.pages}쪽 - ${book1.finish()}`);
console.log(`${book2.title} - ${book2.pages}쪽 - ${book2.finish()}`);

 

클래스 상속

class BookC {
    constructor(title, price) {
        this.title = title;
        this.price = price; 
    }
    buy() {
        console.log(`${this.title}을(를) ${this.price}원에 구매하였습니다.`); 
    }
}
const book1 = new BookC("자료 구조", 15000);
book1.buy();

class TextbookC extends BookC {
    constructor(title, price, major) {
        super(title, price); // 기존 클래스의 프로퍼티 재사용
        this.major = major;   // 새로운 프로퍼티
    }
    buyTextbook() {   // 새로운 메서드
        console.log(`${this.major} 전공 서적, ${this.title}을 구매했습니다.`);
    }
}

• super : 상위 객체 (해당 객체가 상속 받은 부모 객체를 가르킴)
• sub : 하위 객체 (해당 객체가 상속 해준 자식 객체를 가르킴)

 

 

---

3. 프로토타입

• 자바스크립트 객체에서 프로토타입은 객체를 만들어 내는 원형
• 모든 객체는 프로토타입을 가지고 있고 프로토타입으로 부터 프로퍼티와 메서드를 상속받음

[[Prototype]] 속성
- 객체가 어디에서부터 온 것인지 알려 주는 속성
- 예시로, 배열의 프로토타입은 Array 객체이며 Array 객체의 프로퍼티와 메서드를 상속받음
- 이때 Array 객체를 해당 배열의 프로토타입(prototype)이라고 함

 

 

생성자 함수와 프로토타입 객체

• 생성자 함수를 선언하는 순간자동으로 프로토타입 객체가 만들어짐

 const Book = function (title, pages, done) {
 	……
 }
 const book1 = new Book("웹 표준의 정석", 648, false);

Book.prototype // Object 객체

전체 구조

인스턴스 객체 book1의 프로토타입은 무엇일까?
- book1 의 프로토타입은 객체인데, 해당 객체는 생성자 함수 Book()을 통해 만들어진 객체임
- book1 객체의 프로토타입은 Book 프로토타입 객체
- book1 객체에서 Book() 함수에 있는 pages 프로퍼티를 사용할 수 있음

 

__proto__와 prototype

__proto__ 프로퍼티
- 모든 객체가 가지고 있는 프로퍼티
- 인스턴스 객체에서 자신에게 연결된 프로토타입 객체를 확인할 때 사용함

prototype 프로퍼티
- 모든 객체가 가지고 있는 프로퍼티
- 프토토타입 객체에서 자기 자신을 확인할 때 사용함
- 이 객체가 어떤 생성자 함수를 사용했는지, 어떤 프로퍼티와 메서드를 가지는지 등의 정보를 확인할 수 있음

 

프로토타입 메서드

• 생성자 함수 밖에서 프로토타입을 사용해 새로운 메서드를 정의할 수 있음

function newBook(title, pages, done) {
    this.title= title;
    this.pages= pages;
    this.done = done;
}
newBook.prototype.finish= function() {
    this.done === false ? str = "읽는 중" : str = "완독";
    return str;
}
const nBook1 = new newBook("웹 표준의 정석", 648, false);
const nBook2 = new newBook("점프 투 파이썬", 360, true);

전체 구조

 

프로토타입 상속

기존 객체명.call(this, 프로퍼티)
Object.setPrototypeOf(하위 객체, 상위 객체)

function Book (title, price) {
    this.title= title;
    this.price= price;
}
Book.prototype.buy= function() { 
    console.log(`${this.title}을(를) 
    ${this.price}원에 구매하였습니다.`); 
}

function Textbook(title, price, major) {
    Book.call(this, title, price); // Book 객체 재사용
    this.major= major;    // 새로운 프로퍼티
}
Textbook.prototype.buyTextbook= function() {
    console.log(`${this.major} 전공 서적, ${this.title}을 구매했습니다.`);
}
Object.setPrototypeOf(Textbook.prototype, Book.prototype);

 

 

 

참고 포스팅 : [Javascript] 프로토타입 이해하기