ในการเขียนโปรแกรมเชิงวัตถุคลาสคือแม่แบบโปรแกรมโค้ดที่ขยายได้สำหรับการสร้างวัตถุ ชั้นเรียนสามารถคิดได้ว่าเป็นน้ำตาลสังเคราะห์มากกว่าการสืบทอดตามต้นแบบที่มีอยู่ของ JavaScript ในบทความนี้เราจะเข้าสู่ระดับลึกของคลาส JavaScript และเรียนรู้วิธีใช้ตามลำดับต่อไปนี้:
คลาส JavaScript คืออะไร?
ใน JavaScript คลาสคือฟังก์ชันประเภทหนึ่งและประกาศด้วยคีย์เวิร์ดคลาส คุณต้องใช้ไวยากรณ์นิพจน์ของฟังก์ชันเพื่อเริ่มต้นฟังก์ชันและไวยากรณ์นิพจน์คลาสเพื่อเริ่มต้นคลาส
// การเริ่มต้นฟังก์ชันด้วยนิพจน์ฟังก์ชัน const a = function () {}// การเริ่มต้นคลาสด้วยนิพจน์คลาส const b = class {}ใน JavaScript แทนที่จะใช้ฟังก์ชันคำหลักเพื่อเริ่มต้นเราใช้คลาสคำหลัก นอกจากนี้คุณสมบัติยังถูกกำหนดภายใน constructor () วิธีการ
จะใช้ JavaScript Class ได้อย่างไร?
รหัสที่ประกาศด้วย ฟังก์ชัน และคลาสทั้งสองส่งคืนฟังก์ชัน [[Prototype]] ด้วยต้นแบบฟังก์ชันใด ๆ สามารถกลายเป็นอินสแตนซ์ตัวสร้างโดยใช้คีย์เวิร์ดใหม่ ตัวอย่างเช่น:
const a = class {} // เตรียมใช้งานตัวสร้างจากคลาส const constructorFromClass = new a () console.log (constructorFromClass)เอาท์พุต:
ตัวสร้าง {}: คลาสตอนนี้มีสามวิธีในการใช้คลาสใน JavaScript มาดูรายละเอียดของแต่ละวิธีพร้อมตัวอย่างกัน
กำหนดคลาส
ฟังก์ชันตัวสร้างเริ่มต้นด้วยพารามิเตอร์จำนวนหนึ่งซึ่งกำหนดให้เป็นคุณสมบัติของ 'นี้' หมายถึงฟังก์ชันตัวเอง อักษรตัวแรกของตัวระบุเป็นตัวพิมพ์ใหญ่ตามแบบแผน
// การเริ่มต้นฟังก์ชัน constructor function พนักงาน (name, empid) {this.name = name this.empid = empid}ตอนนี้ถ้าเราแปลสิ่งนี้เป็นไวยากรณ์ของคลาสคุณจะเห็นว่าโครงสร้างมีความคล้ายคลึงกันมาก
การสอนเซิร์ฟเวอร์ sql สำหรับผู้เริ่มต้นพร้อมตัวอย่าง
// การเริ่มต้นคลาสนิยามคลาสพนักงาน {constructor (name, empid) {this.name = name this.empid = empid}}เราสามารถพูดได้ว่าคีย์เวิร์ดของคลาสนั้นสื่อสารอย่างตรงไปตรงมามากขึ้น ความแตกต่างเพียงอย่างเดียวในไวยากรณ์ของการเริ่มต้นคือการใช้คีย์เวิร์ดคลาสแทนฟังก์ชัน นอกจากนี้ยังกำหนดคุณสมบัติภายใน constructor () วิธีการ
กำหนดวิธีการ
วิธีปฏิบัติทั่วไปอีกประการหนึ่งของฟังก์ชันตัวสร้างคือการกำหนด วิธีการ โดยตรงไปยังต้นแบบแทนที่จะใช้ในการเริ่มต้น เราจะนำตัวอย่างและดูว่ามันทำงานอย่างไร:
function พนักงาน (ชื่อ, empid) {this.name = name this.empid = empid} // การเพิ่มเมธอดให้กับ constructor staff.prototype.greet = function () {return `$ {this.name} กล่าวว่า hello.`}เมื่อคุณเขียนโค้ดเดียวกันกับคลาสโค้ดจะง่ายขึ้นและเพิ่มเมธอดโดยตรง
คลาสพนักงาน {constructor (name, empid) {this.name = name this.empid = empid} // การเพิ่มเมธอดให้กับคอนสตรัคเตอร์ทักทาย () {return `$ {this.name} กล่าวว่า hello.`}}แม้ว่าชั้นเรียนจะอนุญาตให้ใช้ไวยากรณ์ที่เรียบง่ายและกระชับ แต่บางครั้งคุณอาจต้องประนีประนอมกับความชัดเจนในกระบวนการ
การขยายคลาส
ข้อได้เปรียบของฟังก์ชันตัวสร้างและคลาสคือสามารถขยายเป็นพิมพ์เขียวออบเจ็กต์ใหม่โดยอิงจากพาเรนต์ สิ่งนี้ช่วยในการป้องกันการสร้างโค้ดซ้ำสำหรับออบเจ็กต์ที่คล้ายกัน แต่ต้องการคุณสมบัติเพิ่มเติมหรือคุณสมบัติเฉพาะบางอย่าง
ฟังก์ชันตัวสร้างใหม่สามารถสร้างได้จากพาเรนต์โดยใช้เมธอด call () ตัวอย่างเช่น:
// การสร้างคอนสตรัคเตอร์ใหม่จากข้อมูลฟังก์ชันพาเรนต์ (ชื่อ, Empid, เงินเดือน) {// ตัวสร้างเชนพร้อมการเรียกพนักงานโทร (นี่, ชื่อ, Empid) this.salary = เงินเดือน}ตอนนี้เมื่อเราเขียนโค้ดเดียวกันโดยใช้คลาสซูเปอร์คีย์เวิร์ดจะถูกใช้แทนการโทรเพื่อเข้าถึงฟังก์ชันหลัก
// การสร้างคลาสใหม่จากข้อมูลคลาสหลักจะขยายพนักงาน {constructor (name, empid, เงินเดือน) {// Chain constructor with super super (name, empid) // Add a new property this.salary = เงินเดือน}}ชั้นเรียนช่วยให้คุณสร้างวิธีที่กระชับมากขึ้น วัตถุ พิมพ์เขียวและฟังก์ชันตัวสร้างอธิบายถึงสิ่งที่เกิดขึ้นภายใต้ประทุนในลักษณะที่เฉพาะเจาะจงมากขึ้น
ด้วยเหตุนี้เราจึงมาถึงตอนท้ายของบทความของเรา ฉันหวังว่าคุณจะเข้าใจวิธีใช้ JavaScript Class
ความสัมพันธ์ระหว่าง java และ javascript
ตอนนี้คุณรู้เกี่ยวกับ JavaScript Class แล้วลองดูไฟล์ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของ 'คลาส JavaScript' แล้วเราจะติดต่อกลับไป