การสืบทอดแบบ Prototypal ทำงานอย่างไร

Question

Accepted Answer

ทุก object ใน JavaScript มีลิงก์ที่ซ่อนอยู่ไปยัง object อื่นที่เรียกว่า **prototype** ของมัน เมื่อคุณเข้าถึง property JS จะค้นหาบน object เอง จากนั้นเดิน ขึ้นไป **prototype chain** นี้จนกว่าจะพบ property หรือถึง `null` นี่คือ *delegation* ไม่ใช่การคัดลอก

```js
const animal = {
  speak() { return `${this.name} makes a sound`; },
};

const dog = Object.create(animal); // dog's prototype IS animal
dog.name = "Rex";
dog.speak();                       // "Rex makes a sound" — found on the prototype

Object.getPrototypeOf(dog) === animal; // true
dog.hasOwnProperty("speak");           // false — it's inherited, not own
dog.hasOwnProperty("name");            // true
```

## คลาสใช้มันอย่างไร

`class` คือ syntactic sugar บน prototypes Methods อยู่ **ครั้งเดียว** บน prototype ถูกแชร์โดย instances ทั้งหมด (ไม่ได้คัดลอกต่อ object):

```js
class Dog {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} barks`; } // on Dog.prototype
}
const d = new Dog("Rex");
Object.getPrototypeOf(d) === Dog.prototype; // true
```

ดังนั้น `d.speak` ไม่ได้เก็บไว้ใน `d` — พบได้โดยเดินขึ้นไปยัง `Dog.prototype` นั่นคือเหตุผลว่าทำไมสุนัขทั้งหมดแชร์ฟังก์ชัน `speak` หนึ่งตัว (ประหยัดหน่วยความจำ)

## ทำไมมันจึงสำคัญ

การเข้าใจ chain อธิบายได้: ทำไม instances ถึงแชร์ methods ทำไม prototype เปลี่ยนแปลงถึงส่งผลกระทบต่อ objects ที่เชื่อมโยงทั้งหมด `instanceof` ทำงานอย่างไร (ตรวจสอบ chain) และค่าใช้จ่ายของ lookup chains ที่ยาว

มันคือรากฐานของ `class` built-ins (`Array.prototype.map`) และ inheritance