ก่อนที่จะทำอะไรบางอย่างคุณต้องชัดเจนเกี่ยวกับประโยชน์ของการทำมันก่อน ฉันเชื่อว่าไม่มีใครเต็มใจที่จะทำสิ่งต่าง ๆ โดยไม่มีเหตุผล โดยทั่วไปเมื่อเราออกแบบชั้นเรียนเราหวังว่าจะลดความซ้ำซ้อนของรหัส การใช้มรดกสามารถทำสิ่งนี้ได้อย่างสมบูรณ์แบบ ด้วยความช่วยเหลือของกลไกการสืบทอดคุณสามารถออกแบบอีกครั้งตามคลาสที่มีอยู่และใช้ประโยชน์จากวิธีการต่าง ๆ ที่พวกเขามีอยู่แล้วและปรับเปลี่ยนการออกแบบได้ง่ายขึ้น ฉันจะไม่พูดเรื่องไร้สาระมากนักยกตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นบุคคล (ชื่อ) {
this.name = ชื่อ;
-
person.prototype.getName = function () {
ส่งคืนสิ่งนี้ชื่อ;
-
ฟังก์ชั่นบล็อกเกอร์ (ชื่อบล็อก) {
person.call (ชื่อนี้);
this.blog = บล็อก;
-
var Bloger = บล็อกใหม่ ("Zhen", "// www.vevb.com");
การแจ้งเตือน (bloger.name == "zhenn"); /*กลับไปที่ ture*/
Alert (bloger.blog) /*tip//www.vevb.com*/
การแจ้งเตือน (bloger.getName () == "Zhenn"); /*เคล็ดลับ "bloger.getName ไม่ใช่ฟังก์ชั่น"*/
จากตัวอย่างข้างต้นเราจะเห็นได้ว่าบล็อกเกอร์เรียกคุณสมบัติและวิธีการดั้งเดิมของผู้เรียนชั้นเรียนผ่านการโทรภายใน (สำหรับคำอธิบายของการโทรโปรดดูที่ //www.vevb.com/article/62086.htm) ซึ่งสามารถเข้าใจได้ว่าเป็นบล็อกเกอร์ อย่างไรก็ตามนักเรียนที่ระมัดระวังจะพบว่าวิธีการในวัตถุต้นแบบของบุคคลนั้นไม่สามารถสืบทอดได้โดยอาศัยการโทรเพียงอย่างเดียวซึ่งเป็นสาเหตุที่ทำให้ "บล็อกเกอร์ getName ไม่ใช่ฟังก์ชั่น" แต่ไม่ต้องกังวลเพียงแค่จัดการกับรหัสข้างต้นเพื่อแก้ปัญหานี้!
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นบุคคล (ชื่อ) {
this.name = ชื่อ;
-
person.prototype.getName = function () {
ส่งคืนสิ่งนี้ชื่อ;
-
ฟังก์ชั่นบล็อกเกอร์ (ชื่อบล็อก) {
person.call (ชื่อนี้);
this.blog = บล็อก;
-
/*โปรดทราบรหัสสองบรรทัดต่อไปนี้*/
Bloger.prototype = คนใหม่ ();
Bloger.prototype.constructor = บล็อกเกอร์;
var Bloger = บล็อกใหม่ ("Zhen", "// www.vevb.com");
การแจ้งเตือน (bloger.name == "zhenn"); /*กลับไปที่ ture*/
Alert (bloger.blog) /*tip//www.vevb.com*/
การแจ้งเตือน (bloger.getName () == "Zhenn"); /* แจ้งความจริง*//
ที่นี่เราต้องอธิบายรหัสสองบรรทัดนี้ เรารู้ว่าตัวสร้างแต่ละตัวมีแอตทริบิวต์ต้นแบบซึ่งชี้ไปที่วัตถุต้นแบบของตัวสร้าง ในความเป็นจริงวัตถุต้นแบบยังเป็นวัตถุอินสแตนซ์ แต่แอตทริบิวต์และวิธีการที่กำหนดไว้ในวัตถุต้นแบบสามารถให้กับวัตถุอินสแตนซ์ทั้งหมดที่จะแบ่งปันได้ จากนี้เราจะเห็นได้ว่าความตั้งใจในการเพิ่มสองบรรทัดของรหัสคือการตั้งค่าวัตถุต้นแบบของคลาสย่อยเพื่อชี้ไปที่วัตถุอินสแตนซ์ของคลาสแม่และวัตถุอินสแตนซ์ของคลาสแม่จะสืบทอดวิธีแอตทริบิวต์ต้นแบบทั้งหมดของคลาสแม่ซึ่งบรรลุเป้าหมายของเรา ต้นแบบของคลาสย่อยสืบทอดคุณสมบัติและวิธีการของวัตถุอินสแตนซ์คลาสแม่ทั้งหมด
อย่างไรก็ตามคุณควรทราบว่า bloger.prototype.constructor = bloger; บรรทัดของรหัสนี้เนื่องจากเมื่อต้นแบบ subclass ถูกตั้งค่าเป็นอินสแตนซ์ของคลาสแม่แอตทริบิวต์คอนสตรัคเตอร์จะชี้ไปที่คลาสแม่ดังนั้นตัวสร้างของต้นแบบย่อยจะต้องตั้งค่าให้ชี้ไปที่คลาสย่อยอีกครั้ง ณ จุดนี้การสืบทอดคลาสของ JavaScript ได้ถูกนำไปใช้อย่างสมบูรณ์แบบ!
เพื่อให้การประกาศของคลาสย่อยง่ายขึ้นกระบวนการทั้งหมดของการขยายคลาสย่อยสามารถเขียนได้ในฟังก์ชั่นที่เรียกว่า Extend ซึ่งคือการสร้างคลาสใหม่ตามโครงสร้างคลาสที่กำหนด:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นขยาย (childclass, parentclass) {
var f = ฟังก์ชันใหม่ ();
f.prototype = parentclass.prototype;
childclass.prototype = new f ();
childclass.prototype.constructor = ChildClass;
-
ด้วยฟังก์ชั่นขยายนี้คุณสามารถขยายคลาสย่อยได้อย่างง่ายดาย เพียงแค่เรียกฟังก์ชันนี้ รหัสสองบรรทัดที่เพิ่มขึ้นด้านบนสามารถเปลี่ยนเพื่อขยาย (บล็อกเกอร์บุคคล) ซึ่งสามารถบรรลุการสืบทอดที่สมบูรณ์!