[JavaScript] Class vs Object, 객체지향 언어 클래스 정리 (With. Ellie)

 

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 rotoma = new Person('rotoma', 20);

console.log(rotoma.name);

console.log(rotoma.age);

rotoma.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; //_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);

 

3. Fields (public, private)

   Too soon! 이런게 있다는 것만 알자 아직 활성화 XX

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields

Public class fields - JavaScript | MDN

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! 이런게 있구나~ 아직 활성화 XX

 

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();

 

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!`);

  }

 

  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;

  }

 

  toString() {

    return `Triangle: color: ${this.color}`;

  }

}

 

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());

 

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

console.log(triangle.toString());

 

let obj = { value: 5 };

function change(value) {

  value.value = 7;

}

change(obj);

console.log(obj);

 

오늘의 노트정리)