JavaScript เป็นแบบอิงวัตถุ และองค์ประกอบใดๆ ก็สามารถถือเป็นวัตถุได้ อย่างไรก็ตามประเภทและวัตถุจะแตกต่างกัน ในบทความนี้ นอกจากจะพูดถึงคุณลักษณะบางประการของประเภทและวัตถุแล้ว ที่สำคัญกว่านั้น เรายังศึกษาวิธีเขียนประเภทที่ดีและใช้ซ้ำได้อีกด้วย ท้ายที่สุดแล้ว หาก JavaScript ซึ่งเป็นภาษาสคริปต์ยอดนิยม สามารถถูกห่อหุ้มไว้อย่างดีและสร้างไลบรารี่ขนาดใหญ่ได้ มันจะมีความหมายมากสำหรับการนำกลับมาใช้ใหม่
มีบทความมากมายเกี่ยวกับต้นแบบบนอินเทอร์เน็ต แต่ฉันไม่เคยเข้าใจแนวคิดหลักเลย ในที่สุด หลังจากที่เขียนโค้ดตัวอย่างไปมากมาย ฉันก็พบว่า: ต้นแบบสามารถใช้ได้กับประเภทเท่านั้น
ต่อไปนี้เป็นตัวอย่างบางส่วนเกี่ยวกับประเภทและออบเจ็กต์ หลังจากอ่านตัวอย่างแล้ว คุณอาจเข้าใจความสัมพันธ์ระหว่างประเภทและออบเจ็กต์ได้ง่ายขึ้น:
| รหัสตัวอย่าง | แสดงให้เห็น | |
| 1 | Object.prototype.Property = 1; Object.prototype.Method = function (){ alert(1);}var obj = new Object();alert(obj.Property);obj.Method(); | คุณสามารถใช้ต้นแบบกับประเภทเพื่อเพิ่มลักษณะการทำงานให้กับประเภทได้ พฤติกรรมเหล่านี้สามารถแสดงได้เฉพาะในกรณีประเภทเท่านั้น ประเภทที่อนุญาตใน JS ได้แก่ Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String |
| 2 | var obj = วัตถุใหม่ (); obj.prototype.Property = 1;//Error//Errorobj.prototype.Method = function(){ การแจ้งเตือน (1);} | คุณไม่สามารถใช้ต้นแบบบนอินสแตนซ์ได้ ไม่เช่นนั้นจะเกิดข้อผิดพลาดในการคอมไพล์ |
| 3 | Object.Property = 1;Object.Method = function(){ alert(1);}alert(Object.Property);Object.Method(); | คุณสามารถกำหนดคุณสมบัติและวิธีการ "คงที่" สำหรับประเภทและเรียกใช้โดยตรงบนประเภท |
| 4 | Object.Property = 1;Object.Method = function(){ alert(1);}var obj = new Object();alert(obj.Property);//Errorobj.Method();//ข้อผิดพลาด | อินสแตนซ์ไม่สามารถเรียกคุณสมบัติคงที่หรือวิธีการประเภทได้ ไม่เช่นนั้นจะเกิดข้อผิดพลาดที่ไม่ได้กำหนดไว้กับวัตถุ |
| 5 | ฟังก์ชั่น Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();alert(obj.Property);obj.Method(); | ตัวอย่างนี้แสดงให้เห็นถึงวิธีการปกติในการกำหนดประเภทใน JavaScript |
| 6 | ฟังก์ชั่น Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}Aclass.prototype.Property2 = 2;Aclass.prototype.Method2 = ฟังก์ชั่น{ alert(2);}var obj = Aclass ใหม่ (); การแจ้งเตือน (obj.Property2); obj.Method2 (); | ต้นแบบสามารถใช้ภายนอกเพื่อเพิ่มคุณสมบัติและวิธีการให้กับประเภทที่กำหนดเอง |
| 7 | ฟังก์ชั่น Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}Aclass.prototype.Property = 2;Aclass.prototype.Method = function{ alert(2);}var obj = Aclass ใหม่ (); การแจ้งเตือน (obj.Property); obj.Method (); | คุณสมบัติหรือวิธีการของประเภทที่กำหนดเองไม่สามารถเปลี่ยนแปลงจากภายนอกผ่านต้นแบบได้ ดังที่คุณเห็นจากตัวอย่างนี้: คุณสมบัติและเมธอดที่ถูกเรียกยังคงเป็นผลลัพธ์ของคำจำกัดความเริ่มต้น |
| 8 | ฟังก์ชั่น Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();obj.Property = 2;obj.Method = function(){ alert( 2);}การแจ้งเตือน(obj.Property);obj.Method(); | คุณสมบัติสามารถเปลี่ยนแปลงได้บนวัตถุ (นี่แน่นอน) คุณยังสามารถเปลี่ยนวิธีการบนวัตถุได้ (แตกต่างจากแนวคิดเชิงวัตถุทั่วไป) |
| 9 | ฟังก์ชั่น Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();obj.Property2 = 2;obj.Method2 = function(){ alert( 2);}การแจ้งเตือน(obj.Property2);obj.Method2(); | คุณสามารถเพิ่มคุณสมบัติหรือวิธีการให้กับวัตถุได้ |
| 10 | ฟังก์ชั่น AClass(){ this.Property = 1; this.Method = function() { alert(2); }}AClass2.prototype = AClass ใหม่();var obj = ใหม่ AClass2();การแจ้งเตือน(obj.Property);obj.Method();การแจ้งเตือน(obj.Property2);obj.Method2(); | ตัวอย่างนี้แสดงให้เห็นว่าประเภทหนึ่งสืบทอดมาจากประเภทอื่นอย่างไร |
| 11 | ฟังก์ชั่น AClass(){ this.Property = 1; this.Method = function() { alert(2); }}AClass2.prototype = AClass ใหม่();AClass2.prototype.Property = 3;AClass2.prototype.Method = function(){ การแจ้งเตือน (4);} var obj = AClass2 ใหม่ (); การแจ้งเตือน (obj.Property); obj.Method (); | ตัวอย่างนี้แสดงให้เห็นว่าคลาสย่อยสามารถแทนที่คุณสมบัติหรือเมธอดของคลาสพาเรนต์ได้อย่างไร |
・ตัวอย่างที่ 2: ข้อจำกัดในการใช้ต้นแบบ
・ตัวอย่างที่ 3: วิธีกำหนดสมาชิกแบบคงที่ในประเภท
・ตัวอย่างที่ 7: ข้อจำกัดของต้นแบบสำหรับสมาชิกของประเภทที่กำหนดใหม่
・ตัวอย่างที่ 10: วิธีทำให้ประเภทหนึ่งสืบทอดมาจากอีกประเภทหนึ่ง
・ตัวอย่างที่ 11: วิธีกำหนดสมาชิกของคลาสพาเรนต์ในคลาสย่อยใหม่
คุณสมบัติเชิงวัตถุที่ JavaScript สามารถใช้งานได้ ได้แก่ :
・สนามสาธารณะ
・วิธีสาธารณะ
・สนามส่วนตัว
・วิธีการส่วนตัว (สนามส่วนตัว)
・วิธีการโอเวอร์โหลด
・ตัวสร้าง
·เหตุการณ์
・มรดกเดี่ยว
・คลาสย่อยจะแทนที่คุณลักษณะหรือเมธอดของคลาสพาเรนต์ (แทนที่)
・คุณสมบัติหรือวิธีการคงที่ (สมาชิกคงที่)