본문 바로가기
TIL

class -instance와 object의 차이-

by 은지:) 2022. 7. 24.
728x90
반응형

 

 

 

class

 

 

클래스는 객체지향 프로그래밍의 핵심이다.

프로그램을 객체로 구성하고 객체들 간에 서로상호 작용하도록 하는 방법이다.

 

js는 객체지향 중심 언어는 아니지만 (prototype 타입 기반 객체 지향 언어이다) class, 객체, 객체 지향은 중요한 주제이다.

 

class는 객체(object)를 찍어내는 틀을 의미하고 object는 말 그대로 사물을 뜻한다.

이때 객체는 특정 로직을 갖고 있는 행동(method(메서드, 객체 안의 함수))과 변경 가능한 상태(변수)를 가진다.

원하는 구조의 객체 틀을 짜놓고 비슷한 모양의 객체를 공장처럼 찍어낼 수 있다.

 

(css 와의 class는 전혀 다른 개념!)

 

 

 

 

 

 

instance와 object의 차이

 

 

class 는 object 를 찍는 틀이다.

그렇다면 instance 와 object의 차이는 무엇일까요?

 

이는 찾아보니 사람들마다 말이 다르다.

인스턴스와 객체는 같지만 관계적인 측면에서 이야기할 때 인스턴스를 쓴다고하고

다른 곳에서는 메모리 상에 할당 되어야만 인스턴스라 한다.

여기저기 찾아보며 정의하기 어려워 머리 아팠는데 서치한 결과는 👇이것이다

 

object 는 소프트웨어 세계에 구현할 대상이고
이를 구현하기 위한 것이 class 이며
설계도에 따라 소프트웨어에 구현된 실체가 instance 이다.

 

 

객체는 현실의 대상과 비슷하여 상태와 행동 등을 가지지만 소프트웨어 관점에서는 그저 concept 이다.

객체를 구현하기 위해서는 콘셉 이상으로 사고하여 구현해야해, 이것을 위한 설계도로 class를 작성한다.

설계도를 바탕으로 객체에 실체화 한 것이 바로 instance 인 것! 실체화된 인스턴스는 메모리에 할당된다.

 

 

 

instance와 object의 차이 출처:

 https://cerulean85.tistory.com/149

 

 

 

 

 

+

 

인스턴스화(instantiate) : class 로 object를 생성하는 과정

분류(classification) : 추상적, 객체의 공통적 속성을 묶은 것

 

 

 

 

 

 

class의 method 접근

 

let ray = {  
  name: 'Ray',  
  price: 2000000,   
  getName: function() {  
    return this.name;  
  },   
  getPrice: function() {  
    return this.price;  
  },  //객체 내부에서 해당 프로퍼티에 접근하려는 것. 그래서 this 사용
  applyDiscount: function(discount) {  
    return this.price * discount;   
  } 
}

 

 

 

 

👇 getPrice 라는 함수는 호출 할 때

const rayPriceByFunction = ray.getPrice();
console.log('함수로 접근 => ' +rayPriceByFunction);

 

getPrice 메서드는 객체 내부의 'price : 2000000' 값에 접근하는 함수기 때문에 this 키워드를 사용했다.

그래서 getPrice 메서드에서 this.price 로 price 키에 접근할 수 있었다.

결과값 -> 2000000

 

 

 

 

 

 

💡 만약 새로운 차가 출시되어 객체를 추가해야하는데 프로퍼티를 똑같이 구성해야한다면?

 🙆‍♀️ 이때 클래스를 만들어 쓰면 된다

 

 

 

 

 

 

생성자 (constructor)

 

객체와 클래스의 문법은 비슷하지만 둘의 가장 큰 차이는 constructor 이다.

 

class Car { //Car는 class 이름이다. 항상 대문자로 시작하고 CamelCase로 작성
  constructor(name, price) { // 두 개의 인자를 받음
    this.name = name; // 여기서 this는 해당 instance를 의미 
    this.price = price;
  }
}
// 클래스 내에서 name,price와 같이 변경 가능한 상태값이자 class내의 어디에서나 쓸 수 있는 변수 : 멤버 변수
// Car class 는 새로운 instance를 생성할 때마다 constructor() 메서드를 호출된다.
const morning = new Car('Morning', 20000000);
// 인스턴스는 class 이름에 new를 붙여서 생성함
// new 키워드는 constructor()메서드를 호출하고 새로운 instance를 return 해줌

 

👆 class 를 통해 객체 생성 -> 인스턴스

 

'Morning' 이라는 string 과 200000 이라는 Number를 Car 생성자에 넘겨주었고

name, price property에 각자의 값이 할당되었다.

 

 

 

 

 

 

 

메서드(Methods)

 

: 함수를 객체가 프로퍼티 값으로 갖고 있는 것

 

 

 

 

 

 

 

class Car 는 부모

spaceship 에 넣은 new Car 는 자식이다

 

인자는 (name, price)만 받지만 안에 있는 메서드들도 상속되기 때문에 new Car에도 쓸 수 있음!

console.log(spaceship.changeDepartment('삼성점') 으로 바꾸어 준 다음에 다시 콘솔을 찍어봤더니 삼성점으로 바꾸어졌다 :)

 

 

 

 

 

 

 

 

728x90
반응형

'TIL' 카테고리의 다른 글

인스타 login page 클론 Day1  (0) 2022.07.28
http 란?  (0) 2022.07.28
js 용어 정리, forEach, object  (0) 2022.07.24
arrow function  (0) 2022.07.23
js Event관련  (0) 2022.07.23

댓글