การสืบทอดในจาวาสคริปต์คืออะไร

ใน JavaScript การสืบทอดเป็นกลไกที่อนุญาตให้สร้างคลาสใหม่ตามคลาสที่มีอยู่ การสืบทอดให้ความยืดหยุ่นสำหรับคลาสย่อยและสามารถนำเมธอดและตัวแปรของคลาสพาเรนต์กลับมาใช้ใหม่ได้ กระบวนการสืบทอดมาจากแบบทั่วไปไปจนถึงแบบพิเศษ โซ่และตัวสร้าง

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, JavaScript เวอร์ชัน 1.8.5, คอมพิวเตอร์ Dell G3

การสืบทอดในจาวาสคริปต์คืออะไร

การสืบทอดจาวาสคริปต์เป็นกลไกที่ช่วยให้เราสามารถสร้างคลาสใหม่ตามคลาสที่มีอยู่ มันให้ความยืดหยุ่นสำหรับคลาสย่อยในการนำเมธอดและตัวแปรของคลาสพาเรนต์มาใช้ซ้ำ กระบวนการรับมรดกเป็นกระบวนการตั้งแต่ทั่วไปไปจนถึงพิเศษ

ยังคงรักษาความสัมพันธ์ IS-A

คำหลักขยายใช้ในนิพจน์คลาสหรือการประกาศคลาส

การใช้คีย์เวิร์ดขยายทำให้เราสามารถรับคุณสมบัติและลักษณะการทำงานของออบเจ็กต์บิวท์อินรวมถึงคลาสที่กำหนดเองได้

นอกจากนี้เรายังสามารถใช้การสืบทอดโดยใช้แนวทางที่ใช้ต้นแบบได้

JavaScript ใช้การสืบทอดอย่างไร

1. โซ่ต้นแบบ

แนวคิดพื้นฐาน: ใช้ต้นแบบเพื่อให้ประเภทการอ้างอิงหนึ่งสืบทอดคุณสมบัติและวิธีการของการอ้างอิงประเภทอื่น

ความสัมพันธ์ระหว่างตัวสร้าง ต้นแบบ และอินสแตนซ์: ตัวสร้างแต่ละตัวมีวัตถุต้นแบบ วัตถุต้นแบบประกอบด้วยตัวชี้ไปยังตัวสร้าง และอินสแตนซ์ประกอบด้วยตัวชี้ภายในไปยังวัตถุต้นแบบ

ตัวอย่างของการสืบทอดการใช้งานห่วงโซ่ต้นแบบ:

ฟังก์ชัน SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function subType() {this.property = false;}//SuperTypeSubType.prototype ที่สืบทอดมา = SuperType ใหม่ ( );SubType.prototype.getSubValue = function (){return this.property;}var instance = new SubType();console.log(instance.getSuperValue());//true

2. ยืมตัวสร้าง

แนวคิดพื้นฐาน: เรียกตัวสร้างคลาสพิเศษภายในตัวสร้างชนิดย่อย และตัวสร้างสามารถดำเนินการบนวัตถุที่สร้างขึ้นใหม่ได้โดยใช้เมธอด call() และ Apply()

ตัวอย่าง:

