ก่อนอื่นมาศึกษาคำถามในเชิงลึก การสืบทอดวัตถุ JavaScript คืออะไร?
ตัวอย่างเช่นเรามีตัวสร้างของวัตถุ "สัตว์"
ฟังก์ชั่นสัตว์ () {this.type = 'สัตว์'; -นอกจากนี้ยังมีตัวสร้างสำหรับวัตถุ "แมว"
ฟังก์ชัน cat (ชื่อ, สี) {this.name = name; this.color = color; -เรารู้ว่าแมวก็เป็นของสัตว์ด้วย หากวัตถุแมวนี้ต้องการสืบทอดคุณสมบัติของวัตถุสัตว์เราควรทำอย่างไร?
การเชื่อมต่อคอนสตรัคเตอร์
การใช้การเชื่อมต่อคอนสตรัคเตอร์เป็นวิธีที่ง่ายที่สุดเพียงใช้การโทรหรือใช้เพื่อผูกวัตถุพาเรนต์กับวัตถุของตัวเอง
ฟังก์ชั่นแมว (ชื่อ, สี) {iment.apply (นี่, อาร์กิวเมนต์); this.name = ชื่อ; this.color = color; } var cat1 = แมวใหม่ ("ฮ่าฮ่า", 'สีแดง'); console.log (cat1.type); //สัตว์อย่างไรก็ตามวิธีนี้ค่อนข้างหายาก
คัดลอกมรดก
หากคุณสมบัติและวิธีการทั้งหมดของวัตถุหลักถูกคัดลอกไปยังวัตถุเด็กสามารถสืบทอดได้
ฟังก์ชั่นขยาย (ลูก, พาเรนต์) {var p = parent.prototype; var c = child.prototype; สำหรับ (var i ใน p) {c [i] = p [i]; } c.uber = p; // ฟังก์ชันบริดจ์}วิธีใช้:
ขยาย (แมวสัตว์); var cat1 = แมวใหม่ ("ฮ่าฮ่า", "สีแดง"); การแจ้งเตือน (cat1.type); // สัตว์การสืบทอดต้นแบบ (ต้นแบบ)
เมื่อเปรียบเทียบกับการเชื่อมโยงโดยตรงข้างต้นวิธีการสืบทอดต้นแบบนั้นเป็นเรื่องธรรมดามากขึ้น ฉันได้สรุปต้นแบบตัวเองสั้น ๆ
แต่ละฟังก์ชั่นมีแอตทริบิวต์ต้นแบบซึ่งเป็นการอ้างอิงถึงวัตถุ เมื่อสร้างอินสแตนซ์ใหม่โดยใช้คำหลักใหม่วัตถุอินสแตนซ์นี้จะสืบทอดแอตทริบิวต์และวิธีการจากวัตถุต้นแบบ
กล่าวคือหากแอตทริบิวต์ต้นแบบของตัวสร้าง "แมว" ชี้ไปที่อินสแตนซ์ "สัตว์" จากนั้นเมื่ออินสแตนซ์วัตถุ "แมว" ถูกสร้างขึ้นคุณสมบัติและวิธีการของวัตถุ "สัตว์" ได้รับการสืบทอด
ตัวอย่างการสืบทอด
cat.prototype = สัตว์ใหม่ (); cat.prototype.constructor = cat; var cat1 = แมวใหม่ ("ฮ่าฮ่า", "สีแดง"); console.log (cat1.constructor == cat); // True Console.log (cat1.type); //สัตว์1. ในบรรทัดแรกของรหัสเราชี้วัตถุต้นแบบของฟังก์ชัน CAT ไปที่อินสแตนซ์ของวัตถุสัตว์ (ซึ่งมีแอตทริบิวต์ประเภทของสัตว์)
2. บรรทัดที่สองของรหัสหมายถึงอะไร?
1) ก่อนอื่นถ้าเราไม่เพิ่มรหัสบรรทัดนี้ให้เรียกใช้
cat.prototype = สัตว์ใหม่ ();
console.log (cat.prototype.constructor == สัตว์); //จริง
กล่าวอีกนัยหนึ่งในความเป็นจริงวัตถุต้นแบบแต่ละชิ้นมีแอตทริบิวต์ตัวสร้างชี้ไปที่ฟังก์ชั่นตัวสร้าง
2) มาดูรหัสต่อไปนี้
cat.prototype = สัตว์ใหม่ (); var cat1 = แมวใหม่ ("ฮ่าฮ่า", 'สีแดง'); console.log (cat1.constructor == สัตว์); //จริงจากข้างต้นเราจะเห็นว่าตัวสร้างของอินสแตนซ์ CAT1 เป็นสัตว์ดังนั้นจึงเห็นได้ชัดว่าผิด - - CAT1 ถูกสร้างขึ้นอย่างชัดเจนโดย CAT () ดังนั้นเราควรแก้ไขด้วยตนเอง ค่าตัวสร้างของวัตถุ cat.prototype เปลี่ยนเป็น CAT
3) นี่เป็นจุดที่เราควรให้ความสนใจ หากเราแทนที่วัตถุต้นแบบเราควรแก้ไขแอตทริบิวต์ตัวสร้างของวัตถุต้นแบบด้วยตนเอง
o.prototype = {};
o.prototype.constructor = o;
สืบทอดต้นแบบโดยตรง
เนื่องจากในวัตถุสัตว์คุณสมบัติที่ไม่เปลี่ยนแปลงสามารถเขียนได้โดยตรงในสัตว์ prototype จากนั้นให้ cat.prototype ชี้ไปที่ iment.prototype ซึ่งตระหนักถึงการสืบทอด
ตอนนี้เรามาเขียนวัตถุสัตว์ใหม่ก่อน:
ฟังก์ชั่นสัตว์ () {} iment.prototype.type = 'สัตว์';จากนั้นใช้การสืบทอด:
cat.prototype = iment.prototype; cat.prototype.constructor = cat; var cat1 = แมวใหม่ ("ฮ่าฮ่า", "สีแดง"); console.log (cat1.type); // สัตว์เมื่อเปรียบเทียบกับวิธีการก่อนหน้านี้วิธีนี้ดูเหมือนจะมีประสิทธิภาพมากขึ้น (ไม่มีการสร้างอินสแตนซ์ของสัตว์) ซึ่งช่วยประหยัดพื้นที่ แต่ถูกต้องหรือไม่? คำตอบไม่ถูกต้องมาอ่านต่อ
cat.prototype = iment.prototype;
บรรทัดของรหัสนี้อนุญาตให้ cat.prototype และ iment.prototype ชี้ไปที่วัตถุเดียวกันดังนั้นหากมีการเปลี่ยนแปลงคุณสมบัติของ cat.prototype มันจะสะท้อนให้เห็นใน iment.prototype ซึ่งเห็นได้ชัดว่าไม่ใช่สิ่งที่เราต้องการเห็น
ตัวอย่างเช่นเราเรียกใช้:
console.log (iment.prototype.constructor == สัตว์) // false
มันกลายเป็นเท็จทำไม? cat.prototype.constructor = cat; บรรทัดนี้จะเปลี่ยนคุณสมบัติตัวสร้างของ iment.prototype
ใช้วัตถุเปล่าเป็นตัวกลาง
var f = function () {}; f.prototype = iment.prototype; cat.prototype = new f (); cat.prototype.constructor = cat;การรวมสองวิธีข้างต้นเพราะ F เป็นวัตถุที่ว่างเปล่ามันเกือบจะไม่ได้ครอบครองหน่วยความจำ การปรับเปลี่ยนวัตถุต้นแบบของ CAT ในเวลานี้จะไม่ส่งผลกระทบต่อวัตถุต้นแบบของสัตว์
console.log (iment.prototype.constructor == สัตว์); // จริง
จากนั้นเราห่อหุ้มวิธีข้างต้น:
ฟังก์ชั่นขยาย (เด็ก, พาเรนต์) {var f = function () {}; f.prototype = parent.prototype; child.prototype = new f (); child.prototype.constructor = เด็ก; child.uber = parent.prototype; -เมื่อใช้งานวิธีนี้มีดังนี้:
ขยาย (แมวสัตว์); var cat1 = แมวใหม่ ("ฮ่าฮ่า", "สีแดง"); console.log (cat1.type); // สัตว์child.uber = parent.prototype; บรรทัดของรหัสนี้เป็นฟังก์ชันบริดจ์ซึ่งอนุญาตให้แอตทริบิวต์ Uber ของวัตถุเด็กชี้ไปที่แอตทริบิวต์ต้นแบบของวัตถุแม่ซึ่งเทียบเท่ากับการเปิดช่องทางที่เรียกว่า Uber บนวัตถุของตัวเองเพื่อให้อินสแตนซ์ของวัตถุลูกสามารถใช้คุณสมบัติและวิธีการทั้งหมดของวัตถุแม่
ข้างต้นคือความเข้าใจของฉันในการสืบทอดวัตถุจาวาสคริปต์ ฉันหวังว่ามันจะช่วยคุณได้มากหรือน้อย ขอบคุณสำหรับการอ่าน