[ JavaScript ] Class - 객체지향 개발

 

1. Class 정의

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

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

const jongin = new Person('jongin', 20);
console.log(jongin.name);
console.log(jongin.age);
jongin.speak();

 

Class의 구성요소로는 필드, 함수, 생성자가 존재한다.

필드는 객체의 상태등을 나타내는 값, 함수는 객체의 동작

생성자는 처음 객체를 생성할 때, 필드의 값을 초기화하는 등의 작업을 한다.

 

2.getter And Setter

class User {    
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    //get 과 set을 사용할 때에는 변수명에 "_"같이 다른 변수명으로 해주는 것이 좋다. 
    //그렇지 않으면 계속 자기자신을 불러오기 때문에 call stack size 오류가 난다. 
    get age() {
        return this._age;
    }
    
    set age(value) {
        // if(value < 0) {
        //     throw Error('age con not be negative');
        // }

        this._age = value < 0 ? 0 : value;
    }
}

const user1 = new User('choi', 'jongin', 20);
console.log(user1.firstName);
console.log(user1.lastName);
console.log(user1.age);

 

객체를 생성하고, 객체의 필드에 접근하거나 값을 가져올 때에는 getter나 setter를 이용해야지 보안이나 오류를 줄 일 수 있다.

 

주의해야할 점은 getter와 setter에서 사용하는 변수이름은 "_"를 붙힌 것 처럼 다르게 지정해줘야지, Call stack size오류가 나지않는다.

 

변수이름이 필드랑 같으면 , 계속 getter나 setter를 call하기 때문에 오류가 생김

 

3. public, private

class Experiment {
    publicField = 2;
    #privateField = 0;
}

const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);

 

public은 모든 클레스에서도 다 사용할 수 있도록 지정하는 것

private는 선언된 클래스 내에서만 접근할 수 있는 접근자이다.

 

보안이 필요한 것에는 private를 통해 캡슐화 하는 것이 좋다.

 

4. Static

class Article { 
    static publisher = 'fun Coding';
    constructor(articleNumber) {
        this.articleNumber = articleNumber;
    }

    static printPublisher() {
        console.log(Article.publisher);
    }
}

const a1 = new Article(1);
console.log(a1.publisher);
console.log(Article.publisher);
Article.printPublisher();

 

static은 객체를 만들지 않고도, 클레스 자체에서 바로 접근할 수 있도록 해주는 것

new연산자를 통해서 새로운 객체를 생성하지 않고도

바로 Ariticle 클레스에 "." 연산자로 필드나 메소드에 접근할 수 있다.

 

객체마다 오버라이딩을 하지않는, 모든 객체에서도 동일하게 사용될 필드나 메소드는 static으로 지정하게 되면 메모리의 절약을 할 수 있다.

 

5. Inheritance

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;
    }
}

class Rectangle extends Shape {}
class Triangle extends Shape {
    getArea(){
        return (this.width * this.height)/2;
    }
}

const rectangle = new Rectangle(20, 20, 'blue');
console.log(rectangle.width);
rectangle.draw();
console.log(rectangle.getArea());
const triangle = new Triangle(20, 20, 'red');
console.log(triangle.width);
triangle.draw();
console.log(triangle.getArea());

상속이다.

상속은 상위 클레스에 있는 필드나 메소드를 하위 클레스에서도 그대로 가져다가 쓸 수 있도록 해주는 것이다.

 

그리고, 하위 클레스에서는 상위 클레스에 정의된 메소드의 내용을 변경할 수 있는데 이것을 오버라이딩이라고 한다.

이러한 상속과 오버라이딩이 있기 때문에 다형성을 구현할 수 있다.

 

6. instanceOf

console.log(rectangle instanceof Rectangle);
console.log(triangle instanceof Rectangle);
console.log(rectangle instanceof Triangle);
console.log(triangle instanceof Triangle);
console.log(rectangle instanceof Shape);
console.log(rectangle instanceof Object);

 

해당 객체가 확인하고자 하는 객체에 소속된 것인지를 확인하여 True와 False의 값을 출력하는 함수

 

JavaScript에서 정의된 모~~든 객체는 Object에 속해져있음

 

 

참고자료

https://www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC