JavaScript รูปแบบ

ECMAScript 2015 หรือ ES6 ได้นำเข้า JavaScript ชนิด

JavaScript ชนิดเป็นตัวมอdel ของ JavaScript Object

JavaScript ชนิด

ใช้คำถาม class class สร้างคลาส:

ต้องการให้เพิ่มวิธีชื่อ constructor() วิธี:

รูปแบบ

class ClassName {
  constructor() { ... }
}

ตัวอย่าง

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

ตัวอย่างด้านบนสร้างคลาสชื่อ "Car".

คลาสนี้มีคุณสมบัติตั้งต้นสองรายการ: "name" และ "year".

JavaScript รูปแบบไม่ใช่วัตถุ

มันเป็นวัตถุของจาวาสคริปต์ตัวอย่าง

ใช้คลาส

เมื่อคุณมีคลาส คุณสามารถใช้คลาสเพื่อสร้างวัตถุ:

ตัวอย่าง

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

ทดลองด้วยตัวเอง

ตัวอย่างด้านบนใช้ คลาส Carเพื่อสร้างสอง วัตถุ Car

วิธีเครื่องมือเครื่องมือจะทำงานโดยอัตโนมัติเมื่อสร้างวัตถุใหม่ (constructor method).

วิธีเครื่องมือ

วิธีเครื่องมือเป็นวิธีพิเศษ:

  • มันต้องมีชื่อที่เฉพาะเจาะจง "constructor"
  • ปฏิบัติการโดยอัตโนมัติเมื่อสร้างวัตถุใหม่
  • ใช้สำหรับการตั้งค่าคุณสมบัติของวัตถุ
  • ถ้าคุณไม่ได้ระบุวิธีเครื่องมือ จาวาสคริปต์จะเพิ่มวิธีเครื่องมือว่างเปล่า:

วิธีของคลาส

รูปแบบวิธีของคลาสเหมือนวิธีของวัตถุ:

ใช้คำถาม class ที่สร้างคลาส:

ต้องการให้เพิ่มวิธี constructor() ทุกครั้ง:

หลังจากนั้น คุณสามารถเพิ่มวิธีที่ต้องการเสริมจำนวนที่ไม่จำกัด:

รูปแบบ

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

สร้างวิธีชื่อ "age" ที่คืนค่าปีของรถ:

ตัวอย่าง

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

ทดลองด้วยตัวเอง

คุณสามารถส่งค่าเป็นตัวอักษรให้กับวิธีของคลาส:

ตัวอย่าง

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";

ทดลองด้วยตัวเอง

การสนับสนุนเว็บเบราเซอร์

ตารางด้านล่างระบุสัญญาณของเว็บเบราเซอร์ที่สนับสนุน JavaScript รูปแบบเก่าแก่ที่สุด:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
มีนาคม 2016 ปี กรกฎาคม 2015 ปี มีนาคม 2016 ปี ตุลาคม 2015 ปี มีนาคม 2016 ปี

"use strict"

การใช้งานภาษาอักษรในรูปแบบ 'โมด์ สรุป' จะต้องเขียนเป็น 'โมด์ สรุป'

หากคุณไม่ปฎิบัติตามกฎของ 'โมด์ สรุป' คุณจะได้รับข้อความข้อผิดพลาด

ตัวอย่าง

ในโมด์ 'โมด์ สรุป' หากคุณใช้ตัวแปรโดยไม่ได้ประกาศมัน คุณจะได้รับข้อผิดพลาด:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // นี่จะไม่ทำงาน
    let date = new Date(); // นี่จะทำงาน
    return date.getFullYear() - this.year;
  }
}

ทดลองด้วยตัวเอง

ใน JS โมด์ สรุป เรียนรู้เกี่ยวกับ 'โมด์ สรุป' มากยิ่งขึ้นที่นี่