Class ใน JavaScript, การสร้าง class ด้วย keyword class

 ใน ES6 มีการเพิ่ม keyword class ขึ้นมา

การประกาศ class แบบนี้จะไม่สามารถใช้การเรียกใช้ function แบบปกติกับ constructor ได้

จะต้องใช้กับ new เท่านั้น

• เนื้อหาของ class คล้าย object literal แต่ไม่เหมือนกันทั้งหมด
• ไม่ต้องใช้ comma คั่น method
• การประกาศ Property ใช้  name:value ไม่ได้
• ใช้ constructor() ในการประกาศ function แต่ชื่อ function จริงๆคือชื่อของ class
• ถ้าไม่ต้องการตั้งค่าเริ่มต้นใดๆ ไม่ต้องใส่ constructor ก็ได้ constructor ว่างจะถูกสร้างให้อัตโนมัติ
• การประกาศ class จะไม่ถูก hoisted นั้นคือจะไม่สามารถเรียกใช้ class ก่อนการประกาศได้   

class Range {
    constructor(from, to) {
        // Store the start and end points (state) of this new range object.
        // These are noninherited properties that are unique to this object.
        this.from = from;
        this.to = to;
    }
    // Return true if x is in the range, false otherwise
    // This method works for textual and Date ranges as well as numeric.
    includes(x) { return this.from <= x && x <= this.to; }
    // A generator function that makes instances of the class iterable.
    // Note that it only works for numeric ranges.
    *[Symbol.iterator]() {
        for(let x = Math.ceil(this.from); x <= this.to; x++) yield x;
    }
    // Return a string representation of the range
    toString() { return `(${this.from}...${this.to})`; }
}
// Here are example uses of this new Range class
let r = new Range(1,3);   // Create a Range object
r.includes(2)             // => true: 2 is in the range
r.toString()              // => "(1...3)"
[...r]                    // => [1, 2, 3]; convert to an array via iterator

การกำหนด class แบบใช้ expression

let Square = class { constructor(x) { this.area = x * x; } };
new Square(3).area  // => 9

Method แบบ Static

ใช้ keyword static

Method ที่ถูกสร้างขึ้นจะผูกอยู่กับ constructor function

static parse(s) {
    let matches = s.match(/^\((\d+)\.\.\.(\d+)\)$/);
    if (!matches) {
        throw new TypeError(`Cannot parse Range from "${s}".`)
    }
    return new Range(parseInt(matches[1]), parseInt(matches[2]));
}

ต้องเรียกใช้กับตัว Class เท่านั้น

let r = Range.parse('(1...10)'); // Returns a new Range object
r.parse('(1...10)');             // TypeError: r.parse is not a function

Getters, Setters

ใช้ get กับ set

class Student {
    constructor(name){
		this._name = name;
	}
    
    // accessor property(getter)
    get name() {
		console.log('getter');
        return this._name;
    }
	    //accessor property(setter)
    set name(newName) {
		console.log('setter');
        this._name = newName;
    }
};

studentA = new Student('Jay');

// accessing  property
studentA.name; // getter Jay

// setting property
studentA.name='James' // setter James

ใช้ Object.defineProperty()

const student = {
    firstName: 'Monica'
}

// getting property
Object.defineProperty(student, "getName", {
    get : function () {
        return this.firstName;
    }
});

// setting property
Object.defineProperty(student, "changeName", {
    set : function (value) {
        this.firstName = value;
    }
});

console.log(student.firstName); // Monica

// changing the property value
student.changeName = 'Sarah';

console.log(student.firstName); // Sarah

Public, Private, และ Static Field,

 

class ClassWithStaticMethod {
   normalField = 10;
  #privateField;
  #privateFieldWithInitializer = 42;
  static #privateStaticField;
  static #privateStaticFieldWithInitializer = 42;
  
  static staticProperty = 'someValue';
  static staticMethod() {
    return 'static method has been called.';
  }
  static {
    console.log('Class static initialization block called');
  }


  #privateMethod() {
    // …
  }



  static #privateStaticMethod() {
    // …
  }
}

console.log(ClassWithStaticMethod.staticProperty);
// Expected output: "someValue"
console.log(ClassWithStaticMethod.staticMethod());
// Expected output: "static method has been called."