เปิดโลก Prototype Chain ของ JavaScript: รูปแบบการสืบทอดและการสร้างอ็อบเจ็กต์

JavaScript เป็นภาษาไดนามิกและอเนกประสงค์ที่เป็นหัวใจสำคัญของเว็บมานานหลายทศวรรษ แม้ว่านักพัฒนาหลายคนจะคุ้นเคยกับแง่มุมการทำงานและไวยากรณ์สมัยใหม่ที่นำเสนอใน ECMAScript 6 (ES6) และรุ่นต่อๆ ไป แต่การทำความเข้าใจกลไกพื้นฐานของภาษานั้นมีความสำคัญอย่างยิ่งต่อการเรียนรู้ภาษาอย่างแท้จริง หนึ่งในแนวคิดพื้นฐานที่มักถูกเข้าใจผิดมากที่สุดคือ prototype chain โพสต์นี้จะไขความลับของ prototype chain สำรวจว่ามันอำนวยความสะดวกในการสร้างอ็อบเจ็กต์และเปิดใช้งานรูปแบบการสืบทอดต่างๆ ได้อย่างไร โดยให้มุมมองระดับโลกสำหรับนักพัฒนาทั่วโลก

รากฐาน: อ็อบเจ็กต์และคุณสมบัติใน JavaScript

ก่อนที่จะเจาะลึกลงไปใน prototype chain เรามาสร้างความเข้าใจพื้นฐานเกี่ยวกับวิธีการทำงานของอ็อบเจ็กต์ใน JavaScript กันก่อน ใน JavaScript เกือบทุกอย่างเป็นอ็อบเจ็กต์ อ็อบเจ็กต์คือชุดของคู่คีย์-ค่า โดยที่คีย์คือชื่อคุณสมบัติ (โดยปกติจะเป็นสตริงหรือสัญลักษณ์) และค่าสามารถเป็นประเภทข้อมูลใดก็ได้ รวมถึงอ็อบเจ็กต์ ฟังก์ชัน หรือค่าดั้งเดิมอื่นๆ

ลองพิจารณาอ็อบเจ็กต์อย่างง่าย:

            const person = {
  name: "Alice",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

console.log(person.name); // Output: Alice
person.greet();        // Output: Hello, my name is Alice.

            

              
                Copy
              
            
          

เมื่อคุณเข้าถึงคุณสมบัติของอ็อบเจ็กต์ เช่น person.name JavaScript จะมองหาคุณสมบัตินั้นโดยตรงในอ็อบเจ็กต์นั้นก่อน หากไม่พบ ก็ไม่ได้หยุดอยู่แค่นั้น นี่คือจุดที่ prototype chain เข้ามามีบทบาท

Prototype คืออะไร

อ็อบเจ็กต์ JavaScript ทุกตัวมีคุณสมบัติภายใน ซึ่งมักเรียกว่า [[Prototype]] ซึ่งชี้ไปยังอ็อบเจ็กต์อื่น อ็อบเจ็กต์อื่นนี้เรียกว่า prototype ของอ็อบเจ็กต์ดั้งเดิม เมื่อคุณพยายามเข้าถึงคุณสมบัติในอ็อบเจ็กต์และไม่พบคุณสมบัตินั้นโดยตรงในอ็อบเจ็กต์ JavaScript จะมองหาคุณสมบัตินั้นใน prototype ของอ็อบเจ็กต์ หากไม่พบที่นั่น มันจะดูที่ prototype ของ prototype และอื่นๆ สร้างเป็น chain

Chain นี้จะดำเนินต่อไปจนกว่า JavaScript จะพบคุณสมบัติหรือไปถึงจุดสิ้นสุดของ chain ซึ่งโดยทั่วไปคือ Object.prototype ซึ่ง [[Prototype]] คือ null กลไกนี้เรียกว่า prototypal inheritance

การเข้าถึง Prototype

ในขณะที่ [[Prototype]] เป็น slot ภายใน มีสองวิธีหลักในการโต้ตอบกับ prototype ของอ็อบเจ็กต์:

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

const person = {
  name: "Alice"
};

const personPrototype = Object.getPrototypeOf(person);
console.log(personPrototype === Object.prototype); // Output: true

// Using the deprecated __proto__
console.log(person.__proto__ === Object.prototype); // Output: true

Prototype Chain ในการทำงาน

Prototype chain เป็นเหมือน linked list ของอ็อบเจ็กต์ เมื่อคุณพยายามเข้าถึงคุณสมบัติ (get, set หรือ delete) JavaScript จะสำรวจ chain นี้:

1. JavaScript ตรวจสอบว่าคุณสมบัติมีอยู่โดยตรงในอ็อบเจ็กต์หรือไม่
2. หากไม่พบ จะตรวจสอบ prototype ของอ็อบเจ็กต์ (obj.[[Prototype]])
3. หากยังไม่พบ จะตรวจสอบ prototype ของ prototype และอื่นๆ
4. สิ่งนี้จะดำเนินต่อไปจนกว่าจะพบคุณสมบัติหรือ chain จะสิ้นสุดที่อ็อบเจ็กต์ที่มี prototype เป็น null (โดยปกติคือ Object.prototype)

ลองยกตัวอย่าง สมมติว่าเรามี constructor function พื้นฐาน `Animal` จากนั้นก็มี constructor function `Dog` ที่สืบทอดมาจาก `Animal`

// Constructor function สำหรับ Animal
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

// Constructor function สำหรับ Dog
function Dog(name, breed) {
  Animal.call(this, name); // เรียกใช้ parent constructor
  this.breed = breed;
}

// Setting up the prototype chain: Dog.prototype สืบทอดมาจาก Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // แก้ไข constructor property

Dog.prototype.bark = function() {
  console.log(`Woof! My name is ${this.name} and I'm a ${this.breed}.`);
};

const myDog = new Dog("Buddy", "Golden Retriever");

console.log(myDog.name);     // Output: Buddy (found on myDog)
myDog.speak();    // Output: Buddy makes a sound. (found on Dog.prototype via Animal.prototype)
myDog.bark();     // Output: Woof! My name is Buddy and I'm a Golden Retriever. (found on Dog.prototype)

console.log(Object.getPrototypeOf(myDog) === Dog.prototype); // Output: true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // Output: true
console.log(Object.getPrototypeOf(Animal.prototype) === Object.prototype); // Output: true
console.log(Object.getPrototypeOf(Object.prototype) === null); // Output: true

ในตัวอย่างนี้:

• myDog มีคุณสมบัติโดยตรง name และ breed
• เมื่อเรียกใช้ myDog.speak() JavaScript จะมองหา speak ใน myDog ไม่พบ
• จากนั้นจะดูที่ Object.getPrototypeOf(myDog) ซึ่งคือ Dog.prototype ไม่พบ speak ที่นั่น
• จากนั้นจะดูที่ Object.getPrototypeOf(Dog.prototype) ซึ่งคือ Animal.prototype ที่นี่พบ speak ! ฟังก์ชันจะถูกดำเนินการและ this ภายใน speak อ้างถึง myDog

รูปแบบการสร้างอ็อบเจ็กต์

Prototype chain มีความเชื่อมโยงอย่างใกล้ชิดกับวิธีการสร้างอ็อบเจ็กต์ใน JavaScript ในอดีต ก่อนคลาส ES6 มีการใช้รูปแบบต่างๆ เพื่อให้บรรลุการสร้างอ็อบเจ็กต์และการสืบทอด:

1. Constructor Functions

ดังที่เห็นในตัวอย่าง Animal และ Dog ด้านบน constructor function เป็นวิธีดั้งเดิมในการสร้างอ็อบเจ็กต์ เมื่อคุณใช้คีย์เวิร์ด new กับฟังก์ชัน JavaScript จะดำเนินการหลายอย่าง:

1. อ็อบเจ็กต์ว่างใหม่ถูกสร้างขึ้น
2. อ็อบเจ็กต์ใหม่นี้เชื่อมโยงกับคุณสมบัติ prototype ของ constructor function (เช่น newObj.[[Prototype]] = Constructor.prototype)
3. constructor function ถูกเรียกใช้โดยที่อ็อบเจ็กต์ใหม่ถูกผูกไว้กับ this
4. หาก constructor function ไม่ได้ส่งคืนอ็อบเจ็กต์อย่างชัดเจน อ็อบเจ็กต์ที่สร้างขึ้นใหม่ (this) จะถูกส่งคืนโดยปริยาย

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

2. Factory Functions

Factory function เป็นเพียงฟังก์ชันที่ส่งคืนอ็อบเจ็กต์ พวกเขาไม่ได้ใช้คีย์เวิร์ด new และไม่ได้เชื่อมโยงกับ prototype โดยอัตโนมัติในลักษณะเดียวกับ constructor function อย่างไรก็ตาม พวกเขายังสามารถใช้ประโยชน์จาก prototype ได้โดยการตั้งค่า prototype ของอ็อบเจ็กต์ที่ส่งคืนอย่างชัดเจน

function createPerson(name, age) {
  const person = Object.create(personFactory.prototype);
  person.name = name;
  person.age = age;
  return person;
}

personFactory.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};

