[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▼▼▼、▼▼4▼▼▼▼▼▼▼▼▼▼▼
｢2｣、｢内｣に方法が定義されている場合は、｢すべて｣、｢を継承しますが、使用する場合は｣

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メソッドはオブジェクトをインスタンス化します(参照)

// 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はES 6の概念であり、構造関数に基づく構文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️⃣ New keyword : 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は、プロトタイプではなく別のインスタンスに格納されます。(現段階3)

Constructor私有価値を体現するためのネーミングミーティングです.(実際はプライベートではありません).ただし、Class Fieldで紹介されているinstanceprivate 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