เรียนรู้วิธีสร้างคลาสใน JavaScript

ในปี 2015 เวอร์ชัน ES6 ของภาษาการเขียนโปรแกรม JavaScript ได้รับการเผยแพร่ รุ่นนี้เปิดตัวการอัปเกรดที่สำคัญบางอย่างของภาษา และวางไว้อย่างเป็นทางการในหมวดหมู่ของภาษาการเขียนโปรแกรมเชิงวัตถุ ท่ามกลางภาษาอื่นๆ เช่น Java และ C++

การเขียนโปรแกรมเชิงวัตถุมุ่งเน้นไปที่วัตถุและการดำเนินการที่สามารถทำได้ อย่างไรก็ตาม ก่อนที่คุณจะมีวัตถุใดๆ คุณจะต้องมีคลาสก่อน

---

---

ฉันไม่ได้รับพัสดุจากอเมซอน

คลาส JavaScript เป็นหนึ่งในคุณสมบัติที่เปลี่ยนเกมที่มาพร้อมกับภาษาเวอร์ชัน ES6 คลาสสามารถอธิบายเป็นพิมพ์เขียวที่ใช้ในการสร้างวัตถุ

ในบทความบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างและจัดการวัตถุโดยใช้คลาส JavaScript

โครงสร้างคลาส JavaScript

เมื่อสร้างคลาสใน JavaScript มีองค์ประกอบพื้นฐานที่คุณต้องการเสมอ—the ระดับ คำสำคัญ. แทบทุกแง่มุมอื่น ๆ ของคลาส JavaScript ไม่จำเป็นสำหรับการดำเนินการที่ประสบความสำเร็จ

คลาส JavaScript จะดำเนินการอย่างเป็นธรรมชาติหากไม่มีตัวสร้าง (คลาสจะสร้างตัวสร้างว่างระหว่างการดำเนินการ) อย่างไรก็ตาม หากคลาส JavaScript ถูกสร้างขึ้นด้วยตัวสร้างและฟังก์ชันอื่นๆ แต่ไม่มีการใช้คีย์เวิร์ดของคลาส คลาสนี้จะไม่สามารถเรียกใช้งานได้

NS ระดับ คีย์เวิร์ด (ซึ่งควรเป็นตัวพิมพ์เล็กเสมอ) เป็นสิ่งจำเป็นในโครงสร้างคลาสของ JavaScript ตัวอย่างต่อไปนี้เป็นไวยากรณ์ทั่วไปของคลาส JavaScript ไวยากรณ์คลาส JavaScript อยู่ด้านล่าง:

---

---

class ClassName{
//class body
}


การสร้างคลาสใน JavaScript

ในการเขียนโปรแกรม คลาสสามารถถูกมองว่าเป็นเอนทิตีทั่วไปที่ใช้ในการสร้างอ็อบเจ็กต์พิเศษ ตัวอย่างเช่น ในสภาพแวดล้อมของโรงเรียน เอนทิตีทั่วไป (ชั้นเรียน) สามารถเป็นนักเรียน และวัตถุของนักเรียนสามารถเป็น John Brown แต่ก่อนที่คุณจะสร้างวัตถุ คุณจะต้องรู้ข้อมูลที่จะจัดเก็บ และนี่คือจุดเริ่มต้นของ JavaScript Constructors

การใช้ตัวสร้างในคลาส JavaScript

คอนสตรัคเตอร์มีความสำคัญต่อกระบวนการสร้างคลาสเนื่องจากเหตุผลบางประการ มันเริ่มต้นสถานะของวัตถุ (ผ่านคุณลักษณะของมัน) และมันถูกเรียกโดยอัตโนมัติเมื่อมีการสร้างอินสแตนซ์ของวัตถุใหม่ (กำหนดและสร้าง)

---

---

การใช้ตัวอย่างตัวสร้าง

ด้านล่างนี้ คุณจะเห็นตัวอย่างคอนสตรัคเตอร์พร้อมคำอธิบายความหมาย

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
}


โค้ดด้านบนแสดงส่วนสำคัญของตัวสร้างคลาส JavaScript ไม่เหมือนกับภาษาอื่นๆ เช่น Java และ C++ ตัวสร้างของ JavaScript ไม่ได้ใช้ชื่อคลาสเพื่อสร้างตัวสร้าง มันใช้ ช่างก่อสร้าง คีย์เวิร์ดดังที่คุณเห็นในตัวอย่างด้านบน

