JavaScript(ES6)|클래스와 오브젝트의 차이점, 객체지향 언어 클래스 정리

class person{

name;

age;

speak();

 

name; age; ->속성 (field)

speak(); -> 행동 (method)

 

클래스는 연관있는 데이터들을 묶어 놓은 것.

간혹 행동(method)없이 속성 (field)만 들어있는 경우도 있음.

이런것을 데이터 클래스라고 부름.

 

클래스 안에서도 내부적으로 보여지는 변수와

밖에서 보일 수 있는 변수들을 나누어서 

이런것들을 캡슐화라고 함.

클래스를 이용하여 상속과 다양성이 일어날 수 있음.

이런 모든 것들이 가능한것이 객체지향 언어.

 

 

class

 :(틀, 청사진, 템플릿이라고도 불림/ 붕어빵 틀)

-template

-declare once

-no data in

 

object

:(실제로 클래스에 데이터를 넣을 수 있는 것 / 팥, 크림, 등등..)

-instance of a class

-created many times

-data in

 

 

1. Class declarations

클래스 선언 방식.

class Person{

키워드  클래스이름 지정

    constructor(name, age){

   생성자(오브젝트를 만들때 필요한 데이터를 전달해줌)

        this.name=name;

        this.age=age;

전달된 데이터를 바로 할당.

    }

    speak(){

        console.log(`${this.name}: hello!`);

                            클래스에 있는 name을 출력.

    }

 

Object 생성

새로운 오브젝트를 만들때는 new라는 키워드를 사용함.

const ellie=new Person('ellie', 20);

 

constructor(name, age) 이런 생성자를 만들어 줬기때문에

그에 맞게 ('ellie', 20);이렇게 작성해 줌.

 

말하는 메소드도 설정해 줬기때문에

ellie.speak();를 호출할 수 있음.

 

 

 

2.Getter and setters

유저 클래스를 만들고 성, 이름, 나이를 지정해준 뒤

새로운 오브젝트에 스티브 잡스 데이터를 입력한다.

이때 만약 나이를 -1이라고 잘못 작성을 해도 나이가 그대로 -1로 출력됨.

 

이런걸 대비하여 방어적인 자세를 취하는 것이 게터와 세터.

 

get으로 값을 리턴하고, set으로 값을 설정함.

set은 값을 설정하기 때문에 value를 받아와야 함.

 

그런데 이렇게 작성하면 콜스택 에러가 나옴.

이유는 this.age = age;에서

메모리에 있는 값을 가져오는 것이 아니라 겟에있는 age와

셋에 있는 value를 가져오기 때문에 무한으로 반복됨.

 

이것을 해결하기 위해서는 필드에 get, set의 age이름을 다르게 해주는 방법이 있다.

그 후에 나이에 마이너스 값을 입력하면 경고 메시지를 띄워준다.

 

경고 메시지가 공격적이라면, 조금 더 젠틀하게 

value가 -(마이너스)라면 0을 쓰고 아니면 지정된 value를 쓰겠다는 코드를 작성하면 됨.

 

**필드에는 _age로 _가 있지만,

console.log(user1.age); 이것 처럼 .age라고 호출하거나

this.age = age;이렇게 .age에 값을 할당할 수 있는 이유는

내부적으로 게터와 세터를 이용하기 때문이다.

 

 

 

 

3.Fields (public, private)

constructor(생성자)를 쓰지않고 필드를 정의 할 수 있는데

그냥 정의하게 되면 퍼브릭한 필드로 외부에서 접근이 가능하고,

#기호를 붙이게 되면 클래스 내부에서만 사용가능한 프라이빗한 필드.

 

프라이빗 필드는 클래스 내부에서만 값이 보여지고 접근이 가능함.

클래스 외부에서는 읽을수도, 변경할 수도 없음.

 

 

4.Static properties and methods

class안에 있는 필드와 메소드들은 새로운 오브젝트를 만들때마다

그대로 복제 되어서 값만 지정된 값으로 변경이 되어서 만들어 짐.

 

이런 오브젝트와 데이터에 상관없이, 클래스가 가지고 있는 고유한 값과

동일하게 반복적으로 사용되어지는 메소드가 있을 수 있는데

그런것들을 static이라는 키워드를 이용해서 붙이면 오브젝트에 상관없이

클래스 자체에 연결되어짐.

 

 

원래같으면

console.log(article1.publisher); 이렇게 작성하여 호출했을텐데

사진과 같이 undefined가 나옴. 

이유는 static은 오브젝트마다 할당되어지는 것이 아니라 

클래스 자체, 즉 Article이라는 클래스 자체에 붙어 있기 때문이다.

 

때문에 class로 바꾸니까 제대로된 값이 출력되는 것을 볼 수 있음.

 

static함수를 호출할때도 class 이름을 이용하여 호출하면 출력이 됨.

 

*타임 스크립트를 사용할때

들어오는 데이터에 상관없이 공통적으로 클래스에서 쓸 수 있다면

static을 사용하여 메모리 사용을 줄일 수 있다.

 

 

 

5.Inheritance

Shape이라는 클래스를 만들어 놓고

Rectangle의 클래스를 만들때 extends의 키워드를 이용하면

Shape의 fields와 method가 자동적으로 포함됨.

 

이렇게 적용된 것을 볼 수 있다.

 

 

 

도형의 넓이를 구하는 getArea 함수를 호출할수도 있는데,

이때 삼각형의 넓이는 일반 넓이와 다르기때문에

함수를 재정의 해야한다.(이것을 오버라이딩이라고 함)

 

오버라이딩을 하면 원래 있던 메소드는 호출이 되지 않는데,

원래 있는 메소드도 같이 호출하고 싶을때는 supe을 부모에 사용한다.

 

 

6.Class checking: instanceOf

instanceOf는 왼쪽에 있는 오브젝트가 오른쪽에 있는 클래스의 instance인지 아닌지 출력해줌.

 

console.log(triangle instanceof Object);가 true인 이유는

JS의 모든 오브젝트는 Object의 instance임.

 

 

 

**오브젝트에 관한 좋은 페이지**

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

JavaScript reference - JavaScript | MDN

자바스크립트 내부에 포함되어 있는 오브젝트는 어떤게 있는지 카테고리별로 볼 수 있다.