const john = createPerson("John", 25);
john.greet(); // Output: Hello, I'm John

Object.create() เป็นวิธีการสำคัญที่นี่ มันสร้างอ็อบเจ็กต์ใหม่ โดยใช้อ็อบเจ็กต์ที่มีอยู่เป็น prototype ของอ็อบเจ็กต์ที่สร้างขึ้นใหม่ วิธีนี้ช่วยให้สามารถควบคุม prototype chain ได้อย่างชัดเจน

3. Object.create()

ดังที่กล่าวไว้ข้างต้น Object.create(proto, [propertiesObject]) เป็นเครื่องมือพื้นฐานสำหรับการสร้างอ็อบเจ็กต์ด้วย prototype ที่ระบุ ช่วยให้คุณข้าม constructor function ทั้งหมดและตั้งค่า prototype ของอ็อบเจ็กต์โดยตรง

const personPrototype = {
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

// สร้างอ็อบเจ็กต์ใหม่ 'bob' โดยมี 'personPrototype' เป็น prototype
const bob = Object.create(personPrototype);
bob.name = "Bob";
bob.greet(); // Output: Hello, my name is Bob

// คุณยังสามารถส่ง properties เป็นอาร์กิวเมนต์ที่สองได้
const charles = Object.create(personPrototype, {
  name: { value: "Charles", writable: true, enumerable: true, configurable: true }
});
charles.greet(); // Output: Hello, my name is Charles

วิธีนี้มีประสิทธิภาพอย่างยิ่งสำหรับการสร้างอ็อบเจ็กต์ด้วย prototype ที่กำหนดไว้ล่วงหน้า ทำให้สามารถสร้างโครงสร้างการสืบทอดที่ยืดหยุ่นได้

คลาส ES6: Syntactic Sugar

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

// การใช้ไวยากรณ์คลาส ES6
class AnimalES6 {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class DogES6 extends AnimalES6 {
  constructor(name, breed) {
    super(name); // เรียกใช้ parent class constructor
    this.breed = breed;
  }

  bark() {
    console.log(`Woof! My name is ${this.name} and I'm a ${this.breed}.`);
  }
}

const myDogES6 = new DogES6("Rex", "German Shepherd");
myDogES6.speak(); // Output: Rex makes a sound.
myDogES6.bark();  // Output: Woof! My name is Rex and I'm a German Shepherd.

// ภายใต้ฮูด สิ่งนี้ยังคงใช้ prototypes:
console.log(Object.getPrototypeOf(myDogES6) === DogES6.prototype); // Output: true
console.log(Object.getPrototypeOf(DogES6.prototype) === AnimalES6.prototype); // Output: true

เมื่อคุณกำหนดคลาส JavaScript จะสร้าง constructor function และตั้งค่า prototype chain โดยอัตโนมัติ:

• เมธอด constructor กำหนดคุณสมบัติของ object instance
• วิธีการที่กำหนดไว้ใน class body (เช่น speak และ bark) จะถูกวางไว้โดยอัตโนมัติในคุณสมบัติ prototype ของ constructor function ที่เกี่ยวข้องกับคลาสนั้น
• คีย์เวิร์ด extends ตั้งค่าความสัมพันธ์การสืบทอด โดยเชื่อมโยง prototype ของ child class กับ prototype ของ parent class

เหตุใด Prototype Chain จึงมีความสำคัญในระดับโลก

การทำความเข้าใจ prototype chain ไม่ใช่แค่การออกกำลังกายเชิงวิชาการเท่านั้น มันมีผลกระทบอย่างมากต่อการพัฒนาแอปพลิเคชัน JavaScript ที่แข็งแกร่ง มีประสิทธิภาพ และบำรุงรักษาได้ โดยเฉพาะอย่างยิ่งในบริบทระดับโลก:

• การเพิ่มประสิทธิภาพ: การกำหนดวิธีการใน prototype แทนที่จะเป็น object instance แต่ละรายการ จะช่วยประหยัดหน่วยความจำ อินสแตนซ์ทั้งหมดแชร์ฟังก์ชันเมธอดเดียวกัน นำไปสู่การใช้หน่วยความจำที่มีประสิทธิภาพมากขึ้น ซึ่งมีความสำคัญอย่างยิ่งสำหรับแอปพลิเคชันที่ปรับใช้ในอุปกรณ์และสภาพเครือข่ายที่หลากหลายทั่วโลก
• การนำโค้ดกลับมาใช้ใหม่: Prototype chain เป็นกลไกหลักของ JavaScript สำหรับการนำโค้ดกลับมาใช้ใหม่ การสืบทอดช่วยให้คุณสร้างลำดับชั้น object ที่ซับซ้อน ขยายฟังก์ชันการทำงานโดยไม่ทำซ้ำโค้ด สิ่งนี้มีค่าอย่างยิ่งสำหรับทีมขนาดใหญ่ที่กระจายอยู่ทั่วโลกที่ทำงานในโครงการระหว่างประเทศ
• การดีบักเชิงลึก: เมื่อเกิดข้อผิดพลาด การติดตาม prototype chain สามารถช่วยระบุแหล่งที่มาของลักษณะการทำงานที่ไม่คาดคิด การทำความเข้าใจวิธีการค้นหาคุณสมบัติเป็นกุญแจสำคัญในการแก้ไขปัญหาที่เกี่ยวข้องกับการสืบทอด ขอบเขต และการผูก `this`
• เฟรมเวิร์กและไลบรารี: เฟรมเวิร์กและไลบรารี JavaScript ยอดนิยมหลายแห่ง (เช่น React, Angular, Vue.js เวอร์ชันเก่า) พึ่งพาหรือโต้ตอบกับ prototype chain อย่างมาก ความเข้าใจอย่างมั่นคงเกี่ยวกับ prototype ช่วยให้คุณเข้าใจการทำงานภายในและใช้งานได้อย่างมีประสิทธิภาพมากขึ้น
• การทำงานร่วมกันของภาษา: ความยืดหยุ่นของ JavaScript กับ prototype ทำให้ง่ายต่อการรวมเข้ากับระบบหรือภาษาอื่น โดยเฉพาะอย่างยิ่งในสภาพแวดล้อมเช่น Node.js ที่ JavaScript โต้ตอบกับ native module
• ความชัดเจนเชิงแนวคิด: ในขณะที่คลาส ES6 สรุปความซับซ้อนบางอย่างออกไป ความเข้าใจพื้นฐานเกี่ยวกับ prototype ช่วยให้คุณเข้าใจสิ่งที่เกิดขึ้นภายใต้ฮูด สิ่งนี้ทำให้ความเข้าใจของคุณลึกซึ้งยิ่งขึ้นและช่วยให้คุณจัดการกับ edge case และสถานการณ์ขั้นสูงได้อย่างมั่นใจมากขึ้น โดยไม่คำนึงถึงตำแหน่งทางภูมิศาสตร์หรือสภาพแวดล้อมการพัฒนาที่คุณต้องการ

ข้อผิดพลาดทั่วไปและแนวทางปฏิบัติที่ดีที่สุด

แม้ว่าจะทรงพลัง แต่ prototype chain ก็อาจทำให้เกิดความสับสนได้หากไม่ได้รับการจัดการอย่างระมัดระวัง ต่อไปนี้เป็นข้อผิดพลาดทั่วไปและแนวทางปฏิบัติที่ดีที่สุด:

Pitfall 1: การแก้ไข Built-in Prototypes

โดยทั่วไปแล้ว เป็นความคิดที่ไม่ดีที่จะเพิ่มหรือแก้ไขวิธีการใน built-in object prototypes เช่น Array.prototype หรือ Object.prototype สิ่งนี้อาจนำไปสู่ความขัดแย้งในการตั้งชื่อและลักษณะการทำงานที่ไม่สามารถคาดเดาได้ โดยเฉพาะอย่างยิ่งในโครงการขนาดใหญ่หรือเมื่อใช้ไลบรารีของบุคคลที่สามที่อาจต้องอาศัยลักษณะการทำงานดั้งเดิมของ prototype เหล่านี้

แนวทางปฏิบัติที่ดีที่สุด: ใช้ constructor function, factory function หรือคลาส ES6 ของคุณเอง หากคุณต้องการขยายฟังก์ชันการทำงาน ให้พิจารณาสร้าง utility function หรือใช้ module

Pitfall 2: Constructor Property ที่ไม่ถูกต้อง

เมื่อตั้งค่าการสืบทอดด้วยตนเอง (เช่น Dog.prototype = Object.create(Animal.prototype)) คุณสมบัติ constructor ของ prototype ใหม่ (Dog.prototype) จะชี้ไปที่ constructor เดิม (Animal) สิ่งนี้อาจทำให้เกิดปัญหากับการตรวจสอบ `instanceof` และ introspection

แนวทางปฏิบัติที่ดีที่สุด: ตั้งค่าคุณสมบัติ constructor ใหม่เสมอหลังจากตั้งค่าการสืบทอด:

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Pitfall 3: การทำความเข้าใจบริบท `this`

ลักษณะการทำงานของ this ภายใน prototype methods มีความสำคัญอย่างยิ่ง this อ้างถึงอ็อบเจ็กต์ที่เรียกใช้เมธอดเสมอ ไม่ใช่ที่ที่กำหนดเมธอด นี่คือพื้นฐานที่วิธีการทำงานใน prototype chain

แนวทางปฏิบัติที่ดีที่สุด: ระลึกถึงวิธีการเรียกใช้เมธอด ใช้ `.call()`, `.apply()` หรือ `.bind()` หากคุณต้องการตั้งค่าบริบท `this` อย่างชัดเจน โดยเฉพาะอย่างยิ่งเมื่อส่งเมธอดเป็น callback

Pitfall 4: ความสับสนกับคลาสในภาษาอื่น

นักพัฒนาที่คุ้นเคยกับการสืบทอดแบบคลาสสิก (เช่น ใน Java หรือ C++) อาจพบว่าโมเดลการสืบทอดแบบโปรโตไทป์ของ JavaScript ขัดกับสัญชาตญาณในตอนแรก โปรดจำไว้ว่าคลาส ES6 เป็น facade กลไกพื้นฐานยังคงเป็น prototype

แนวทางปฏิบัติที่ดีที่สุด: ยอมรับลักษณะโปรโตไทป์ของ JavaScript มุ่งเน้นไปที่การทำความเข้าใจว่าอ็อบเจ็กต์มอบหมายการค้นหาคุณสมบัติผ่าน prototype ของพวกเขาอย่างไร

เกินพื้นฐาน: แนวคิดขั้นสูง

`instanceof` Operator

ตัวดำเนินการ instanceof ตรวจสอบว่า prototype chain ของอ็อบเจ็กต์มีคุณสมบัติ prototype ของ constructor เฉพาะหรือไม่ เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการตรวจสอบประเภทในระบบโปรโตไทป์

console.log(myDog instanceof Dog);      // Output: true
console.log(myDog instanceof Animal);   // Output: true
console.log(myDog instanceof Object);   // Output: true
console.log(myDog instanceof Array);    // Output: false

`isPrototypeOf()` Method

เมธอด Object.prototype.isPrototypeOf() ตรวจสอบว่าอ็อบเจ็กต์ปรากฏที่ใดก็ได้ใน prototype chain ของอ็อบเจ็กต์อื่นหรือไม่

console.log(Dog.prototype.isPrototypeOf(myDog));    // Output: true
console.log(Animal.prototype.isPrototypeOf(myDog)); // Output: true
console.log(Object.prototype.isPrototypeOf(myDog)); // Output: true

Shadowing Properties

คุณสมบัติในอ็อบเจ็กต์กล่าวกันว่า shadow คุณสมบัติใน prototype หากมีชื่อเดียวกัน เมื่อคุณเข้าถึงคุณสมบัติ คุณสมบัติในอ็อบเจ็กต์จะถูกดึงข้อมูล และคุณสมบัติใน prototype จะถูกละเว้น (จนกว่าคุณสมบัติของอ็อบเจ็กต์จะถูกลบ) สิ่งนี้ใช้กับทั้ง data properties และ methods

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello from Person: ${this.name}`);
  }
}

class Employee extends Person {
  constructor(name, id) {
    super(name);
    this.id = id;
  }

  // Shadowing the greet method from Person
  greet() {
    console.log(`Hello from Employee: ${this.name}, ID: ${this.id}`);
  }
}

const emp = new Employee("Jane", "E123");
emp.greet(); // Output: Hello from Employee: Jane, ID: E123

// หากต้องการเรียกใช้เมธอด greet ของ parent เราจะต้องใช้ super.greet()

สรุป

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

สำรวจต่อไป เรียนรู้ต่อไป และมีความสุขกับการเขียนโค้ด!