บทนำสั้น ๆ เกี่ยวกับ JavaScript "ต้นแบบ" และ "ห่วงโซ่ต้นแบบ"

ต้นแบบคืออะไร? Prototype เป็นแนวคิดที่เราไม่ได้กล่าวถึงในการเรียนรู้พื้นฐานของ JS วัตถุต้นแบบ (ต้นแบบ) , ต้นแบบวัตถุ (__proto__) , ห่วงโซ่ต้นแบบ เดี๋ยวก่อน แนวคิดเหล่านี้มักถูกถามในการสัมภาษณ์ตามสถิติ บทความนี้จะช่วยให้คุณเข้าใจและเชี่ยวชาญความรู้ที่เกี่ยวข้องของต้นแบบ เพื่อที่คุณจะไม่สับสนอีกต่อไป

1: Constructor

เราได้ศึกษาภาษาเชิงวัตถุมากมาย เช่น Java, C++ ฯลฯ แต่ JavaScript ถือเป็นข้อยกเว้น ก่อน ES6 ไม่มีแนวคิดเกี่ยวกับคลาสต่างๆ มาก่อน ปรากฎว่าก่อน ES6 เราใช้ Constructor เพื่อสร้างอ็อบเจ็กต์ที่สร้างอินสแตนซ์เป็นฟังก์ชันพิเศษที่มีลักษณะสาธารณะของอ็อบเจ็กต์ มันเหมาะสมที่จะใช้ร่วมกับ new .

หมายเหตุเกี่ยวกับตัวสร้าง:

• อักษรตัวแรกของชื่อตัวสร้างจะต้องเป็นตัวพิมพ์ใหญ่
• และตัวสร้างจะต้องใช้กับตัวใหม่

1.1 วิธีการใช้งานตัวสร้าง

<script> 
           function Animal(name,age){/ //อักษรตัวแรกของชื่อ Constructor จะใช้ตัวพิมพ์ใหญ่ this.name=name;
                this.age=อายุ;
                นี้.กิน=ฟังก์ชั่น(){
                  console.log('ฉันกำลังกินอยู่');
                -
           -
           var dog=new Animal('Wangcai',3) // เพื่อใช้ร่วมกับ new เพื่อสร้างอ็อบเจ็กต์ console.log(dog.name);
           console.log(dog.age);
           สุนัขกิน()
   </สคริปต์>

1.2 กระบวนการดำเนินการของตัวสร้าง

ใหม่ มีกระบวนการดำเนินการดังต่อไปนี้:

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

1.3 สมาชิกอินสแตนซ์ สมาชิกแบบคงที่และ

สมาชิกอินสแตนซ์:

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

<script>
           ฟังก์ชั่น Animal(ชื่อ,อายุ){
                นี้.ชื่อ=ชื่อ;
                this.age=อายุ;
           -
           var dog=สัตว์ใหม่('Wangcai',3)
           console.log(สุนัข.ชื่อ);
           console.log(สัตว์.ชื่อ);
   </สคริปต์>

สมาชิกแบบคงที่:

• สมาชิกแบบคงที่คือสมาชิกที่สร้างขึ้นผ่านตัวสร้างเอง
• สมาชิกแบบคงที่สามารถเข้าถึงได้ผ่านชื่อตัวสร้างเท่านั้น ไม่ใช่ผ่านวัตถุที่สร้างอินสแตนซ์

<script>
           ฟังก์ชั่น Animal(ชื่อ,อายุ){
                นี้.ชื่อ=ชื่อ;
                this.age=อายุ;
           -
           var dog=สัตว์ใหม่('Wangcai',3)
           Animal.color='สีดำ'
           console.log(สัตว์.สี);
           console.log(สุนัข.สี);
   </สคริปต์>

2: Prototype object Prototype

2.1 ทำไมถึงมี Prototype object

ก่อนที่จะเริ่มอธิบายว่า Prototype object คืออะไร เรามาอธิบาย case กันก่อน ตอนนี้ยังคงเป็นคลาส Animal อยู่ วัตถุที่สร้างอินสแตนซ์ของพวกเขา หลังจากการเปรียบเทียบ เราพบว่าเอาต์พุตเป็นเท็จ นั่นคือ ที่อยู่ของประเภทข้อมูลที่ซับซ้อนของทั้งสองนั้นแตกต่างกัน เหตุผลคืออะไร

<สคริปต์> 
      ฟังก์ชั่น Animal(ชื่อ,อายุ){      
           นี้.ชื่อ=ชื่อ;
           this.age=อายุ;
           นี้.กิน=ฟังก์ชั่น(){
             console.log('ฉันกำลังกินอยู่');
           -
      -
      var dog=สัตว์ใหม่('Wangcai',3)     
      var cat=สัตว์ใหม่('มีมี่',3)     
      var pig=สัตว์ใหม่('humhem',3)     
      var fish=สัตว์ใหม่('Gulu',3)     
      var แกะ=สัตว์ใหม่('咩咩',3)     
      console.log(dog.eat==cat.eat);
</สคริปต์>

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

2.2 การใช้วัตถุต้นแบบ

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

วิธีแก้ไขสำหรับกรณีข้างต้น:

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

<script> 
      ฟังก์ชั่น Animal(ชื่อ,อายุ){      
           นี้.ชื่อ=ชื่อ;
           this.age=อายุ;
      -
      Animal.prototype.eat=function(){
          console.log('ฉันกำลังกินอยู่');
      -
      var dog=สัตว์ใหม่('Wangcai',3)     
      var cat=สัตว์ใหม่('มีมี่',3)     
      สุนัขกิน()
      cat.กิน()
      console.log(dog.eat==cat.eat);
</script>

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

สาม: Object Prototype__proto__

3.1 Object Prototype คืออะไร?

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

หรืออาจเข้าใจได้ว่า:

• ต้นแบบวัตถุต้นแบบ ต้นแบบเทียบเท่ากับวัตถุต้นแบบ __proto__

3.2 ข้อควรทราบเกี่ยวกับ object Prototype __proto__

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

หลักการค้นหาวิธีการ:

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

สี่: ตัวสร้างฟังก์ชันตัวสร้าง

4.1 เหตุใดตัวสร้างจึงถูกเรียกว่าตัวสร้าง

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

และพิมพ์คุณลักษณะตัวสร้างของทั้งสอง:

<script> 
      ฟังก์ชั่น Animal(ชื่อ,อายุ){      
           นี้.ชื่อ=ชื่อ;
           this.age=อายุ;
      -
      Animal.prototype.eat=function(){
         console.log('ฉันกำลังกินอยู่');
      -
     var dog=สัตว์ใหม่('Wangcai',4)
     console.log(สุนัข.__โปรโต__.คอนสตรัคเตอร์);
     console.log(Animal.prototype.constructor);
</สคริปต์>

เราพบว่าผลลัพธ์ที่พิมพ์ออกมานั้นเป็นคอนสตรัคเตอร์นั่นเอง

4.2 การส่งคืนคอนสตรัคเตอร์ด้วยตนเอง