คำอธิบายกราฟิกโดยละเอียดของห่วงโซ่ต้นแบบ JavaScript

คำแนะนำที่เกี่ยวข้อง: บทช่วยสอน JavaScript

1. Prototype chain

1.1 คำอธิบาย chain ต้นแบบ:

1. (แนวคิด) Chain ต้นแบบหมายถึงรายการที่เชื่อมโยงที่ประกอบด้วยต้นแบบบางส่วนผ่านตัวชี้ __proto__ ห่วงโซ่ต้นแบบสามารถให้บริการอ็อบเจ็กต์ที่ต้องการแบ่งปันข้อมูลในห่วงโซ่ต้นแบบและถูกนำมาใช้ เพื่อใช้กลไกการสืบทอด JavaScript

2. (ตัวชี้ลูกโซ่ต้นแบบ) ตัวชี้ที่เกี่ยวข้องในลูกโซ่ต้นแบบ:

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

1.2 ภาพประกอบของสายโซ่ต้นแบบที่ไม่เกี่ยวข้องกับการสืบทอด:

1. สายโซ่ต้นแบบประเภทตัวสร้าง: วัตถุที่ให้บริการโดยสายโซ่ต้นแบบนั้นถูกสร้างขึ้นโดยตัวสร้าง (ภาพนี้สำคัญมากซึ่งเกี่ยวข้องกับสายโซ่พื้นฐานและมีรูปภาพที่คล้ายกันบนอินเทอร์เน็ต)

ฟังก์ชัน A() {

-
ให้ a1 = A() ใหม่
ให้ a2 = A() ใหม่
ให้ a3 = A() ใหม่
// บรรทัดโค้ดเหล่านี้จะสร้างห่วงโซ่ต้นแบบที่แสดงด้านล่าง

2. สายโซ่ต้นแบบที่ไม่ใช่ตัวสร้าง: อ็อบเจ็กต์ที่ให้บริการโดยสายโซ่ต้นแบบนั้นถูกสร้างขึ้นโดยฟังก์ชันโรงงาน ตัวอักษรของอ็อบเจ็กต์ Object.create ฯลฯ

ให้ A = {
    ทดสอบ: ""
-
ให้ a1 = Object.create(A)
ให้ a2 = Object.create(A)
ให้ a3 = Object.create(A)
// บรรทัดโค้ดเหล่านี้สอดคล้องกับเชนต้นแบบที่แสดงด้านล่าง

3. สายโซ่ต้นแบบที่ง่ายขึ้น: เมื่อพิจารณาสายโซ่ต้นแบบจริง ๆ มักจะไม่จำเป็นต้องพิจารณา "สายโซ่ต้นแบบที่สอดคล้องกับอินสแตนซ์ของฟังก์ชันคอนสตรัคเตอร์" หรือแม้แต่ "จุดสิ้นสุดของสายโซ่ต้นแบบ" และ "Object.prototype" เนื่องจากการพิจารณาเนื้อหาระดับต่ำเหล่านี้ไม่เอื้อต่อการวิเคราะห์เมื่อพูดถึงความสัมพันธ์ทางมรดกที่ซับซ้อน สำหรับการวิเคราะห์ทั่วไป สามารถใช้ไดอะแกรมอย่างง่ายสองไดอะแกรมต่อไปนี้

ฟังก์ชัน A() {

-
ให้ a1 = A() ใหม่
ให้ a2 = A() ใหม่
ให้ a3 = A() ใหม่
// บรรทัดโค้ดเหล่านี้จะสร้างห่วงโซ่ต้นแบบที่แสดงด้านล่าง

1.3 ภาพประกอบของห่วงโซ่ต้นแบบที่เกี่ยวข้องกับการสืบทอด ห่วง

โซ่ต้นแบบที่เกี่ยวข้องกับการสืบทอดสามารถวิเคราะห์ได้โดยใช้แผนภาพแบบง่าย

// ใช้โหมดการรวมปรสิตเพื่อใช้ฟังก์ชันที่สืบทอดมา C() {}
ฟังก์ชัน B() {}
B.ต้นแบบ = ใหม่ C()
ฟังก์ชัน ก() {}
A.ต้นแบบ = ใหม่ B()

ให้ a1 = A() ใหม่
ให้ a2 = A() ใหม่
ให้ a3 = A() ใหม่

1.4 จุดสิ้นสุด

ของห่วงโซ่ต้นแบบ จุดสิ้นสุดของห่วงโซ่ต้นแบบเป็นโมฆะ ซึ่งไม่ได้อ้างอิงถึงวัตถุต้นแบบ

1.5 ไดนามิกของต้นแบบ

ไดนามิกของต้นแบบได้รับการอธิบายโดยละเอียดใน "การเขียนโปรแกรมเชิงวัตถุ" และส่วนใหญ่จะเกี่ยวข้องกับการเขียนใหม่และดัดแปลงต้นแบบ นี่เป็นตัวอย่างบางส่วน
ตัวอย่างที่ 1—ต้นแบบ Dynamics

var A = function() {};
A.ต้นแบบ.n = 1;
var b = A ใหม่();
A.ต้นแบบ = {
    น: 2,
    ม: 3
-
var c = A ใหม่();

console.log(bn); // 1
console.log(bm); // ไม่ได้กำหนด

console.log(cn); // 2
console.log(cm); // 3

ตัวอย่างที่ 2 - พลวัตของห่วงโซ่ต้นแบบและห่วงโซ่ด้านล่าง

var F = function() {};

Object.prototype.a = ฟังก์ชั่น () {
    console.log('a');
-

Function.prototype.b = ฟังก์ชั่น() {
    console.log('b');
-

var f = F ใหม่ ();

ฟ้า(); //ก
fb(); // ไม่มีแอตทริบิวต์ b อยู่ Fa();
Fb(); //

bอ้างถึงรูปภาพแรกใน "Prototype Chain Diagram Not Involving Inheritance" ที่กล่าวถึงข้างต้น คุณสามารถวาดปัญหาการวิเคราะห์ไดอะแกรมอ้างอิงแบบง่ายต่อไปนี้ได้

ตัวอย่างที่ 3 — Prototype Dynamics & Prototype Chain Bottom Chain

Function บุคคล (ชื่อ) {
    this.name=ชื่อ
-
ให้ p = บุคคลใหม่ ('ทอม');
console.log(p.__proto__) // Person.prototype
console.log (Person.__proto__) // Function.prototype

ตัวอย่างที่ 4 — Prototype Dynamics & Prototype Chain Bottom Chain

var foo = {}, F = function(){};
Object.prototype.a = 'ค่า a';
Function.prototype.b = 'ค่า b';
วัตถุ.ต้นแบบ = {
    เป็น: "มูลค่า"
-
Function.ต้นแบบ = {
    ข: "ค่าข"
-

console.log(foo.a); // ค่า
console.log(foo.b); // ไม่ได้กำหนด

console.log(Fa); // ค่า
console.log(Fb); // value b

อ้างถึงรูปภาพแรกใน "Prototype Chain Diagram Not Involving Inheritance" ที่กล่าวถึงข้างต้นเพื่อวาดปัญหาการวิเคราะห์ไดอะแกรมอ้างอิงแบบง่ายต่อไปนี้ เนื่องจาก foo และ F ผูกต้นแบบของพวกเขาเมื่อมีการประกาศ พวกเขาจะได้รับที่อยู่ของต้นแบบที่เก็บไว้ในหน่วยความจำฮีปผ่านตัวชี้ที่เก็บไว้ในหน่วยความจำสแต็ก ขั้นแรก ต้นแบบได้รับการแก้ไข การดำเนินการแก้ไขจะแก้ไขต้นแบบบนหน่วยความจำฮีป foo และ F ยังคงสามารถเข้าถึงผลลัพธ์ที่แก้ไขผ่านตัวชี้ของหน่วยความจำสแต็ก ขั้นตอนที่สองคือการเขียนต้นแบบใหม่ JS คือ "การดำเนินการถ่ายโอนค่า" ทั้งหมด หลังจากเขียนต้นแบบใหม่แล้ว ให้เปิดพื้นที่ใหม่ในหน่วยความจำฮีปเพื่อจัดเก็บต้นแบบใหม่ จากนั้นเปิดพื้นที่ใหม่ในหน่วยความจำสแต็ก เพื่อจัดเก็บตัวชี้ไปยังหน่วยความจำฮีป ในขณะนี้ เนื่องจากพอยน์เตอร์หน่วยความจำสแต็กที่ foo และ F ถืออยู่นั้นแตกต่างจากพอยน์เตอร์หน่วยความจำสแต็กใหม่ foo และ F ไม่สามารถเข้าถึงต้นแบบที่เขียนใหม่ได้

คำแนะนำที่เกี่ยวข้อง: บทช่วยสอนการเรียนรู้ JavaScript

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