ในฐานะที่เป็นภาษาที่มุ่งเน้นวัตถุ (JS เป็นอิงตามวัตถุ) มันเป็นสิ่งสำคัญที่จะใช้การสืบทอด แต่เนื่องจากไม่มีแนวคิดของชั้นเรียนเองจึงไม่สามารถใช้มรดกผ่านคลาสเช่นภาษาการเขียนโปรแกรมเชิงวัตถุจริง แต่สามารถใช้การสืบทอดผ่านวิธีการอื่น มีหลายวิธีในการใช้มรดกและต่อไปนี้เป็นเพียงไม่กี่อย่าง
1. การสืบทอดโซ่ต้นแบบ
Function Person () {// ฟังก์ชั่นที่สืบทอดมานั้นเรียกว่า superType (คลาสหลัก, คลาสพื้นฐาน) this.name = 'mumu'; this.age = '18 '; } person.prototype.name = 'susu'; // เมื่อชื่อแอตทริบิวต์เหมือนกันคุณต้องอยู่ใกล้ที่สุดค้นหาในอินสแตนซ์ก่อน แต่จากนั้นไปที่ prototype เพื่อค้นหาฟังก์ชั่นคนงาน () {// ฟังก์ชั่นที่สืบทอดมา } worker.prototype = บุคคลใหม่ (); // สืบทอดผ่านห่วงโซ่ต้นแบบอินสแตนซ์ของวัตถุที่สร้างอินสแตนซ์โดย supertype ถูกกำหนดให้กับแอตทริบิวต์ต้นแบบของ subclass var p2 = new Worker (); console.log (p2.name); console.log (วัตถุอินสแตนซ์ p2); // ture ตัวสร้างทั้งหมดได้รับการสืบทอดมาจากวัตถุกุญแจสำคัญในการใช้การสืบทอดด้านบนคือ: Worker.prototype = คนใหม่ (); ทำให้ต้นแบบของคนงานเป็นตัวอย่างของบุคคลและสืบทอดผ่านห่วงโซ่ต้นแบบ
หมายเหตุ: เมื่อใช้โซ่ต้นแบบเพื่อใช้การสืบทอดคุณไม่สามารถใช้ตัวอักษรวัตถุเพื่อสร้างวิธีการต้นแบบเนื่องจากสิ่งนี้จะขัดจังหวะความสัมพันธ์และเขียนห่วงโซ่ต้นแบบใหม่
ปัญหาการสืบทอดโซ่ต้นแบบ:
1. มีปัญหาการแบ่งปันอ้างอิงและพวกเขายังคงแบ่งปันพื้นที่เดียวกันและคลาสย่อยจะส่งผลกระทบต่อคลาสแม่
ฟังก์ชั่นบุคคล () {this.bodys = ['ตา', 'เท้า']; } function worker () {} worker.prototype = คนใหม่ (); var p1 = คนงานใหม่ (); p1.bodys.push ('มือ'); var p2 = คนงานใหม่ (); console.log (p1.bodys); console.log (p2.bodys);2. เมื่อสร้างอินสแตนซ์ของชนิดย่อยพารามิเตอร์ไม่สามารถส่งผ่านในตัวสร้าง supertype
ดังนั้นวิธีการแก้ปัญหาทั้งสองของห่วงโซ่ต้นแบบ? จากนั้นดำเนินการต่อเพื่อดูวิธีการสืบทอดด้านล่าง ~
2. การยืมตัวสร้างการสืบทอด (เรียกอีกอย่างว่าการแอบอ้างวัตถุวัตถุปลอมแปลงหรือมรดกแบบคลาสสิก)
ฟังก์ชั่นบุคคล (ชื่ออายุ) {this.name = name; this.age = อายุ; this.bodys = ['ตา', 'เท้า']; } person.prototype.showname = function () {console.log (this.name); } ผู้ทำงานฟังก์ชั่น (ชื่อ, อายุ, งาน) {person.call (นี่, ชื่อ, อายุ); this.job = Job; // subclass เพิ่มแอตทริบิวต์} var p1 = คนงานใหม่ ('mumu', '18', 'นักเรียน'); p1.bodys.push ('มือ'); var p2 = คนงานใหม่ (); console.log (p1.name); console.log (p2.bodys); console.log (p1.showname ());การวิเคราะห์สั้น ๆ เกี่ยวกับหลักการข้างต้นของการใช้ตัวสร้างที่ยืมมา: person.call (นี่, ชื่อ, อายุ); รหัสนี้เรียกตัวสร้างหลักสืบทอดแอตทริบิวต์หลักและใช้วิธีการโทรเพื่อเรียกตัวสร้างบุคคลเพื่อเปลี่ยนสิ่งนี้เมื่อฟังก์ชั่นถูกเรียกใช้งาน ที่นี่สิ่งนี้-> ใหม่เป็นวิธีการสร้างวัตถุคนงานที่ปลอมตัว: ส่งผู้ปฏิบัติงานไปยังบุคคลด้านบน
เมื่อประเภทการอ้างอิงถูกวางไว้ในตัวสร้างมันจะไม่ถูกแชร์ดังนั้น P2 จึงไม่ได้รับผลกระทบ
การยืมวิธีการสืบทอดคอนสตรัคเตอร์ที่นี่จะแก้ปัญหาที่ห่วงโซ่ต้นแบบไม่สามารถส่งผ่านพารามิเตอร์และประเภทการอ้างอิงแบ่งปัน
เคล็ดลับ: การโทร () และใช้ () วิธีการสามารถเปลี่ยนขอบเขตของการดำเนินการฟังก์ชั่นในระยะสั้นเปลี่ยนเนื้อหาที่ชี้ไปที่ฟังก์ชั่นนี้
ทั้งการโทร () และใช้ () ยอมรับพารามิเตอร์สองพารามิเตอร์: อันแรกคือขอบเขตของฟังก์ชั่นที่ทำงานอยู่ในนั้นและอีกพารามิเตอร์คือพารามิเตอร์ที่ผ่าน
ความแตกต่างระหว่างการโทรและการสมัครคือความแตกต่างในพารามิเตอร์
พารามิเตอร์ในการโทรจะต้องแจกแจงทีละตัว
พารามิเตอร์ในการสมัครจะต้องเป็นอาร์เรย์หรืออาร์กิวเมนต์วัตถุ
ดังนั้นคำถามคือ: ทำไมผลของ p1.showname () ผิด? ---- เนื่องจากวิธีการสืบทอดการยืมตัวสร้างสามารถสืบทอดคุณลักษณะและวิธีการในตัวสร้างเท่านั้น ที่นี่เรายังพบปัญหาของการยืมตัวสร้าง
หมายเหตุ: เนื่องจากเราใส่วิธีการทั้งหมดในตัวสร้างทุกครั้งที่เราสร้างอินสแตนซ์เราจะจัดสรรพื้นที่หน่วยความจำให้กับทรัพยากรของเสียดังนั้นเราจึงมักจะใส่วิธีการในต้นแบบและแอตทริบิวต์ในตัวสร้าง
การยืมตัวสร้างปัญหาการสืบทอด:
เนื่องจากการยืมตัวสร้างสามารถสืบทอดคุณสมบัติและวิธีการในตัวสร้างเท่านั้นวิธีการที่กำหนดไว้ในต้นแบบ supertype นั้นมองไม่เห็นกับคลาสย่อยดังนั้นจึงเทียบเท่ากับการไม่มีต้นแบบ เป็นผลให้วิธีการทั้งหมดสามารถกำหนดได้ในตัวสร้างเท่านั้นดังนั้นจึงไม่มีฟังก์ชั่นมัลติเพล็กซ์
ดังนั้นวิธีการแก้ปัญหาที่เกิดจากการยืมตัวสร้าง? จากนั้นขึ้นอยู่กับวิธีการสืบทอดต่อไปนี้
3. การรวมกันการสืบทอด (มรดกแบบหลอกคลาสสิก)
ฟังก์ชั่นบุคคล (ชื่ออายุ) {this.name = name; this.age = อายุ; } person.prototype.showname = function () {console.log (this.name); } ผู้ทำงานฟังก์ชั่น (ชื่อ, อายุ, งาน) {person.call (นี่, ชื่อ, อายุ); // ยืมตัวสร้าง this.job = Job; } worker.prototype = คนใหม่ (); // chain chain chain สืบทอด var p1 = คนงานใหม่ ('mumu', '18', 'นักเรียน'); console.log (p1.age); p1.showname ();การสืบทอดการรวมกัน: การรวมห่วงโซ่ต้นแบบกับตัวสร้างที่ยืมมา
แนวคิด: โดยใช้ห่วงโซ่ต้นแบบเพื่อใช้การสืบทอดของคุณลักษณะและวิธีการบนต้นแบบและโดยการยืมตัวสร้างเพื่อใช้การสืบทอดของแอตทริบิวต์อินสแตนซ์
ตัวอย่างบุคคลข้างต้นโทร (นี่ชื่ออายุ); ยืมตัวสร้างเพื่อสืบทอดคุณลักษณะ
Worker.prototype = คนใหม่ (); ห่วงโซ่ต้นแบบสืบทอดวิธีการหลีกเลี่ยงข้อบกพร่องของทั้งสองรวมข้อดีของพวกเขาและกลายเป็นแบบจำลองการสืบทอดที่ใช้กันมากที่สุด
ปัญหาการสืบทอดการรวมกัน:
ตัวสร้าง Supertype เรียกว่าสองครั้งหนึ่งครั้งเมื่อสร้างต้นแบบย่อยชนิดและเวลาอื่น ๆ ภายในตัวสร้างชนิดย่อย
เพื่อแก้ปัญหานี้เราต้องใช้การสืบทอดการรวมกันของกาฝาก
4. การสืบทอดต้นแบบ
ฟังก์ชันวัตถุ (proto) {ฟังก์ชัน f () {} f.prototype = proto; คืน F () ใหม่; } var person = {ชื่อ: 'mumu', เพื่อน: ['xiaxia', 'susu']}; var otherperson = วัตถุ (บุคคล); Anotherperson.friends.push ('Wen'); var yetanotherperson = วัตถุ (บุคคล); Anotherperson.friends.push ('tian'); console.log (person.friends); // ["Xiaxia", "susu", "wen", "tian"] console.log (อีกคนหนึ่ง .__ โปรโต __) // วัตถุ {ชื่อ: "mumu", เพื่อน: อาเรย์ [4]}}การวิเคราะห์สั้น ๆ : ฟังก์ชั่นวัตถุ (proto) เป็นฟังก์ชันการถ่ายทอดชั่วคราวพารามิเตอร์โปรโตในนั้นแสดงถึงวัตถุที่จะส่งผ่านตัวสร้าง F () เป็นวัตถุที่สร้างขึ้นใหม่ชั่วคราวซึ่งใช้เพื่อเก็บวัตถุที่ผ่าน f.prototype = proto; กำหนดอินสแตนซ์วัตถุให้กับวัตถุต้นแบบของตัวสร้าง F และในที่สุดก็ส่งคืนอินสแตนซ์ของวัตถุของวัตถุที่ผ่าน การสืบทอดต้นแบบหรือการแบ่งปันแอตทริบิวต์ประเภทอ้างอิง
5. การสืบทอดปรสิต
// วัตถุฟังก์ชั่นการขนส่งชั่วคราว (proto) {function f () {} f.prototype = proto; คืน F () ใหม่; } // ฟังก์ชั่นปรสิตสร้าง (proto) {var f = วัตถุ (proto); f.love = function () {return this.name; } return f; } var person = {ชื่อ: 'mumu', เพื่อน: ['xiaxia', 'susu']}; var otherperson = สร้าง (บุคคล); console.log (otherperson.love ()); การสืบทอดการรวมกันของกาฝาก6. การสืบทอดการรวมกันของปรสิต
ฟังก์ชันวัตถุ (proto) {ฟังก์ชัน f () {} f.prototype = proto; คืน F () ใหม่; } // ฟังก์ชั่นฟังก์ชั่นปรสิตสร้าง (บุคคล, คนงาน) {var f = object (person.prototype); // สร้างวัตถุ f.constructor = คนงาน; // ปรับตัวชี้การก่อสร้างต้นแบบและปรับปรุงผู้ปฏิบัติงานวัตถุ this.age = อายุ; } person.prototype.showname = function () {console.log (this.name); } ผู้ทำงานฟังก์ชั่น (ชื่อ, อายุ, งาน) {person.call (นี่, ชื่อ, อายุ); this.job = งาน; } สร้าง (บุคคล, คนงาน); // ปรสิตรวมกันมรดก var p1 = บุคคลใหม่ ('mumu', '18', 'นักเรียน'); p1.showname ();วิธีนี้ยังเป็นวิธีที่สมบูรณ์แบบและเหมาะที่สุดในการใช้วิธีการสืบทอดในขณะนี้
หมายเหตุการเรียนรู้การสืบทอดการสืบทอด JavaScript ด้านบน [ต้องอ่านสำหรับผู้เริ่มต้น] เป็นเนื้อหาทั้งหมดที่ใช้ร่วมกันโดยบรรณาธิการ ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น