JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


คลาส JavaScript

ECMAScript 2015 หรือที่เรียกว่า ES6 ได้แนะนำคลาส JavaScript

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

JavaScript Class Syntax

ใช้คีย์เวิร์ดclassเพื่อสร้างคลาส

เพิ่มเมธอดชื่อconstructor():

ไวยากรณ์

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

ตัวอย่าง

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

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

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

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

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


การใช้คลาส

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

ตัวอย่าง

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

ตัวอย่างข้างต้นใช้คลาส Carเพื่อสร้าง อ อบเจ็กต์ Car สอง รายการ

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


วิธีการสร้าง

วิธี Constructor เป็นวิธีพิเศษ:

  • ต้องมีชื่อตรงว่า "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() {
    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.";


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

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

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


"ใช้อย่างเข้มงวด"

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

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

ตัวอย่าง

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

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

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