พื้นฐาน AJAX: การนำคลาสไปใช้ใน JavaScript ใน JavaScript คุณสามารถใช้คีย์เวิร์ดของฟังก์ชันเพื่อกำหนด "คลาส" และวิธีเพิ่มสมาชิกในคลาส ตัวแปรหรือวิธีการที่อ้างอิงผ่านตัวชี้นี้ภายในฟังก์ชันจะกลายเป็นสมาชิกของคลาส ตัวอย่างเช่น
ต่อไปนี้คือข้อมูลโค้ด:
function class1(){
var s="เอบีซี";
นี้.p1=s;
นี้.method1=ฟังก์ชั่น(){
alert("นี่คือวิธีทดสอบ");
-
-
var obj1=คลาส1ใหม่();
รับวัตถุ obj1 ผ่าน class1 ใหม่ () และวัตถุ obj1 รับแอตทริบิวต์ p1 และเมธอด method1 โดยอัตโนมัติ
ใน JavaScript คำจำกัดความของฟังก์ชันคือตัวสร้างของคลาส เมื่อรวมคุณสมบัติของอ็อบเจ็กต์ที่แนะนำไว้ก่อนหน้านี้และการใช้งานของโอเปอเรเตอร์ใหม่ ต่อไปนี้จะอธิบายกระบวนการสร้างอ็อบเจ็กต์โดยใช้สิ่งใหม่
(1) เมื่อล่ามพบโอเปอเรเตอร์ใหม่ มันจะสร้างวัตถุว่าง
(2) เริ่มรันฟังก์ชัน class1 และชี้ตัวชี้ไปที่วัตถุที่สร้างขึ้นใหม่
(3) เพราะเมื่อวัตถุไม่มีอยู่ เมื่อกำหนดค่าให้กับคุณลักษณะ ล่ามจะสร้างคุณลักษณะสำหรับวัตถุ ตัวอย่างเช่น ใน class1 เมื่อคำสั่ง this.p1=s ถูกดำเนินการ คุณลักษณะ p1 จะถูกเพิ่ม และค่าของตัวแปร s จะเป็น กำหนดให้การดำเนินการของฟังก์ชันเป็นกระบวนการในการเริ่มต้นวัตถุนี้ นั่นคือการตระหนักถึงบทบาทของตัวสร้าง
(4) เมื่อฟังก์ชันถูกดำเนินการ ตัวดำเนินการใหม่จะส่งคืนวัตถุที่เตรียมใช้งานแล้ว
ตลอดกระบวนการทั้งหมดนี้ กลไกเชิงวัตถุพื้นฐานจะถูกนำไปใช้ใน JavaScript จะเห็นได้ว่าใน JavaScript คำจำกัดความของฟังก์ชันจริงๆ แล้วคือการนำ Constructor ของออบเจ็กต์ไปใช้งาน ซึ่งเสร็จสมบูรณ์ผ่านฟังก์ชันต่างๆ ข้อเสียของวิธีนี้คือ:
· เมื่อนำคำสั่งเริ่มต้นและคำจำกัดความของสมาชิกทั้งหมดมารวมกัน ตรรกะของโค้ดยังไม่ชัดเจนเพียงพอ และเป็นการยากที่จะนำฟังก์ชันที่ซับซ้อนไปใช้
·ทุกครั้งที่มีการสร้างอินสแตนซ์ของคลาส ตัวสร้างจะต้องดำเนินการหนึ่งครั้ง คุณสมบัติและวิธีการที่กำหนดไว้ในตัวสร้างจะถูกสร้างขึ้นซ้ำ ๆ กันเสมอ ตัวอย่างเช่น:
ต่อไปนี้คือส่วนย่อยของโค้ด:
this.method1=function(){
alert("นี่คือวิธีทดสอบ");
}
ทุกครั้งที่ method1 ที่นี่สร้างอินสแตนซ์ของ class1 มันจะถูกสร้างขึ้นเพียงครั้งเดียว ทำให้เสียหน่วยความจำ ส่วนถัดไปจะแนะนำกลไกการกำหนดคลาสอื่น: อ็อบเจ็กต์ต้นแบบ ซึ่งสามารถแก้ไขข้อบกพร่องที่เกิดจากการกำหนดสมาชิกของคลาสในตัวสร้าง
การใช้ออบเจ็กต์ต้นแบบเพื่อกำหนดสมาชิกของคลาส
ส่วนก่อนหน้านี้ได้แนะนำกลไกการใช้งานของคลาสและการใช้งานคอนสตรัคเตอร์ ตอนนี้เราแนะนำกลไกอื่นสำหรับการเพิ่มสมาชิกในคลาส: วัตถุต้นแบบ เมื่อฟังก์ชันใหม่ สมาชิกของออบเจ็กต์จะถูกกำหนดให้กับออบเจ็กต์ที่สร้างขึ้นโดยอัตโนมัติ ตัวอย่างเช่น
ต่อไปนี้คือข้อมูลโค้ด:
<script language="JavaScript" type="text/javascript">
-
//กำหนดฟังก์ชันคลาส class1(){ โดยมีเสาแอตทริบิวต์เพียงอันเดียว
นี้.prop=1;
-
//ใช้แอตทริบิวต์ต้นแบบของฟังก์ชันเพื่อกำหนดสมาชิกใหม่สำหรับคลาส class1.prototype.showProp=function(){
การแจ้งเตือน (this.prop);
-
//สร้างอินสแตนซ์ของ class1 var obj1=new class1();
//เรียกเมธอด showProp ที่กำหนดผ่านวัตถุต้นแบบต้นแบบ obj1.showProp();
-
</สคริปต์>
Prototype เป็นวัตถุ JavaScript ที่สามารถเพิ่ม แก้ไข และลบวิธีการและคุณสมบัติให้กับวัตถุต้นแบบได้ นี่เป็นการเพิ่มคำจำกัดความของสมาชิกให้กับชั้นเรียน
ตอนนี้เราเข้าใจ object ต้นแบบของฟังก์ชันแล้ว มาดูกระบวนการดำเนินการของ new กัน
(1) สร้างวัตถุใหม่และปล่อยให้ตัวชี้นี้ชี้ไปที่มัน
(2) กำหนดสมาชิกทั้งหมดของวัตถุต้นแบบให้กับวัตถุใหม่นี้
(3) ดำเนินการเนื้อหาของฟังก์ชันและเริ่มต้นวัตถุ
(4) ) ส่งคืนวัตถุ สร้างขึ้นใน (1)
เมื่อเปรียบเทียบกับกระบวนการดำเนินการของใหม่ที่แนะนำในส่วนที่แล้ว มีกระบวนการเพิ่มเติมของการใช้ต้นแบบเพื่อเริ่มต้นวัตถุ ซึ่งสอดคล้องกับความหมายที่แท้จริงของต้นแบบ ซึ่งเป็นต้นแบบของอินสแตนซ์ของคลาสที่เกี่ยวข้อง กระบวนการเริ่มต้นนี้เกิดขึ้นก่อนที่เนื้อความของฟังก์ชัน (ตัวสร้าง) จะถูกดำเนินการ ดังนั้นคุณสมบัติและวิธีการที่กำหนดไว้ในต้นแบบจึงสามารถเรียกได้ภายในเนื้อความของฟังก์ชัน ตัวอย่างเช่น
ต่อไปนี้เป็นส่วนย่อยของโค้ด:
<script language="JavaScript" type="text/javascript">
-
//กำหนดคลาสด้วยคุณสมบัติเดียวเท่านั้น
ฟังก์ชั่นคลาส 1 () {
นี้.prop=1;
this.showProp();
-
//ใช้แอตทริบิวต์ต้นแบบของฟังก์ชันเพื่อกำหนดสมาชิกใหม่สำหรับชั้นเรียน
class1.prototype.showProp=ฟังก์ชั่น(){
การแจ้งเตือน (this.prop);
-
//สร้างอินสแตนซ์ของคลาส1
var obj1=คลาส1ใหม่();
-
</สคริปต์>
เมื่อเปรียบเทียบกับโค้ดก่อนหน้านี้ วิธีการ showProp ที่กำหนดไว้ในต้นแบบจะถูกเรียกว่าภายในคลาส 1 เพื่อให้กล่องโต้ตอบปรากฏขึ้นในระหว่างกระบวนการสร้างออบเจ็กต์ โดยแสดงว่าค่าของแอตทริบิวต์ prop คือ 1
ควรสังเกตว่าคำจำกัดความของวัตถุต้นแบบต้องอยู่ก่อนคำสั่งที่สร้างอินสแตนซ์ของคลาส มิฉะนั้นจะไม่ทำงาน ตัวอย่างเช่น
ต่อไปนี้คือข้อมูลโค้ด:
<script language="JavaScript" type="text/javascript">
-
//กำหนดคลาสด้วยคุณสมบัติเดียวเท่านั้น
ฟังก์ชั่นคลาส 1 () {
นี้.prop=1;
this.showProp();
-
//สร้างอินสแตนซ์ของคลาส1
var obj1=คลาส1ใหม่();
//ใช้แอตทริบิวต์ต้นแบบของฟังก์ชันเพื่อกำหนดสมาชิกใหม่สำหรับคลาสหลังคำสั่งที่สร้างอินสแตนซ์ ซึ่งจะมีผลกับวัตถุที่สร้างขึ้นในภายหลังเท่านั้น
class1.prototype.showProp=ฟังก์ชั่น(){
การแจ้งเตือน (this.prop);
-
-
</script>
รหัสนี้จะสร้างข้อผิดพลาดรันไทม์ ซึ่งบ่งชี้ว่าวัตถุที่แสดงไม่มีวิธี showProp เนื่องจากวิธีการถูกกำหนดหลังจากคำสั่งที่สร้างอินสแตนซ์คลาส
จะเห็นได้ว่าวัตถุต้นแบบนั้นมีไว้สำหรับสมาชิกของคลาสการออกแบบโดยเฉพาะ นอกจากนี้ ต้นแบบยังมีคุณลักษณะที่สำคัญ: ตัวสร้าง ซึ่งแสดงถึงการอ้างอิงถึงตัว
สร้าง ต่อไปนี้เป็นข้อมูลโค้ด:
ฟังก์ชั่นคลาส 1 () {
การแจ้งเตือน (1);
-
class1.prototype.constructor(); //เรียก Constructor ของคลาส
หลังจากที่โค้ดนี้ถูกรัน กล่องโต้ตอบจะปรากฏขึ้นพร้อมข้อความ "1" ที่แสดงอยู่ ซึ่งแสดงว่าต้นแบบมีความเกี่ยวข้องอย่างใกล้ชิดกับคำจำกัดความของคลาส ที่จริงแล้ว: class1.prototype.constructor===class1
รูปแบบการออกแบบสำหรับคลาส JavaScript
เราได้แนะนำวิธีการกำหนดคลาสและวิธีการเริ่มต้นอินสแตนซ์ของคลาสแล้ว คลาสสามารถเพิ่มสมาชิกให้กับเนื้อหาของฟังก์ชันที่กำหนดโดยฟังก์ชัน และยังสามารถใช้ต้นแบบเพื่อกำหนดสมาชิกของคลาสได้อีกด้วย . โค้ดโปรแกรมดูน่าสับสน จะกำหนดคลาสอย่างไรให้ชัดเจน? รูปแบบการใช้งานสำหรับชั้นเรียนได้รับด้านล่าง
ใน JavaScript เนื่องจากธรรมชาติของอ็อบเจ็กต์มีความยืดหยุ่น สมาชิกจึงสามารถเพิ่มลงในคลาสในตัวสร้างได้ ซึ่งไม่เพียงเพิ่มความยืดหยุ่น แต่ยังเพิ่มความซับซ้อนของโค้ดด้วย เพื่อปรับปรุงความสามารถในการอ่านและการพัฒนาประสิทธิภาพของโค้ด คุณสามารถใช้วิธีนี้ในการกำหนดสมาชิกและใช้ออบเจ็กต์ต้นแบบแทน ด้วยวิธีนี้ คำจำกัดความของฟังก์ชันคือตัวสร้างของคลาส ซึ่งสอดคล้องกับการใช้งาน ของคลาสดั้งเดิม: ชื่อคลาสและชื่อคอนสตรัคเตอร์เหมือนกัน ตัวอย่างเช่น:
นี่คือข้อมูลโค้ด:
ฟังก์ชั่นคลาส 1 () {
//คอนสตรัคเตอร์
-
//คำจำกัดความของสมาชิก
class1.prototype.someProperty = "ตัวอย่าง";
class1.prototype.someMethod=function(){
//โค้ดการใช้งานเมธอด
-
แม้ว่าโค้ดข้างต้นจะทำให้คำจำกัดความของคลาสชัดเจนขึ้นมาก แต่ทุกครั้งที่กำหนดคุณสมบัติหรือเมธอด จำเป็นต้องใช้ class1.prototype ไม่เพียงแต่ขนาดของโค้ดจะใหญ่ขึ้นเท่านั้น แต่ความสามารถในการอ่านยังไม่เพียงพออีกด้วย สำหรับการปรับปรุงเพิ่มเติม คุณสามารถใช้ตัวสร้างของวัตถุที่ไม่ได้พิมพ์เพื่อระบุวัตถุต้นแบบเพื่อใช้ข้อกำหนดสมาชิกของคลาส:
ต่อไปนี้คือส่วนย่อยของโค้ด:
//กำหนดคลาส class1
ฟังก์ชั่นคลาส 1 () {
//คอนสตรัคเตอร์
-
//ตระหนักถึงคำจำกัดความสมาชิกของคลาสโดยการระบุวัตถุต้นแบบ
class1.ต้นแบบ={
someProperty:"ตัวอย่าง", someMethod:function(){
//รหัสวิธี
-
...//คุณสมบัติและวิธีการอื่นๆ
-
โค้ดด้านบนกำหนด class1 อย่างชัดเจน ตัวสร้างถูกนำไปใช้โดยตรงกับชื่อคลาส และสมาชิกถูกกำหนดโดยใช้อ็อบเจ็กต์ที่ไม่ได้พิมพ์ คุณสมบัติและวิธีการทั้งหมดถูกนำไปใช้ในรายการและสามารถเริ่มต้นได้ในเวลาเดียวกัน กำหนดไว้ ค่าของแอตทริบิวต์ นี่เป็นเหมือนการนำคลาสไปใช้ในภาษาเชิงวัตถุแบบดั้งเดิมมากกว่า เพียงแต่ว่า Constructor และคำจำกัดความของสมาชิกคลาสถูกแบ่งออกเป็นสองส่วน ซึ่งถือได้ว่าเป็นรูปแบบคงที่สำหรับการกำหนดคลาสใน JavaScript ซึ่งจะทำให้เข้าใจได้ง่ายขึ้นเมื่อใช้งาน
หมายเหตุ: การอ้างอิงระหว่างสมาชิกของคลาสจะต้องทำผ่านตัวชี้นี้ ตัวอย่างเช่น ในวิธีการ someMethod ในตัวอย่างข้างต้น หากคุณต้องการใช้แอตทริบิวต์ someProperty คุณต้องส่งผ่านรูปแบบของ this.someProperty เนื่องจากใน JavaScript แต่ละ คุณสมบัติและวิธีการมีความเป็นอิสระ โดยเชื่อมต่อกับอ็อบเจ็กต์ผ่านพอยน์เตอร์นี้