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

class

• template
• declare once
• no data in

object

• instance of a class
• created many times
• data in

ex)

'use strict';
//Object-oriendted programming
//class: template
//object: instance of a class
//JavaScript classes
//-introduced in ES6
//-syntactical sugar over prototype-based inheritance

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

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

const han = new Person('hanjin', 27);
console.log(han.name);
console.log(han.age);
han.speak();

//2.Getter and setters
class User{
    constructor(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    get age(){
        return this._age;
    }

    set age(value){
        //if(value < 0){
        //  throw Error('age can not be negative');
        //}
        this._age = value < 0 ? 0 : value;
    }
}

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

 

예제 실행 화면

 

ex)

//3.Fields(public, private)
//Too soon!
class Experiment{
    publicField = 2;
    #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);

//4.Static properties and methods
//Too soon!
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);
console.log(Article.publisher);
Article.printPublisher();

 

예제 실행 화면

 

ex)

//5.Inheritance
//a way for one class to extend another class.
class Shape{
    constructor(width, height, color){
        this.width = width;
        this.height = height;
        this.color = color;
    }

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

    getArea(){
        return this.width * this.height;
    }
}

class Rectangle extends Shape{}
class Triangle extends Shape{
    draw(){
        super.draw();
        console.log('삼각형');
    }
    getArea(){
        return (this.width*this.height)/2;
    }
}

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

 

예제 실행 홤녀

 

ex)

class Shape{
    constructor(width, height, color){
        this.width = width;
        this.height = height;
        this.color = color;
    }

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

    getArea(){
        return this.width * this.height;
    }
}

class Rectangle extends Shape{}
class Triangle extends Shape{
    draw(){
        super.draw();
        console.log('삼각형');
    }
    getArea(){
        return (this.width*this.height)/2;
    }
}

const rectangle = new Rectangle(20,20,'blue');
const triangle = new Triangle(20,20,'red');

//6. Class checking:instanceOf
console.log(rectangle instanceof Rectangle);
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Object);

 

예제 실행 화면

 

참고사이트 : JavaScript reference developer.mozilla.org/ko/docs/Web/JavaScript