คำอธิบายโดยละเอียดเกี่ยวกับจุดความรู้ต้นแบบ JavaScript และห่วงโซ่ต้นแบบ

1. ต้นแบบ

1. แนวคิด

ใน JavaScript ฟังก์ชันคืออ็อบเจ็กต์ประเภท Function ที่มีคุณสมบัติและวิธีการ ต้นแบบ (Prototype) เป็นคุณลักษณะของวัตถุประเภท Function

แอททริบิวต์ prototype จะถูกรวมไว้เมื่อมีการกำหนดฟังก์ชัน และค่าเริ่มต้นคือออบเจ็กต์ว่างเปล่า ไม่มีการกำหนดประเภทต้นแบบสำหรับฟังก์ชันใน JavaScript ดังนั้นต้นแบบจึงสามารถเป็นประเภทใดก็ได้

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

// คุณสมบัติของประเภทฟังก์ชั่น -> คุณสมบัติที่ฟังก์ชั่นทั้งหมดมี console.log(Function.prototype); //[ฟังก์ชั่น]

//กำหนดฟังก์ชัน fn() {
    console.log('นี่คือฟังก์ชัน');
-

//ค่าเริ่มต้นของต้นแบบคือวัตถุว่าง console.log(fn.prototype); //fn {}

// ฟังก์ชั่นประกอบด้วย Constructor --> ประเภทการอ้างอิงทั้งหมดคือ Constructor console.log(Number.prototype); //[Number: 0]

console.log(Object.prototype);//{}

2. รับต้นแบบ

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

• ผ่านแอตทริบิวต์ prototype ของ Constructor
• และผ่าน getPrototype ของวิธีการ Object object (obj)

ฟังก์ชั่น fn() {
    console.log('นี่คือฟังก์ชัน');
-

//ใช้โครงสร้างไวยากรณ์แอตทริบิวต์ของวัตถุการเข้าถึง console.log(fn.prototype); //fn {}
console.log(fn['ต้นแบบ']);//fn {}

//ประเภทวัตถุให้getPrototypeOf() วิธีการ console.log(Object.getPrototypeOf(fn)); //[ฟังก์ชั่น]

3. ทำความเข้าใจคุณลักษณะของตัวสร้างบนฟังก์ชันต้นแบบ

ใช้เมธอด Object.getOwnPropertyDescriptors() เพื่อรับคำอธิบายคุณสมบัติทั้งหมดของออบเจ็กต์

ผลลัพธ์ var = Object.getOwnPropertyDescriptor (Object.prototype, 'ตัวสร้าง');
console.log(result) //ผลลัพธ์ที่ได้จะเป็นดังนี้:
-
// ค่า: [ฟังก์ชัน: วัตถุ]
// เขียนได้: จริง,
// นับได้: เท็จ
// กำหนดค่าได้: จริง
// }

constructor是在创建函数的时候自动添加的，指向构造函数本身

4. การตั้งค่าคุณสมบัติและวิธีการบนต้นแบบ

คุณสามารถตั้งค่าคุณสมบัติและวิธีการของต้นแบบได้สองวิธีต่อไปนี้:

• คุณสมบัติและวิธีการของ ต้นแบบถูกกำหนดแยกต่างหาก

Constructor.prototype.Attribute name = ค่าแอตทริบิวต์; Constructor.prototype.Method name = function(){};

• กำหนดออบเจ็กต์ใหม่สำหรับต้นแบบโดยตรง

เมื่อเราต้องการเพิ่มแอตทริบิวต์จำนวนมากให้กับต้นแบบ การเขียน构造函数.prototype.属性名ซ้ำแล้วซ้ำเล่านั้นยุ่งยากเกินไป เราสามารถแก้ไข prototype

Constructor.prototype = {

    ชื่อแอตทริบิวต์: ค่าแอตทริบิวต์
    ชื่อเมธอด: function(){}}

function foo () {}foo.prototype = {
    ตัวสร้าง: foo,
    ชื่อ'แจม'
    อายุ: 18,
    ที่อยู่: 'Beijing'}var fn = new foo()console.log(fn.address) //Beijing

5.isPrototypeOf() method

แต่ละ object จะมี isPrototypeOf() method ซึ่งใช้ในการกำหนดว่า object นั้น ต้นแบบของวัตถุอื่น

รหัสตัวอย่างจะเป็นดังนี้:
// กำหนดวัตถุผ่านเครื่องมือเริ่มต้น var obj = {
    ชื่อ'แจม'
-
//กำหนดฟังก์ชันคอนสตรัคเตอร์ Hero() {}
// กำหนดวัตถุ obj ให้กับต้นแบบของตัวสร้าง Hero Hero.prototype = obj;
// สร้างวัตถุผ่านตัวสร้าง var hero = new Hero();

// เมธอด isPrototypeOf() กำหนดว่าวัตถุที่ระบุนั้นเป็นต้นแบบของวัตถุอื่น var result = obj.isPrototypeOf(hero);
console.log(result);//true

ตรวจสอบว่าวัตถุ obj เป็นต้นแบบของวัตถุ hero

2. ห่วงโซ่ต้นแบบ

1. ความเข้าใจเกี่ยวกับห่วงโซ่ต้นแบบ

ต่อไปเราจะใช้โค้ดส่วนหนึ่งเพื่อขยายความเข้าใจของเราเกี่ยวกับห่วงโซ่ต้นแบบ:

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

1.1 โค้ดตัวอย่างจะเป็นดังนี้:

var obj = {
    ชื่อ'แจม'
    อายุ: 19
-
- 
    ข้อกำหนด: ค้นหาแอตทริบิวต์ที่อยู่ในวัตถุ obj*/

// เชนต้นแบบจะถูกค้นหาทีละเลเยอร์ หากไม่พบ จะถูกค้นหาจนกว่าจะพบต้นแบบระดับบนสุด obj.__proto__ = {}
obj.__โปรโต__.__โปรโต__ = {}
obj.__โปรโต__.__โปรโต__.__โปรโต__ = {
    ที่อยู่: 'ปักกิ่ง'
-

console.log(obj.address) // Beijing console.log(obj.__proto__.__proto__.__proto__) // { ที่อยู่: 'Beijing' }

1.2 แผนที่หน่วยความจำ

ในที่สุดก็พบแอตทริบิวต์ที่อยู่
那么这里有一个问题，如果一直没有查到，会无穷尽的去查找吗？接下来我们就来了解一下

2. ต้นแบบระดับบนสุดคืออะไร?

ดังที่เราได้กล่าวไว้ข้างต้น เราจะไม่ค้นหาอย่างไม่มีที่สิ้นสุดตามห่วงโซ่ต้นแบบ เมื่อพบต้นแบบระดับบนสุดแล้ว จะ undefined ส่งคืนหากยังไม่พบ

แล้วต้นแบบระดับบนสุดคืออะไร?
โค้ดตัวอย่างจะเป็นดังนี้:

var obj = { name: 'jam' }console.log(obj.__proto__) // {}console.log(obj.__proto__.__proto__) //

ต้นแบบของอ็อบเจ็กต์ตัวอักษร null obj คือ: {} . {} เป็นต้นแบบระดับบนสุด เมื่อเราพิมพ์ __proto__ ต่อไป ค่าว่างจะถูกส่งกลับ ซึ่งพิสูจน์ว่าเลเยอร์ก่อนหน้านั้นเป็นต้นแบบระดับบนสุดอยู่แล้ว

รูปต่อไปนี้เป็นส่วนเสริมของต้นแบบระดับบนสุด หายไปในโค้ดชิ้นแรก:

顶层原型就是Object.prototype

3 ต้นแบบของ Object (Object.prototype)

3.1 แล้วจุดสิ้นสุดของห่วงโซ่ต้นแบบอยู่ที่ไหน? ตัวอย่างเช่น อ็อบเจ็กต์ที่สามมีต้นแบบ __proto__ คุณลักษณะหรือไม่

var obj = {ชื่อ:'jam'}obj.__proto__ = {}obj.__proto__.__proto__ = {}obj.__proto__.__proto__.__proto__ = {}console.log(obj.__proto__.__proto__.__proto__.__proto__) // {}

เราพบว่าผลลัพธ์ที่พิมพ์ด้านบนเป็น空对象{}

• อันที่จริง ต้นแบบนี้คือต้นแบบระดับบนสุดของเรา

  var obj = {
    ชื่อ'แจม'
    อายุ: 19
    -
    console.log(obj.__proto__) // {}
    console.log (Object.prototype) // {}
    console.log(obj.__proto__ === Object.prototype) // true

  Object คือคลาสพาเรนต์ของคลาสทั้งหมด ดังนั้น obj.__proto__ จึงเป็น Object.prototype จริงๆ
  console.log(obj.__proto__ === Object.prototype) // true เราจะเห็นว่าผลลัพธ์ Object.prototype เป็นต้นแบบระดับบนสุด ต้นแบบ

• ของวัตถุที่สร้างขึ้นโดยตรงจาก Object คือ {}

3.2 จากนั้นเราอาจถาม : {} มีอะไรพิเศษเกี่ยวกับต้นแบบหรือไม่?

• จุดพิเศษ 1: วัตถุมีแอตทริบิวต์ต้นแบบ แต่แอตทริบิวต์ต้นแบบชี้ไปที่ null แล้ว นั่นคือ มันคือต้นแบบระดับบนสุด

  console.log(obj.__proto__.__proto__.__proto__.__proto__.__proto__) // null

• ประเด็นพิเศษ 2: มีคุณสมบัติและวิธีการเริ่มต้นมากมายบนวัตถุนี้
  • แม้ว่าผลลัพธ์ของการพิมพ์ Object.prototype จะเป็นวัตถุว่าง {} แต่ก็ไม่ว่างเปล่า แต่คุณสมบัติภายในไม่สามารถนับได้ ตัวอย่างเช่น ลองพิมพ์ constructor คุณสมบัติที่จะดู

    <!-- จะเห็นได้ว่ามีแอตทริบิวต์ของ Constructor และไม่ว่าง -->console.log(Object.prototype.constructor) // [Function: Object] <!-- Console.log(Object.prototype.constructor) // [Function: Object] <!-- Constructor อ้างอิงกลับมาที่ Object ->

  • us คุณยังสามารถรับ descriptors ของคุณสมบัติทั้งหมดของตัวเองใน Object.prototype ผ่านเมธอด Object.getOwnPropertyDescriptors()

    console.log(Object.getOwnPropertyDescriptors(Object.prototype)) //ดังที่แสดงในภาพหน้าจอขนาดยาวด้านล่าง

    

4. กราฟหน่วยความจำความสัมพันธ์ลูกโซ่ต้นแบบ