ที่เกี่ยวข้อง: เรียนรู้วิธีสร้างคลาสใน Java

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

บ้านที่สร้างขึ้นแต่ละหลังสามารถเห็นได้ว่าเป็นวัตถุของชั้นนี้ แม้ว่าบ้านแต่ละหลังเหล่านี้จะสร้างด้วยพิมพ์เขียวเดียวกัน แต่ก็สามารถแยกแยะได้ด้วยที่ตั้งทางภูมิศาสตร์ที่เฉพาะเจาะจงหรือผู้ที่เป็นเจ้าของบ้านเหล่านั้น

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

การสร้างวัตถุใน JavaScript

ตัวสร้างมีความสำคัญในภาษาเช่น JavaScript เนื่องจากหมายถึงจำนวนแอตทริบิวต์ที่วัตถุของคลาสเฉพาะควรมี บางภาษาจะต้องประกาศแอตทริบิวต์ (ตัวแปร) ก่อนจึงจะสามารถใช้ในตัวสร้างหรือวิธีการอื่นใด อย่างไรก็ตาม นี่ไม่ใช่กรณีของ JavaScript

ที่เกี่ยวข้อง: วิธีการประกาศตัวแปรใน JavaScript

เมื่อมองไปที่ตัวสร้างชั้นเรียนของนักเรียนด้านบน คุณจะมองเห็นได้ว่าวัตถุของชั้นเรียนนี้จะมีคุณลักษณะสามประการ

การสร้างตัวอย่างวัตถุ

ด้านล่างนี้ คุณจะเห็นตัวอย่างสำหรับการสร้างวัตถุใน JavaScript

//create a new object
const john = new Student('John', 'Brown', '2018');


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

เมื่อสร้างวัตถุของคลาส คุณต้องใช้ ใหม่ คีย์เวิร์ด ตามด้วยชื่อคลาสและค่าที่คุณต้องการกำหนดให้กับแอตทริบิวต์ที่เกี่ยวข้อง ตอนนี้คุณมีนักเรียนใหม่ชื่อ จอห์น นามสกุล บราวน์ และวันที่เริ่มต้นปี 2018 คุณยังมีตัวแปรคงที่: จอห์น. ตัวแปรนี้มีความสำคัญเนื่องจากอนุญาตให้คุณใช้วัตถุที่สร้างขึ้นได้

ปราศจาก จอห์น ตัวแปร คุณจะยังคงสามารถสร้างวัตถุใหม่ได้โดยใช้คำสั่ง นักเรียน คลาส แต่จะไม่มีทางเข้าถึงวัตถุนี้และใช้กับวิธีการต่าง ๆ ของคลาส

การใช้เมธอดในคลาส JavaScript

เมธอดเป็นฟังก์ชันของคลาสที่ใช้ในการดำเนินการกับอ็อบเจ็กต์ที่สร้างขึ้นจากคลาส วิธีที่ดีในการเพิ่มชั้นเรียนของนักเรียนคือวิธีหนึ่งที่สร้างรายงานเกี่ยวกับนักเรียนแต่ละคน

การสร้างวิธีการเรียน ตัวอย่าง

ด้านล่างนี้เป็นตัวอย่างสำหรับการสร้างวิธีการเรียนใน JavaScript

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
}


ชั้นเรียนข้างต้นมีวิธีการที่จะสร้างรายงานเกี่ยวกับนักเรียนแต่ละคนที่สร้างขึ้นด้วย นักเรียน ระดับ. การใช้ รายงาน() เมธอด คุณจะต้องใช้อ็อบเจ็กต์ที่มีอยู่ของคลาสเพื่อทำการเรียกใช้ฟังก์ชันอย่างง่าย

ขอบคุณตัวอย่างการสร้างวัตถุด้านบน คุณควรมีวัตถุของ นักเรียน คลาสที่กำหนดให้กับตัวแปร จอห์น . โดยใช้ จอห์น ตอนนี้คุณสามารถโทรหา .ได้สำเร็จ รายงาน() กระบวนการ.

การใช้ Class Methods Example

ด้านล่างนี้คือตัวอย่างการใช้ class method ใน JavaScript

//create a new object
const john = new Student('John', 'Brown', '2018');
//calling the report method and storing its result in a variable
let result = john.report();
//printing the result to the console
console.log(result);


