[Javascript] Class

ES5

Base Constructor

// Constructor
funtion Book(title, author, year) {
   this.title = title;
   this.author = author;
   this.year = year;
}

// Prototype
Book.prototype.getSummary =  function() {
     return `${this.title} was written by ${this.author in ${this.year}}`
}

Book.prototype.reviese =  function(newYear) {
   this.year = newYear;
   this.revised = true;
}

// Instantiate an object
const book1 = new Book('Book One', 'Suyeon', '1996');

1️⃣ New keyword를 통해 생성된 오브젝트는 바로 실행된다.
2️⃣ Constructor 내부에 메소드를 정의할 경우 모든 instance들이 상속을 받게 되지만, prototype을 사용할 경우, 선택적으로 상속을 받을 수 있다.

Extending the properties of the base Constructor

// Magazine constructor
function Magazine(title, author, year, month) {
   Book.call(this, title, author, year); // (*)
   this.month = month;
}

// Inherit prototype 
Magazine.prototype = Object.create(Book.prototype); // (*)

// Use Magazine Constructor
Magazine.prototype.constructor = Magazine;

const mag1 = new Magazine('Magazine One', 'Sarang', '2000', 'Aug');

mag1.getSummary();

---

Another way to instantiate an object (참고)

// const book1 = new Book('Book One', 'Suyeon', '1996');

const bookProtos = {
   getSummary: function() {
     return `${this.title} was written by ${this.author in ${this.year}}`
   },
   getrevise: function(newYear) {
     this.year = newYear;
     this.revised = true;
   }
};

// 1️⃣ Object.create()
const book1 = Object.create(bookProtos);
this.title = 'Book One';
this.author = 'Suyeon';
this.year = '1996';

// 2️⃣ Object.create()
const book2 = Object.create(bookProtos, {
   title: { value: 'Book One' },
   author: { value: 'Suyeon' },
   title: { value: '1996' },
});

---

ES6

Class는 ES6에서 등장한 개념으로, constructor function을 기반으로한 syntatic Sugar이다.

• Class methods are non-enumerable (enumerable flag is false).
• Classes always use strict.

Super Class

class Book {
  bestStore = 'Suyeon\'s Bookstore'; // (*) field
  
  constructor(title, author, year) {
     this.title = title;
     this.author = author;
     this.year = year;
   }
  
  getSummary() {
     return `${this.title} was written by ${this.author in ${this.year}}`
  }
  
  get getYear() { // (*) getter
     return this.year;
  }
  
  set setYear(newYear) {  // (*) setter
     this.year = newYear;
  }

   static topBookStore() {  // (*) static
      return 'Suyeon\'s Bookstore'
   }
} 

// Instantiate an object
const book1 = new Book('Book One', 'Suyeon', '1996');

// Call static method
Book.topBookStore();

1️⃣ static method : This is standard behavior when you make multiple instances of a Class. If we create a method that does not access an instance property, we can use the static keyword.

Subclass

// Magazine Subclass
class Magazine extends Book {
   constructor(title, autor, year, month) {
      super(title, autor, year); // (*)
      this.month = month;
   }
}

// Instantiate 
const mag1 = new Magazine('Magazine One', 'Sarang', '2000', 'Aug');

---

Class Field

Class Field를 사용하면 코드를 더욱 간결하고 직관적으로 만들 수 있다. 또한 Class Field는 프로토타입에 저장되는 것이 아닌 개별 인스턴스에 저장된다. (현재 stage3)

• _는 private value를 나타내기 위한 네이밍 컨벤션이다.(실제로 private하게 만들진 않음). 하지만 Class Field에소 소개된 #를 사용하면 private field를 만들 수 있다.

Field Syntax

class Book {
  // Fields
  title = 'Book One'; // (*) Public 
  #author = 'Suyeon'; // (*) Private 
  static year = 1996; // (*) Static
  static #month = 'Aug'; // (*) Static and Private

  // Method syntax
  getTitle = () => {
     return title;
  };
}

/* This is equivalent to:
class Book {
  constructor() {
    this.title = 'Book One';
    this.author = 'Suyeon';
    this.year = 1996;
  }
}

Book.year = 'Aug';
*/

예시

class Car {
  #milesDriven = 0;
  
  drive(distance) {
    #milesDriven += distance
  }

  getMilesDriven() {
    return #milesDriven
  }
}

const tesla = new Car()
tesla.drive(10)
tesla.getMilesDriven() // 10
tesla.#milesDriven // Invalid