2. การเขียนโปรแกรมเชิงวัตถุ JavaScript: การสืบทอดของตัวสร้าง
ส่วนนี้ส่วนใหญ่แนะนำวิธีการสร้างอินสแตนซ์ที่ "สืบทอด" หลายวัตถุ
ตัวอย่างเช่นตอนนี้มีตัวสร้างสำหรับวัตถุ "สัตว์"
ฟังก์ชั่นสัตว์ () {this.species = "สัตว์"; -นอกจากนี้ยังมีตัวสร้างวัตถุ "แมว"
ฟังก์ชัน cat (ชื่อ, สี) {this.name = name; this.color = color; -"แมว" สามารถสืบทอด "สัตว์" ได้อย่างไร?
1. การเชื่อมต่อคอนสตรัคเตอร์
วิธีที่ง่ายที่สุดคือการใช้วิธีการโทรหรือใช้เพื่อผูกตัวสร้างวัตถุของแม่กับวัตถุลูกนั่นคือเพิ่มบรรทัดลงในตัวสร้างวัตถุลูก:
ฟังก์ชั่นแมว (ชื่อ, สี) {iment.apply (นี่, อาร์กิวเมนต์); this.name = ชื่อ; this.color = color; } var cat1 = แมวใหม่ ("ผมใหญ่", "เหลือง"); การแจ้งเตือน (cat1.Species); // สัตว์2. โหมดต้นแบบ
วิธีการทั่วไปคือการใช้แอตทริบิวต์ต้นแบบ
หากวัตถุต้นแบบของ "แมว" ชี้ไปที่ตัวอย่างของสัตว์ดังนั้นทุกกรณีของ "แมว" สามารถสืบทอดสัตว์ได้
cat.prototype = สัตว์ใหม่ (); cat.prototype.constructor = cat; var cat1 = แมวใหม่ ("ผมตัวใหญ่", "เหลือง"); การแจ้งเตือน (cat1.Species); // สัตว์ในบรรทัดแรกของรหัสเราชี้วัตถุต้นแบบแมวเป็นอินสแตนซ์ของสัตว์
1.Cat.prototype = สัตว์ใหม่ ();
มันเทียบเท่ากับการลบค่าดั้งเดิมของวัตถุต้นแบบอย่างสมบูรณ์จากนั้นกำหนดค่าใหม่ แต่บรรทัดที่สองหมายถึงอะไร?
1.Cat.prototype.Constructor = CAT;
ปรากฎว่าวัตถุต้นแบบใด ๆ มีแอตทริบิวต์ตัวสร้างที่ชี้ไปที่ฟังก์ชันตัวสร้าง กล่าวอีกนัยหนึ่งคุณสมบัติตัวสร้างของวัตถุ Cat.prototype ชี้ไปที่ Cat
เราได้ลบค่าดั้งเดิมของวัตถุต้นแบบนี้ในขั้นตอนก่อนหน้าดังนั้นวัตถุต้นแบบใหม่ไม่มีแอตทริบิวต์ตัวสร้างดังนั้นเราต้องเพิ่มด้วยตนเองมิฉะนั้นจะมีปัญหากับ "ห่วงโซ่การสืบทอด" ที่ตามมา นี่คือความหมายของบรรทัดที่สอง
ในระยะสั้นนี่เป็นจุดที่สำคัญมากและคุณต้องติดตามเมื่อการเขียนโปรแกรม ทั้งหมดต่อไปนี้ดังต่อไปนี้: หากวัตถุต้นแบบถูกแทนที่
1.o.prototype = {};
จากนั้นขั้นตอนต่อไปจะต้องเพิ่มแอตทริบิวต์คอนสตรัคเตอร์ไปยังวัตถุต้นแบบใหม่และอ้างอิงแอตทริบิวต์นี้กลับไปยังฟังก์ชั่นคอนสตรัคเตอร์ดั้งเดิม
1.o.prototype.constructor = o;
3. สืบทอดต้นแบบโดยตรง
เนื่องจากในวัตถุสัตว์คุณสมบัติที่ไม่เปลี่ยนแปลงสามารถเขียนโดยตรงไปยังสัตว์ prototype ดังนั้นเรายังสามารถปล่อยให้ cat () ข้ามสัตว์ () และสืบทอดสัตว์โดยตรง prototype
ตอนนี้เรามาเขียนวัตถุสัตว์ใหม่ก่อน:
1.Function Animal () {}
2.Animal.prototype.species = "Animal";
จากนั้นชี้วัตถุต้นแบบของแมวและชี้ไปที่วัตถุต้นแบบของสัตว์เพื่อให้การสืบทอดเสร็จสมบูรณ์
cat.prototype = iment.prototype; catcat.prototype.constructor = cat; var cat1 = แมวใหม่ ("ผมตัวใหญ่", "เหลือง"); การแจ้งเตือน (cat1.Species); // สัตว์เมื่อเทียบกับวิธีการเดิมข้อได้เปรียบของเรื่องนี้คือมันค่อนข้างมีประสิทธิภาพ (ไม่จำเป็นต้องดำเนินการและสร้างอินสแตนซ์ของสัตว์) และประหยัดหน่วยความจำได้มากขึ้น ข้อเสียคือ cat.prototype และ iment.prototype ชี้ไปที่วัตถุเดียวกันดังนั้นการปรับเปลี่ยนใด ๆ กับ cat.prototype จะสะท้อนให้เห็นใน iment.prototype
ดังนั้นรหัสข้างต้นจึงเป็นปัญหา โปรดดูบรรทัดที่สอง
1.Cat.prototype.Constructor = CAT;
ประโยคนี้เปลี่ยนแอตทริบิวต์ของตัวสร้างของวัตถุ prototype วัตถุ!
1.Alert (Animal.prototype.Constructor); // แมว
4. ใช้วัตถุเปล่าเป็นตัวกลาง
เนื่องจาก "การสืบทอดโดยตรงของต้นแบบ" มีข้อเสียข้างต้นวัตถุว่างสามารถใช้เป็นตัวกลางได้
var f = function () {}; f.prototype = iment.prototype; cat.prototype = new f (); cat.prototype.constructor = cat;F เป็นวัตถุที่ว่างเปล่าดังนั้นมันเกือบจะไม่ได้ครอบครองหน่วยความจำ ในเวลานี้การปรับเปลี่ยนวัตถุต้นแบบ CAT จะไม่ส่งผลกระทบต่อวัตถุต้นแบบสัตว์
1.Alert (Animal.prototype.Constructor); // สัตว์
5. ฟังก์ชั่นการห่อหุ้มของโหมดต้นแบบ
เราห่อหุ้มวิธีข้างต้นลงในฟังก์ชั่นเพื่อใช้งานง่าย
ฟังก์ชั่นขยาย (เด็ก, พาเรนต์) {var f = function () {}; f.prototype = parent.prototype; child.prototype = new f (); child.prototype.constructor = เด็ก; child.uber = parent.prototype; -เมื่อใช้งานวิธีนี้มีดังนี้
ขยาย (แมวสัตว์); var cat1 = แมวใหม่ ("ผมตัวใหญ่", "เหลือง"); การแจ้งเตือน (cat1.Species); // สัตว์ฟังก์ชั่นขยายนี้เป็นวิธีการที่ไลบรารี YUI ใช้การสืบทอด
นอกจากนี้ให้ฉันอธิบาย บรรทัดสุดท้ายของร่างกายฟังก์ชั่น
1.Child.uber = parent.prototype;
มันหมายถึงการตั้งค่าแอตทริบิวต์ Uber สำหรับวัตถุเด็กซึ่งชี้ไปที่แอตทริบิวต์ต้นแบบโดยตรงของวัตถุหลัก สิ่งนี้เทียบเท่ากับการเปิดช่องทางบนวัตถุลูกและเรียกใช้วิธีการของวัตถุหลักโดยตรง บรรทัดนี้วางไว้ที่นี่เพื่อให้บรรลุความสมบูรณ์ของมรดกและเป็นทรัพย์สินสำรองอย่างหมดจด
6. คัดลอกมรดก
ข้างต้นคือการใช้วัตถุต้นแบบเพื่อใช้การสืบทอด นอกจากนี้เรายังสามารถเปลี่ยนความคิดของเราและใช้วิธีการ "คัดลอก" เพื่อให้ได้มรดก พูดง่ายๆคือหากคุณสมบัติและวิธีการทั้งหมดของวัตถุแม่ถูกคัดลอกไปยังวัตถุเด็กไม่สามารถรับมรดกได้?
ก่อนอื่นให้ใส่คุณสมบัติที่ไม่เปลี่ยนแปลงทั้งหมดของสัตว์ในวัตถุต้นแบบ
1.Function Animal () {}
2.Animal.prototype.species = "Animal";
จากนั้นเขียนฟังก์ชั่นอื่นเพื่อให้บรรลุวัตถุประสงค์ของการคัดลอกทรัพย์สิน
ฟังก์ชั่น Extend2 (เด็ก, พาเรนต์) {var p = parent.prototype; var c = child.prototype; สำหรับ (var i ใน p) {c [i] = p [i]; } c.uber = p; -ฟังก์ชั่นของฟังก์ชั่นนี้คือการคัดลอกคุณสมบัติในวัตถุต้นแบบของวัตถุแม่ไปยังวัตถุต้นแบบของวัตถุลูกทีละคน
เมื่อใช้งานเขียนสิ่งนี้:
Extend2 (แมวสัตว์); var cat1 = แมวใหม่ ("ผมตัวใหญ่", "เหลือง"); การแจ้งเตือน (cat1.Species); // สัตว์บทความข้างต้นการวิเคราะห์เชิงลึกของการเขียนโปรแกรมเชิงวัตถุใน JavaScript เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น