function SuperType() {this.colors = ["red", "blue", "green"];} function SubType() {SuperType.call(this);//สืบทอด SuperType}var instance1 = new SubType(); .colors.push("black");console.log(instance1.colors);//"red", "blue", "green", "black" var instance2 = new SubType();console.log(instance2 ) สี);//"สีแดง", "สีฟ้า", "สีเขียว"

3. มรดกแบบผสมผสาน

แนวคิดพื้นฐาน: รูปแบบการสืบทอดที่ผสมผสานเทคโนโลยีของการสร้างห่วงโซ่ต้นแบบและการยืมตัวสร้างเพื่อใช้ประโยชน์จากสิ่งที่ดีที่สุดของทั้งสองโลก

ตัวอย่าง:

ฟังก์ชัน SuperType(ชื่อ) {this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function() {console.log(this.name); } function SubType(name, age) {SuperType.call(this,name);//แอตทริบิวต์ที่สืบทอด this.age = age;}//วิธีที่สืบทอด SubType.prototype = new SuperType();Subtype.prototype.constructor = Subtype; Subtype.prototype.sayAge = function() {console.log(this.age);}var instance1 = new SubType("EvanChen",18);instance1.colors.push("black");consol.log(instance1. สี);//"สีแดง", "สีน้ำเงิน", "สีเขียว", "สีดำ"instance1.sayName();//"EvanChen"instance1.sayAge();//18var instance2 = new SubType("EvanChen666",20 );console.log(instance2.colors);//"red", "สีฟ้า", "สีเขียว"instance2.sayName();//"EvanChen666"instance2.sayAge();//20

4. มรดกต้นแบบ

แนวคิดพื้นฐาน: Prototypes ช่วยให้คุณสร้างออบเจ็กต์ใหม่โดยอิงจากออบเจ็กต์ที่มีอยู่โดยไม่ต้องสร้างประเภทที่กำหนดเอง

แนวคิดเรื่องการสืบทอดต้นแบบสามารถแสดงได้ด้วยฟังก์ชันต่อไปนี้:

function object(o) {function F(){}F.prototype = o;return ใหม่ F();}

ตัวอย่าง:

var person = {ชื่อ:"EvanChen",เพื่อน:["Shelby","Court","Van"];};var anotherPerson = object(person);anotherPerson.name = "Greg";anotherPerson.friends.push( "Rob");var yetAnotherPerson = object(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby", "ศาล" ,"แวน", "ร็อบ", "ตุ๊กตาบาร์บี้"

ECMAScript 5 สร้างมาตรฐานการสืบทอดต้นแบบผ่านเมธอด Object.create() ใหม่ ซึ่งยอมรับพารามิเตอร์สองตัว: อ็อบเจ็กต์ที่ใช้เป็นต้นแบบของอ็อบเจ็กต์ใหม่และอ็อบเจ็กต์ที่ใช้เป็นอ็อบเจ็กต์ใหม่เพื่อกำหนดคุณสมบัติเพิ่มเติม

var person = {ชื่อ:"EvanChen",เพื่อน:["Shelby","Court","Van"];};var anotherPerson = Object.create(person);anotherPerson.name = "Greg";anotherPerson.friends push("Rob");var yetAnotherPerson = Object.create(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby" ,"คอร์ท", "แวน", "ร็อบ", "ตุ๊กตาบาร์บี้"

5. มรดกปรสิต

แนวคิดพื้นฐาน: สร้างฟังก์ชันที่ห่อหุ้มกระบวนการสืบทอด ปรับปรุงอ็อบเจ็กต์ในทางใดทางหนึ่งเป็นการภายใน และส่งคืนอ็อบเจ็กต์ราวกับว่ามันทำงานทั้งหมดจริงๆ

ตัวอย่าง:

function createAnother(Original) {var clone = object(Original);clone.sayHi = function () {alert("hi");};return clone;}var person = {ชื่อ:"EvanChen",เพื่อน:["Shelby ","Court","Van"];};var anotherPerson = createAnother(person);anotherPerson.sayHi();///"สวัสดี"

6. การถ่ายทอดทางพันธุกรรมแบบปรสิต

แนวคิดพื้นฐาน: สืบทอดคุณสมบัติโดยการยืมฟังก์ชัน และสืบทอดวิธีการผ่านรูปแบบไฮบริดของห่วงโซ่ต้นแบบ

รุ่นพื้นฐานมีดังนี้:

ฟังก์ชั่น inheritProperty (subType, superType) {var Prototype = object (superType.prototype); // สร้าง object Prototype.constructor = subType; // ปรับปรุง object subType.prototype = Prototype; // ระบุ object}

ตัวอย่าง:

ฟังก์ชั่น SuperType(ชื่อ){this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function (){alert(this.name);}; ฟังก์ชั่น SubType (ชื่อ, อายุ) {SuperType.call (this, name); this.age = age;} inheritProperty (SubType, SuperType); SubType.prototype.sayAge = function () {alert (this.age);}