คลาส JavaScript:A Guide

JavaScript ขึ้นอยู่กับต้นแบบ ทุกครั้งที่คุณประกาศวัตถุ คุณสมบัติต้นแบบจะถูกสร้างขึ้นซึ่งขยายคุณสมบัติและวิธีการที่เกี่ยวข้องกับวัตถุนั้น

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

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

คลาส JavaScript คืออะไร

คลาสเป็นวิธีการประกาศเทมเพลตสำหรับออบเจกต์

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

ตัวอย่างของชั้นเรียนจะเป็น Book . ชั้นเรียนนี้จะมีพิมพ์เขียวสำหรับข้อมูลที่สามารถจัดเก็บไว้ในหนังสือและวิธีที่ข้อมูลนั้นสามารถเปลี่ยนแปลงได้ วัตถุอาจเป็น A Streetcar Named Desire ซึ่งเป็นหนังสือแต่ละเล่ม

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

คลาสมักใช้ในเฟรมเวิร์ก JavaScript สมัยใหม่ เช่น React และ Next.js

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

คลาสกับฟังก์ชัน

หากคุณจำสิ่งหนึ่งได้จากบทความนี้ ขอให้เป็นดังนี้:คลาสเป็นเพียงฟังก์ชันปกติ

ความแตกต่างเพียงอย่างเดียวระหว่างคลาสและนิพจน์ของฟังก์ชันคือวิธีการประกาศ ฟังก์ชันใช้ function คีย์เวิร์ดและคลาสใช้ class คำสำคัญ. ในทางเทคนิค คุณสามารถประกาศคลาสโดยไม่ต้องใช้คีย์เวิร์ด class ด้วยซ้ำ

เราสามารถบอกได้ว่ามันเหมือนกันโดยการสร้างสองฟังก์ชันและพิมพ์ต้นแบบออกมา:

const PlayerFunction = function() {}
const PlayerClass = class {}

console.log(Object.getPrototypeOf(PlayerFunction));
console.log(Object.getPrototypeOf(PlayerClass));

การแสดงออกของคลาสและฟังก์ชันส่งคืน:

ฟังก์ชัน ()

การทำงาน ()

ทั้งฟังก์ชันและคลาสของเราใช้สถาปัตยกรรมแบบต้นแบบเดียวกัน

วิธีการกำหนดคลาส

คุณกำหนดคลาสอย่างไร นั่นเป็นคำถามที่ดี

คุณสามารถกำหนดคลาสโดยใช้ class คำสำคัญ. เมื่อคุณกำหนดคลาสแล้ว คุณสามารถใช้ฟังก์ชัน constructor() เพื่อเริ่มต้นคลาสได้ด้วยค่าเริ่มต้น

เปิดคอนโซล JavaScript และวางในรหัสนี้:

	class Book {
constructor(title, author) {
		this.title = title;
		this.author = author;
	}
}

สิ่งนี้จะสร้างคลาสที่เรียกว่า Book . ชั้นเรียนของเราสามารถเก็บค่าได้สองค่า ชื่อและผู้แต่ง ซึ่งเรากำหนดไว้ในวิธีการสร้างคลาสของเรา ในการสร้างวัตถุของคลาสนี้ เราสามารถใช้รหัสนี้:

var streetcar = new Book("A Streetcar Named Desire", "Tennessee Williams");

เราสามารถดึงค่าจากคลาสของเราเหมือนกับที่เราเรียกจากวัตถุใด ๆ :

console.log(streetcar.title);

รหัสของเราส่งคืน:รถรางที่ชื่อว่าความปรารถนา

วิธีการกำหนดวิธีการเรียน

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

พิจารณาตัวอย่างนี้:

class Book {
	constructor(title, author) {
		this.title = title;
		this.author = author;
	}
	
	getDetails() {
		console.log(`${this.title} is a book written by ${this.author}.`);
	}
}

เราได้ประกาศวิธีการที่เรียกว่า getDetails() ที่มีอยู่ในชั้นเรียนของเรา นี่เป็นสิ่งที่ดีเพราะเก็บรหัสทั้งหมดของเราไว้ด้วยกัน เรียก getDetails() . ของเรา การทำงาน:

var streetcar = new Book("A Streetcar Named Desire", "Tennessee Williams");
streetcar.getDetails();

รหัสของเราส่งคืน:

A Streetcar Named Desire เป็นหนังสือที่เขียนโดย Tennessee Williams

สืบทอดคลาส

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

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

class Fiction extends Book {
	constructor(title, author, fiction) {
		super(title, author);

		this.fiction = true;
	}
}

เราได้สร้างชั้นเรียนที่เรียกว่า Fiction ซึ่งใช้คลาสหนังสือที่เราประกาศไว้ก่อนหน้านี้ว่าเป็นพิมพ์เขียว ในโค้ดของเรา เราใช้ super() คีย์เวิร์ดเพื่อสืบทอดค่าชื่อและผู้แต่งจากคลาสพาเรนต์ซึ่งก็คือ Book จากนั้นเราได้กำหนดแอตทริบิวต์ใหม่ fiction ซึ่งค่าที่ตั้งไว้เป็นจริงโดยค่าเริ่มต้น

มาสร้างวัตถุของคลาส Fiction ใหม่ของเรากันเถอะ:

var gatsby = new Fiction("The Great Gatsby", "F. Scott Fitzgerald");
console.log(gatsby.fiction);

รหัสของเราส่งคืน:จริง คลาส Fiction จัดเก็บรายการที่เรียกว่า fiction ซึ่งเป็นจริงโดยปริยาย หากเราพยายามเข้าถึงค่านี้จากอินสแตนซ์ของคลาส Book จะไม่มีการส่งคืน นั่นเป็นเพราะว่า “นิยาย” สามารถเข้าถึงได้ในชั้นเรียนนิยายของเราเท่านั้น

Getters และ Setters

เมื่อคุณทำงานกับชั้นเรียน คุณควรใช้ฟังก์ชัน getter และ setter

ฟังก์ชัน Getter ช่วยให้คุณดึงเมธอดจากคลาสได้ ฟังก์ชัน Setter ให้คุณเปลี่ยนค่าของไอเท็มเฉพาะในคลาสได้ ฟังก์ชันเหล่านี้แสดงโดยใช้ get และ set คีย์เวิร์ด ตามลำดับ

พิจารณารหัสต่อไปนี้:

class Book {
	constructor(title, author) {
		this.title = title;
		this.author = author;
	}
	
	get author() {
		return this.author;
	}

	set author(author) {
		this.author = author;
	}
}

ในตัวอย่างนี้ เราได้ประกาศสองวิธีที่เรียกว่า author . หนึ่งในวิธีการเหล่านี้ทำให้เราสามารถดึงค่าของ author; นั่นคือ get . ของเรา กระบวนการ. วิธีอื่นช่วยให้เราสามารถเปลี่ยนค่าของ author .

เราสามารถเห็นสิ่งนี้ในการดำเนินการโดยใช้รหัสต่อไปนี้:

var streetcar = new Book("A Streetcar Named Desire", "");
streetcar.author = "Tennessee Williams";
console.log(streetcar.author);

รหัสของเราส่งคืน:Tennessee Williams

เราได้เริ่มต้นวัตถุที่เรียกว่า streetcar และตั้งชื่อว่า A Streetcar Named Desire . จากนั้นเราก็ตั้งค่า author ถึง Tennessee Williams โดยใช้ setter ที่เรากำหนดไว้ในโค้ดของเรา สุดท้ายเราพิมพ์ค่าของ author ไปยังคอนโซลโดยใช้เมธอด getter

บทสรุป

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

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

ตอนนี้คุณพร้อมที่จะเริ่มใช้คลาสเหมือนผู้เชี่ยวชาญ JavaScript แล้ว!