เมื่อเร็วๆ นี้ ฉันอ่านออนไลน์เกี่ยวกับประสบการณ์ของใครบางคนในระหว่างการสัมภาษณ์กับ Taobao แล้วพบว่ามีหลายสิ่งที่ฉันยังไม่ชัดเจน ดังนั้นฉันจึงเขียนบทความบางบทความเพื่อทำความเข้าใจปัญหาบางอย่างให้ลึกซึ้งยิ่งขึ้น
คำถามที่กล่าวถึงในบทความคือ JavaScript ใช้การสืบทอดอย่างไร
ด้านล่างนี้ฉันจะอธิบายวิธีการและตัวอย่างบางอย่างที่ฉันพบทางออนไลน์เพื่อทำให้ฉันรู้สึกประทับใจมากขึ้น
เรารู้ว่าฟังก์ชันใน JavaScript มีความหลากหลาย นอกจากจะใช้สำหรับการกำหนดฟังก์ชันแล้ว ยังใช้สำหรับการกำหนดคลาสอีกด้วย
การสืบทอดใน JavaScript นั้นค่อนข้างแปลก ต่างจาก C++ และภาษาเชิงวัตถุบางภาษา ตรงที่ไม่มีการแก้ไขการควบคุมการเข้าถึง เช่น สาธารณะและส่วนตัว และไม่มีการใช้งานหรือสัญลักษณ์เฉพาะอื่น ๆ เพื่อระบุการสืบทอด
เกี่ยวกับการสืบทอดคลาส JavaScript คุณสามารถอ้างถึงตัวอย่างต่อไปนี้
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
ฟังก์ชั่นบุคคล () {
//คุณสมบัติ
this.Gender = "เพศหญิง";
นี่อายุ = 18;
this.Words = "ความเงียบ";
// วิธี
this.ตะโกน = ฟังก์ชั่น () {
alert("Happy! Method ของ parent class");
-
-
//สืบทอด
ฟังก์ชั่นโปรแกรมเมอร์ () {
this.base = บุคคล;
-
Programmer.prototype = บุคคลใหม่;
//เพิ่มวิธีการใหม่ให้กับคลาสย่อย
โปรแกรมเมอร์.prototype.typeCode = ฟังก์ชั่น() {
alert("ฉันเป็นคนเขียนโค้ด! คนงานข้ามชาติด้านไอที ไม่มีความสุขมาก วิธีคลาสย่อย");
-
// ตัวอย่างการโทร
ฟังก์ชั่น sayHello() {
var a = โปรแกรมเมอร์ใหม่();
alert(a.Gender); // เรียกคุณสมบัติของคลาสพาเรนต์
a.shouting(); // เรียกเมธอดของคลาส parent
a.typeCode(); // เรียกเมธอดของคลาสย่อย
-
พูดว่าสวัสดี();
</สคริปต์>
ในตัวอย่างข้างต้น ขั้นแรกคลาสบุคคลจะถูกประกาศซึ่งประกอบด้วยแอ็ตทริบิวต์และวิธีการบางอย่าง จากนั้นจึงประกาศคลาสโปรแกรมเมอร์ซึ่งมีแอ็ตทริบิวต์พื้นฐานซึ่งไม่จำเป็น แต่เพื่อประโยชน์ของข้อกำหนดเฉพาะและสำหรับการค้นหาอ็อบเจ็กต์ อนาคต คลาสที่สืบทอดมาทั้งหมดจะต้องถูกเขียน จากนั้นคลาสบุคคลจะถูกคัดลอกไปยังออบเจ็กต์ต้นแบบของโปรแกรมเมอร์ (ต้นแบบ) ดังนั้นการสืบทอดคลาสจึงเกิดขึ้น
จำลองหลักการบางประการของคลาสและการสืบทอดใน JavaScript
ในภาษาเชิงวัตถุ เราใช้คลาสเพื่อสร้างวัตถุที่กำหนดเอง อย่างไรก็ตาม ทุกอย่างใน JavaScript นั้นเป็นออบเจ็กต์ ดังนั้นจะสร้างออบเจ็กต์แบบกำหนดเองได้อย่างไร
สิ่งนี้จำเป็นต้องมีการแนะนำแนวคิดอื่น - ต้นแบบ เราสามารถถือว่าต้นแบบเป็นเทมเพลต วัตถุที่กำหนดเองที่สร้างขึ้นใหม่นั้นเป็นสำเนาของเทมเพลตนี้ (ต้นแบบ) ทั้งหมด (จริงๆ แล้วไม่ใช่สำเนา แต่เป็นลิงก์ เพียงว่าลิงก์ประเภทนี้คือ มองไม่เห็นและทำให้คนรู้สึกว่าเป็นสำเนา)
มาดูตัวอย่างการสร้างออบเจ็กต์แบบกำหนดเองผ่านต้นแบบ:
คัดลอกรหัสรหัสดังต่อไปนี้:
//คอนสตรัคเตอร์
ฟังก์ชั่น บุคคล (ชื่อ, เพศ) {
this.name = ชื่อ;
this.sex = เซ็กส์;
-
//กำหนดต้นแบบของบุคคล คุณสมบัติในต้นแบบสามารถอ้างอิงได้โดยวัตถุที่กำหนดเอง
บุคคล.ต้นแบบ = {
getName: ฟังก์ชั่น () {
ส่งคืน this.name;
-
getSex: ฟังก์ชั่น () {
กลับ this.sex;
-
-
ในที่นี้เราเรียกฟังก์ชัน Person ว่า Constructor ซึ่งเป็นฟังก์ชันที่สร้างวัตถุแบบกำหนดเอง จะเห็นได้ว่า JavaScript จำลองการทำงานของคลาสผ่านตัวสร้างและต้นแบบ
ต่อไปนี้เป็นตัวอย่างเพื่ออธิบายรายละเอียดเกี่ยวกับงานเฉพาะที่ทำโดย JavaScript เมื่อสร้างออบเจ็กต์แบบกำหนดเอง:
คัดลอกรหัสรหัสดังต่อไปนี้:
var zhang = บุคคลใหม่ ("ZhangSan", "man");
console.log(zhang.getName()); // "จางซาน"
var chun = บุคคลใหม่ ("ChunHua", "woman");
console.log(chun.getName()); // "ชุนหัว"
เมื่อโค้ด var zhang = new Person("ZhangSan", "man") ถูกดำเนินการ สิ่งต่อไปนี้จะถูกดำเนินการภายในจริง:
สร้างวัตถุเปล่า (วัตถุใหม่())
คัดลอกแอตทริบิวต์ (คู่คีย์-ค่า) ใน Person.prototype ไปยังอ็อบเจ็กต์ว่างนี้ (ดังที่เราได้กล่าวไว้ก่อนหน้านี้ การใช้งานภายในไม่ใช่การคัดลอก แต่เป็นลิงก์ที่ซ่อนอยู่)
ส่งวัตถุนี้ไปยังตัวสร้างผ่านคีย์เวิร์ดนี้และดำเนินการตัวสร้าง
กำหนดวัตถุนี้ให้กับตัวแปร zhang
งานทั้งหมดเสร็จแล้ว
เพื่อพิสูจน์ว่าเทมเพลตต้นแบบไม่ได้ถูกคัดลอกไปยังออบเจ็กต์ที่สร้างอินสแตนซ์ แต่เป็นวิธีการเชื่อมโยง โปรดดูโค้ดต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่น บุคคล (ชื่อ, เพศ) {
this.name = ชื่อ;
this.sex = เซ็กส์;
-
บุคคล.ต้นแบบ.อายุ = 20;
var zhang = บุคคลใหม่ ("ZhangSan", "man");
console.log(zhang.age); // 20
// แทนที่แอตทริบิวต์อายุในต้นแบบ
จางอายุ = 19;
console.log(zhang.age); // 19
ลบ zhang.age;
// หลังจากลบอายุแอตทริบิวต์อินสแตนซ์แล้ว ค่าแอตทริบิวต์นี้จะได้รับจากต้นแบบอีกครั้ง
console.log(zhang.age); // 20
ในตัวอย่างข้างต้น หากได้มาจากการคัดลอกเท่านั้น หลังจากลบแอตทริบิวต์ age แล้ว จะไม่มีวัตถุนั้นอยู่ อย่างไรก็ตาม คุณลักษณะ age ในตัวอย่างยังคงสามารถแสดงผลได้ หรือค่าก่อนหน้าจะถูกเขียนทับ ซึ่งบ่งชี้ว่าเรา ลบเฉพาะแอตทริบิวต์ที่มีชื่อเดียวกันในคลาสย่อย และแอตทริบิวต์ age ในคลาสพาเรนต์ยังคงมีอยู่ในออบเจ็กต์ผ่านลิงก์ที่มองไม่เห็น
จะใช้การสืบทอดอย่างง่ายใน JavaScript ได้อย่างไร?
ตัวอย่างต่อไปนี้สร้างคลาสพนักงาน Employee ที่สืบทอดคุณสมบัติทั้งหมดจากต้นแบบต้นแบบจากบุคคล
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่น พนักงาน (ชื่อ, เพศ, รหัสพนักงาน) {
this.name = ชื่อ;
this.sex = เซ็กส์;
this.employeeID = รหัสพนักงาน;
-
// ชี้ต้นแบบของ Employee ไปยังอินสแตนซ์ของ Person
// เนื่องจากอินสแตนซ์ของ Person สามารถเรียกใช้เมธอดในต้นแบบ Person ได้ อินสแตนซ์ของ Employee จึงสามารถเรียกคุณสมบัติทั้งหมดในต้นแบบ Person ได้เช่นกัน
Employee.prototype = บุคคลใหม่ ();
Employee.prototype.getEmployeeID = ฟังก์ชั่น() {
ส่งคืน this.employeeID;
-
var zhang = พนักงานใหม่("ZhangSan", "man", "1234");
console.log(zhang.getName()); // "ZhangSan
เอาล่ะ ข้างต้นคือกระบวนการและวิธีการเฉพาะบางประการสำหรับการนำการสืบทอดไปใช้ใน JavaScript
โดยสรุปแล้ว กลไกการสืบทอดใน JavaScript นั้นขึ้นอยู่กับการจำลองเท่านั้น เมื่อเทียบกับภาษาเชิงวัตถุบางภาษาแล้ว กลไกนี้ค่อนข้างหยาบและมีข้อบกพร่องบางประการ อย่างไรก็ตาม โดยทั่วไปแล้ว สิ่งนี้ยังคงไม่ลดประสิทธิภาพของนักพัฒนาส่วนหน้า . ความกระตือรือร้น.