คลาสจาวาสคริปต์

สารบัญ

ECMAScript 2015 หรือที่รู้จักในชื่อ ES6 ได้เปิดตัวคลาส JavaScript

คลาส JavaScript เป็นเทมเพลตสำหรับวัตถุ JavaScript

ไวยากรณ์คลาส JavaScript

ใช้คำหลัก class เพื่อสร้างคลาส

เพิ่มวิธีการชื่อ constructor() เสมอ:

ไวยากรณ์

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

ตัวอย่าง

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

ตัวอย่างข้างต้นสร้างคลาสชื่อ "รถยนต์"

ชั้นเรียนมีคุณสมบัติเริ่มต้นสองประการ: "ชื่อ" และ "ปี"

คลาส JavaScript ไม่ใช่ วัตถุ

เป็นเทมเพลตสำหรับออบเจ็กต์ JavaScript

การใช้คลาส

เมื่อคุณมีคลาส คุณสามารถใช้คลาสเพื่อสร้างออบเจ็กต์ได้:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

<p id="demo"></p>

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

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

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

ตัวอย่างข้างต้นใช้ คลาสรถยนต์ เพื่อสร้าง วัตถุรถยนต์ สองรายการ

เมธอด Constructor จะถูกเรียกโดยอัตโนมัติเมื่อมีการสร้างออบเจ็กต์ใหม่

วิธีคอนสตรัคเตอร์

วิธีคอนสตรัคเตอร์เป็นวิธีการพิเศษ:

จะต้องมีชื่อที่แน่นอนว่า "ตัวสร้าง"
มันถูกดำเนินการโดยอัตโนมัติเมื่อมีการสร้างออบเจ็กต์ใหม่
มันถูกใช้เพื่อเริ่มต้นคุณสมบัติของวัตถุ

หากคุณไม่ได้กำหนดวิธีการสร้าง JavaScript จะเพิ่มเมธอดคอนสตรัคเตอร์ว่าง

วิธีการเรียน

เมธอดคลาสถูกสร้างขึ้นด้วยไวยากรณ์เดียวกันกับเมธอดอ็อบเจ็กต์

ใช้คำหลัก class เพื่อสร้างคลาส

เพิ่มเมธอด constructor() เสมอ

จากนั้นเพิ่มวิธีการจำนวนเท่าใดก็ได้

ไวยากรณ์

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

สร้างเมธอด Class ชื่อ "age" ซึ่งจะคืนค่า Car age:

ตัวอย่าง

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
   }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
   }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Methods</h1>
<p>How to define and use a Class method.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;

  }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>

</body>
</html>

คุณสามารถส่งพารามิเตอร์ไปยังวิธีการเรียน:

ตัวอย่าง

class Car {
  constructor(name, year) {
    
  this.name = name;
    this.year = year;
  }
  
  age(x) {
    return x - this.year;
  }
}

  const date = new Date();
  let year = date.getFullYear();
const myCar = new 
  Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is 
  " + myCar.age(year) + " years old.";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Method</h1>
<p>Pass a parameter into the "age()" method.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

const date = new Date();
let year = date.getFullYear();

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
</script>

</body>
</html>

รองรับเบราว์เซอร์

ตารางต่อไปนี้กำหนดเบราว์เซอร์เวอร์ชันแรกที่รองรับอย่างเต็มที่ คลาสใน JavaScript:


Chrome 49	Edge 12	Firefox 45	Safari 9	Opera 36
Mar, 2016	Jul, 2015	Mar, 2016	Oct, 2015	Mar, 2016

"use strict"

ไวยากรณ์ในคลาสจะต้องเขียนใน "โหมดเข้มงวด"

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

ตัวอย่าง

ใน "โหมดเข้มงวด" คุณจะได้รับข้อผิดพลาดหากคุณใช้ตัวแปรที่ไม่มี ประกาศมัน:

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
   }
  age() {
    // date = new Date();   // This will not work
    const date = new Date();  // This will work
    return date.getFullYear() - this.year;
   }
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes uses "strict mode"</h1>

<p>In a JavaScript Class you cannot use variable without declaring it.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;

  }
  age() {
   // date = new Date();  // This will not work
   const date = new Date(); // This will work
   return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>

</body>
</html>

เรียนรู้เพิ่มเติมเกี่ยวกับ "โหมดเข้มงวด" ใน: โหมดเข้มงวด JS