รหัสด้านบนใช้ นักเรียน class เพื่อสร้างเอาต์พุตต่อไปนี้ในคอนโซล:

John Brown started attending this institution in 2018

การใช้ Static Methods ใน JavaScript Classes

วิธีสแตติกนั้นไม่ซ้ำกันเพราะเป็นวิธีเดียวในคลาส JavaScript ที่สามารถใช้ได้โดยไม่มีอ็อบเจ็กต์

จากตัวอย่างข้างต้น คุณไม่สามารถใช้ the รายงาน() วิธีการที่ไม่มีวัตถุของคลาส ทั้งนี้เป็นเพราะ รายงาน() วิธีการขึ้นอยู่กับคุณสมบัติของวัตถุเพื่อสร้างผลลัพธ์ที่ต้องการ อย่างไรก็ตาม ในการใช้วิธีสแตติก คุณจะต้องใช้ชื่อของคลาสที่เก็บเมธอดเท่านั้น

การสร้างตัวอย่างวิธีการคงที่

ด้านล่างนี้เป็นตัวอย่างวิธีการแบบคงที่สำหรับ JavaScript

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
//static method
static endDate(startDate){
return startDate + 4;
}
}


สิ่งสำคัญที่ควรทราบจากตัวอย่างข้างต้นคือทุกวิธีสแตติกเริ่มต้นด้วย คงที่ คำสำคัญ.

การใช้ Static Method Example

ด้านล่างนี้เป็นตัวอย่างการใช้วิธีการแบบคงที่ใน JavaScript

//calling a static method and printing its result to the console
console.log(Student.endDate(2018));


บรรทัดของโค้ดด้านบนใช้ the นักเรียน class เพื่อสร้างเอาต์พุตต่อไปนี้ในคอนโซล:

2022

การสร้างคลาส JavaScript นั้นง่าย

มีหลายสิ่งที่คุณต้องจำไว้ถ้าคุณต้องการสร้างคลาส JavaScript และยกตัวอย่างวัตถุตั้งแต่หนึ่งอย่างขึ้นไป:

• คลาส JavaScript ต้องมี ระดับ คำสำคัญ.
• ตัวสร้าง JavaScript ระบุจำนวนค่าที่วัตถุสามารถมีได้
• ไม่สามารถใช้เมธอดคลาสทั่วไปได้หากไม่มีอ็อบเจ็กต์
• สามารถใช้เมธอดแบบสแตติกได้โดยไม่มีอ็อบเจ็กต์

NS คอนโซล . บันทึก() เมธอดถูกใช้ตลอดทั้งบทความนี้เพื่อให้ผลลัพธ์ของการใช้ทั้งเมธอดทั่วไปและสแตติกในคลาส JavaScript วิธีนี้เป็นเครื่องมือที่มีประโยชน์สำหรับนักพัฒนา JavaScript เนื่องจากช่วยในกระบวนการดีบัก

ทำความคุ้นเคยกับ console.log() วิธีเป็นหนึ่งในสิ่งที่สำคัญที่สุดที่คุณสามารถทำได้ในฐานะนักพัฒนา JavaScript

แบ่งปัน แบ่งปัน ทวีต อีเมล สุดยอด JavaScript Cheat Sheet

รับการทบทวนอย่างรวดเร็วเกี่ยวกับองค์ประกอบ JavaScript ด้วยสูตรโกงนี้

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• การเขียนโปรแกรม
• JavaScript
• เคล็ดลับการเข้ารหัส
• บทเรียนการเข้ารหัส

เกี่ยวกับผู้เขียน คาเดชา คีน(21 บทความที่ตีพิมพ์)

Kadeisha Kean เป็นนักพัฒนาซอฟต์แวร์ฟูลสแตกและนักเขียนด้านเทคนิค/เทคโนโลยี เธอมีความสามารถที่ชัดเจนในการทำให้แนวคิดทางเทคโนโลยีที่ซับซ้อนที่สุดบางส่วนง่ายขึ้น การผลิตวัสดุที่สามารถเข้าใจได้ง่ายโดยสามเณรเทคโนโลยี เธอหลงใหลในการเขียน พัฒนาซอฟต์แวร์ที่น่าสนใจ และเดินทางไปทั่วโลก (ผ่านสารคดี)

เพิ่มเติมจาก Kadeisha Kean

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก