08
20
프로그래밍 언어/Javascript

클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리

728x90

class ?

1) 연관있는 데이터를 한데 묶어놓는 역할

2) field와 method가 종합적으로 묶여있음

3) field로만 구성된 class : data class

4) 캡슐화 : 클래스안에서 내부적으로 보여지는 변수와 바깥에서 보일 수 있는 변수들을 나누는 것

5) 클래스를 이용하여 상속과 다형성이 일어날 수 있음

6) ES6에 추가됨

class person
{
       name; //속성(field)
       age; //속성(field)
       speak(); //행동(method)
}
class? object?
1) template(틀) 1) 클래스를 이용하여 실제 데이터를 넣어서 만드는 것
2) 클래스 자체에는 데이터가 들어있지 않으며, 틀만 정의해 놓는 것 2) 클래스를 이용하여 새로은 instance를 생성하면 object 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" consent="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="class.js"></script>
    </head>
    <body></body>
</html>

1. Class 선언

class Person
{
    //생성자
    constructor(name, age)
    {
        //fields
        this.name = name;
        this.age = age;
    }

    //methods
    speak()
    {
        //this : 생성된 오브젝트를 가르키는 것
        console.log(`${this.name}: hello!`);
    }
}
//Object생성
//새로운 object를 만들때는 new 키워드 사용
const ellie = new Person('ellie', 20); //새로운 object 생성
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();

출력 결과

2. Getter and Setter

class User
{
    //생성자
    constructor(firstName, lastName, age)
    {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    //get 키워드를 이용하여 값을 return
    get age()
    {
        return this._age;
    }

    //set 키워드를 이용하여 값을 설정 , set은 값을 설정하기 때문에 파라미터를 받아와야함
    set age(value)
    {
        //0보다 작은 나이는 없기 때문에 0보다 작은 나이가 입력된 경우 0으로 바꾸어줌
        this._age = value < 0 ? 0 : value; //value가 0보다 작으면 0 출력 아닌 경우에는 value 출력
    }
    
    // 1) age라는 getter를 정의하는 순간 this.age = age에서 this.age는 getter를 호출하게 됨
    // 2) setter를 정의하는 순간 this.age = age에서 = age(값 할당)는 메모리의 값을 가져오는것이 아닌 setter를 호출하게 됨
    // 3) call stack이 다 찼다는 경고가 뜸
    // 4) 위의 사항을 방지하기 위해서 getter와 setter안에서 사용되는 변수의 이름을 조금 다르게 설정해야함
    // 5) 보편적으로 _를 이용하여 변수의 이름을 변경 age -> _age
}

const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);

출력 결과

3. Fields (pulic, private)

class Experiment
{
    //생성자를 쓰지 않고 필드를 정의
    publicField = 2; //그냥 정의하면 public (외부에서 접근이 가능)
    #privateField = 0; //#기호를 붙이면 private (클래스 내부에서만 값이 보여지고 접근, 변경이 가능 / 클래스 외부에서는 값을 읽을수도 변경 할 수도 없음)
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField); //undefined 출력 (private이기 때문에)

출력 결과

4. Static

1) static은 오브젝트마다 할당되어지는것이 아닌 클래스 자체에 붙어있는 것

2) static 함수 혹은 변수를 호출할 떄는 클래스를 이용하여 호출하여야 함

3) 들어오는 데이터와 상관없이 클래스에서 공통적으로 사용되는 것이라면 static을 사용하는 것이 좋음

class Article
{
    static publisher = 'Dream Coding';
    //생성자
    constructor(articleNumber)
    {
        this.articleNumber = articleNumber;
    }

    static printPublisher()
    {
        console.log(Article.publisher);
    }
}
const article1 = new Article(1);
const article2 = new Article(2);
//static이므로 클래스를 이용하여 호출
console.log(Article.publisher);
Article.printPublisher();

console.log(article1.articleNumber);
console.log(article2.articleNumber);

출력 결과

5. 상속과 다양성

부모 클래스

class Shape
{
    //생성자
    constructor(width, height, color)
    {
        this.width = width;
        this.height = height;
        this.color = color;
    }

    draw()
    {
        console.log(`drawing ${this.color} color!`);
    }

    getArea()
    {
        return this.width * this.height;
    }
}
//상속
//함수 재사용이 가능
//shape을 수정하면 Rectangle, Triangle 모두 반영됨
class Rectangle extends Shape { } //상속
//다양성
//함수를 재정의 가능 (오버라이딩)
class Triangle extends Shape  //상속
{
    draw() //함수 재정의
    {
        super.draw(); //super키워드를 사용하여 부모의 draw 함수 호출
        console.log('🔺');
    }
    getArea() //함수 재정의
    {
        return (this.width * this.height) / 2;
    }
    //Object클래스의 toString함수를 재정의하여 사용
    toString()
    {
        return `Triangle: color: ${this.color}`;
    }
    
}

const rectangle = new Rectangle(20,20,'blue');
rectangle.draw(); //Shape의 draw()함수 호출
console.log(rectangle.getArea());

const triangle = new Triangle(20,20,'red');
triangle.draw(); //Shape의 draw()함수 호출
console.log(triangle.getArea());

console.log(triangle.toString()); //함수재정의

출력 결과

6. instanceOf

1) A instanceof B : A 오브젝트가 B 클래스의 인스턴스인지 아닌지 (A오브젝트가 B클래스를 이용해서 만들어진 것인지 아닌지) 확인 / true 혹은 false 리턴

console.log(rectangle instanceof Rectangle); //true
console.log(triangle instanceof Rectangle); //false
console.log(triangle instanceof Triangle); //true
console.log(triangle instanceof Shape); //true
console.log(triangle instanceof Object); //true (자바스크립트의 object들은 이 Object를 상속하여 만든것이기 때문에 true)

출력 결과

 

728x90
저작자표시 (새창열림)

'프로그래밍 언어 > Javascript' 카테고리의 다른 글

자바스크립트 배열 개념과 APIs 총정리  (0) 2021.08.23
오브젝트?  (0) 2021.08.23
Arrow Function은 무엇인가? 함수의 선언과 표현  (0) 2021.08.20
operator, if, for loop  (0) 2021.08.19
데이터타입, data types, let vs var, hoisting  (0) 2021.08.19
COMMENT
 

티스토리툴바