บทความนี้สรุปการใช้ JavaScript เกี่ยวกับการสืบทอด แบ่งปันสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:
ตัวอย่าง:
คัดลอกรหัสดังนี้:/**
* คลาสย่อยการใช้งานสืบทอดคลาสแม่ แต่ไม่ได้สร้างคุณสมบัติและวิธีการที่ไม่จำเป็น
* @returns {function}
-
กำหนด (ฟังก์ชัน () {
ฟังก์ชั่น return (ชนิดย่อย, supertype) {
var proto = วัตถุใหม่ (supertype.prototype);
Proto.Constructor = ชนิดย่อย;
subtype.prototype = proto;
-
-
-
กำหนด (ฟังก์ชัน () {
ฟังก์ชั่นการผ่าตัด
-
this.str = s;
this.length = this.str.length;
-
Ostring.prototype.show = function () {
การแจ้งเตือน (this.str);
-
กลับมา
-
-
กำหนด (['สืบทอด', 'string'], ฟังก์ชั่น (สืบทอด,, string) {
ฟังก์ชั่น wstring (s) {
// ใช้การโทรไปยังตัวสร้างคลาสแม่
OSTRING.CALL (นี่, s);
this.chlength = 2 * s.length;
-
// สืบทอดคุณลักษณะอื่น ๆ
สืบทอด (WSTRING, OSTRING);
wstring.prototype.add = ฟังก์ชั่น (w)
-
การแจ้งเตือน (this.str + w);
-
กลับ wstring;
-
ดูตัวอย่างอีกครั้ง
1. ใช้ฟังก์ชั่นเพื่อนำไปใช้:
คัดลอกรหัสดังนี้: ฟังก์ชันบุคคล (ชื่อ) {
this.name = ชื่อ;
-
person.prototype.getName = function () {
ส่งคืนสิ่งนี้ชื่อ;
-
ฟังก์ชั่นผู้แต่ง (ชื่อหนังสือ) {
this.inherit = บุคคล;
this.inherit (ชื่อ);
this.books = หนังสือ;
-
var au = ผู้แต่งใหม่ ("Dororo", "เรียนรู้มาก");
au.name
หรือเทียบเท่า:
คัดลอกรหัสดังนี้: ฟังก์ชันบุคคล (ชื่อ) {
this.name = ชื่อ;
-
person.prototype.getName = function () {
ส่งคืนสิ่งนี้ชื่อ;
-
ฟังก์ชั่นผู้แต่ง (ชื่อหนังสือ) {
person.call (ชื่อนี้);
this.books = หนังสือ;
-
var au = ผู้แต่งใหม่ ("Dororo", "เรียนรู้มาก");
au.getName
เนื่องจากนี่เป็นเพียงการใช้สิ่งนี้เป็นพารามิเตอร์การเรียกตัวสร้างของบุคคลระดับพาเรนต์และกำหนดโดเมนทั้งหมดที่กำหนดให้กับคลาสพาเรนต์ให้กับคลาสย่อยของผู้เขียนโดเมนใด ๆ ที่กำหนดไว้นอกตัวสร้างบุคคลระดับพาเรนต์จะไม่ได้รับการสืบทอด ดังนั้นในตัวอย่างข้างต้น AU.getName จะไม่ถูกกำหนด (ไม่ได้กำหนด) เนื่องจาก GetName ถูกกำหนดไว้ในวัตถุต้นแบบของบุคคล
ยิ่งกว่านั้นตัวสร้างของคลาสย่อยจะต้องเรียกตัวสร้างคลาสแม่ก่อนที่จะกำหนดโดเมนของตัวเองเพื่อไม่ให้เขียนทับคำจำกัดความของคลาสย่อยโดยคลาสหลัก กล่าวอีกนัยหนึ่งผู้เขียนกำหนดหนังสือทรัพย์สินหลังจากบุคคลโทรมิฉะนั้นจะถูกเขียนทับโดยทรัพย์สินด้วยตนเอง ในเวลาเดียวกันมันเป็นสิ่งที่ดีที่สุดที่จะไม่ใช้ต้นแบบเพื่อกำหนดโดเมนฟังก์ชันของคลาสย่อยในคลาสย่อยเพราะหลังจากคลาสย่อยเป็นใหม่และอินสแตนซ์ต้องดำเนินการต้นแบบและจากนั้นคอนสตรัคเตอร์ของคลาสพาเรนต์จะเรียกว่า
2. ใช้ต้นแบบเพื่อนำไปใช้:
คัดลอกรหัสดังนี้: ฟังก์ชันบุคคล (ชื่อ) {
this.name = ชื่อ;
-
person.prototype.getName = function () {
ส่งคืนสิ่งนี้ชื่อ;
-
ฟังก์ชั่นผู้แต่ง (ชื่อหนังสือ) {
this.books = หนังสือ;
-
ผู้แต่ง. prototype = บุคคลใหม่ (ชื่อ);
ผู้แต่ง. prototype.constructor = ผู้เขียน;
Author.prototype.getBooks = function () {
ส่งคืนนี้หนังสือ;
-
var au1 = ผู้แต่งใหม่ ("Dororo1", "เรียนรู้มาก");
var au2 = ผู้แต่งใหม่ ("Dororo2", "เรียนรู้น้อยลง");
การแจ้งเตือน (au1.getName ());
การแจ้งเตือน (au2.getName ());
วิธีนี้หลีกเลี่ยงปัญหาที่ต้นแบบไม่สามารถสืบทอดได้ในการใช้งานฟังก์ชั่น เนื่องจากผู้เขียน. prototype = บุคคลใหม่ (ชื่อ); อินสแตนซ์ใหม่ () อินสแตนซ์จะเรียกคุณสมบัติทั้งหมดของบุคคลที่สร้างและต้นแบบ แต่ข้อเสียคือผู้แต่ง. prototype ได้รับการสร้างอินสแตนซ์ ดังนั้นเมื่อคลาสย่อยได้รับการสร้างอินสแตนซ์ประเภทข้อมูลที่ไม่ใช่ฐานทั้งหมดเป็นสำเนาอ้างอิง ดังนั้นในตัวอย่างข้างต้นค่าที่ส่งคืนโดยตัวอย่าง Au1 หรือ Au2 คือ Dororo1
3. ใช้ "ไฮบริด" เพื่อให้บรรลุ
คัดลอกรหัสดังนี้: ฟังก์ชันบุคคล (ชื่อ) {
this.name = ชื่อ;
-
person.prototype.getName = function () {
ส่งคืนสิ่งนี้ชื่อ;
-
ฟังก์ชั่นผู้แต่ง (ชื่อหนังสือ) {
this.base = บุคคลใหม่ (ชื่อ);
สำหรับ (คีย์ var ใน this.base) {
ถ้า (! [คีย์]) {
[key] = this.base [key];
-
-
this.book = หนังสือ;
-
var au1 = ผู้แต่งใหม่ ("Dororo1", "Work");
var au2 = ผู้แต่งใหม่ ("dororo2", "play");
การแจ้งเตือน (au1.getName ());
การแจ้งเตือน (au2.getName ());
au1.book;
au2.book;
มันเป็นของส่วนขยายคัดลอกโดเมนทั้งหมดของคลาสแม่ไปยังคลาสย่อย ไม่มีปัญหาในสองด้านข้างต้นเลย
โหมดการรวมกันของกาฝาก)
การสืบทอด JS รวมถึงการสืบทอดคุณลักษณะและการสืบทอดวิธีการซึ่งดำเนินการผ่านวิธีการที่แตกต่างกัน
1. มรดกของคุณลักษณะ
การสืบทอดคุณลักษณะนั้นทำได้โดยการเปลี่ยนสภาพแวดล้อมการดำเนินการของฟังก์ชั่น สภาพแวดล้อมการดำเนินการของการเปลี่ยนฟังก์ชั่นสามารถใช้งานได้โดยใช้สองวิธี: call () และใช้ ()
ก่อนอื่นเราสร้าง "คลาส" ของสัตว์ (เพราะไม่มีแนวคิดของคลาสใน JS นี่เป็นเพียงการเยาะเย้ยมันเป็นเพียงวัตถุฟังก์ชันฟังก์ชัน)
คัดลอกรหัสดังต่อไปนี้: ฟังก์ชั่นสัตว์ (typename) {
// เพิ่มชื่อ typename คุณสมบัติสำหรับสภาพแวดล้อมการดำเนินการของวิธีการปัจจุบัน (นี้)
// แต่สภาพแวดล้อมการดำเนินการ (นี้) จะต้องดำเนินการก่อนที่จะสามารถกำหนดได้
this.typename = typename;
this.colors = ["สีแดง", "ในขณะที่"];
-
// ฉันต้องการเพิ่มวิธีการสอง (การแชร์วัตถุ) ลงในต้นแบบของฟังก์ชัน
Animal.prototype.shout = function () {Alert ("ฉัน: -" + this.typename);};
Animal.prototype.eat = function () {Alert ("I am: -" + this.typename)};
//-กำหนดสิงโต-"คลาส" (จริง ๆ แล้วเป็นฟังก์ชัน)
ฟังก์ชัน Lion (TN) {
//-ดำเนินการวิธีการสัตว์และปรับเปลี่ยนสภาพแวดล้อมการดำเนินการของสัตว์ให้เป็นสิงโตตัวนี้ผ่านพารามิเตอร์แรกของการใช้
// ในทำนองเดียวกันสิงโตสิ่งนี้จะต้องดำเนินการเพื่อพิจารณาว่ามันคือใคร
Animal.apply (นี่, ["Lion"]); //-สืบทอดคุณลักษณะตัวแปรของคลาสแม่นี่เป็นเพราะมันเป็นสิงโตตัวใหม่นี่คือสิงโตนี่
-
Lion.prototype = iment.prototype; // สืบทอดวิธีการคลาสแม่และทำเสร็จ-แต่สิ่งนี้ไม่ได้เขียนไว้อย่างดี เมื่อคลาสเด็กเพิ่มวิธีการคลาสแม่ก็มีวิธีนี้ด้วย นี่คือการอ้างอิงตัวชี้
lion.prototype.hunt = function () {
การแจ้งเตือน ("ฉัน: สิงโตฉันต้องการตามล่า ~~ ・ ~");
-
var aminm = สัตว์ใหม่ ();
aminm.hunt (); // --- คุณสามารถเข้าถึงวิธี subclass ซึ่งไม่ดี
// ---- งั้นจะแก้ปัญหานี้ได้อย่างไร? - - - - -
// --- โซลูชัน: คุณสามารถเขียนสิ่งนี้เมื่อสืบทอดวิธีการ:
Lion.prototype = New Animal (); // สืบทอดวิธีการคลาสแม่และกำหนดวัตถุสัตว์ให้กับต้นแบบต้นแบบ ในความเป็นจริงมันยังมีคุณลักษณะในนั้น
Var Lion = New Lion (); // นอกเหนือจากการสร้างคำหลักใหม่แล้วมันจะแก้ไขสภาพแวดล้อมการดำเนินการของวัตถุสิงโตกับวัตถุสิงโตเอง
// --- กล่าวอีกนัยหนึ่งหลังจากใหม่เสร็จแล้วในฟังก์ชั่นสิงโตคือฟังก์ชั่นสิงโตเองและจากนั้นฟังก์ชั่นสิงโตจะเรียก
วิเคราะห์คำหลักใหม่:
คำหลักใหม่นั้นยอดเยี่ยมมาก ในรหัสก่อนหน้านี้คำหลักใหม่จะเสร็จสิ้นงานต่อไปนี้:
1) เปิดพื้นที่กองเพื่อเตรียมเก็บวัตถุสิงโต
2) ปรับเปลี่ยนสภาพแวดล้อมการดำเนินการของวัตถุสิงโตเองเพื่อให้ฟังก์ชั่นสิงโตนี้ชี้ไปที่วัตถุฟังก์ชั่นไลออนเอง
3) เรียก "ตัวสร้าง" ของ Lion "คลาส" และสร้างวัตถุสิงโต
4) กำหนดที่อยู่ฮีปของวัตถุฟังก์ชันสิงโตให้กับตัวแปร L และในเวลานี้ l ชี้ไปที่วัตถุฟังก์ชัน Lion
Lion.shout ();
Lion.eat ();
อย่างไรก็ตามการสืบทอดนี้มีข้อเสีย: ตัวสร้างของคลาสแม่เรียกว่าสองครั้งโทรหนึ่งครั้งแล้วใหม่อีกครั้ง
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน