JavaScript OOP (ต้นแบบ) #2

สวัสดีเพื่อนๆ ฉันชื่อ Bennison ในบล็อกนี้ ฉันจะอธิบายว่า OOP ทำงานอย่างไรใน Javascript และอธิบายว่ามันแตกต่างจาก OOP แบบคลาสสิกอย่างไร ก่อนอ่านบทความนี้ โปรดอ่านบล็อกที่แล้วซึ่งเกี่ยวกับ พื้นฐาน ของOOP

ต้นแบบคืออะไร?

• ใน Javascript เรามีสิ่งที่เรียกว่าต้นแบบ ใน JavaScript ทุกวัตถุจะเชื่อมโยงกับต้นแบบบางอย่าง ดังนั้นแต่ละวัตถุจึงมีต้นแบบ ต้นแบบยังมีคุณสมบัติและวิธีการ
• สิ่งสำคัญคือวิธีการต้นแบบและคุณสมบัติสามารถเข้าถึงได้โดยวัตถุ

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

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

const numbers = [1, 2, 3, 4,5];
numbers.map((num) => num * 2)

• หากเราเรียกดู google เพื่อทำความเข้าใจวิธีการแมปจาวาสคริปต์ ในเอกสาร MDN เราจะเห็นว่าArray.prototype.map()

• ที่นี่ “ Array.prototype()”คือต้นแบบสำหรับออบเจกต์อาร์เรย์ทั้งหมดที่เราสร้างใน JavaScript ดังนั้นอาร์เรย์ทั้งหมดจึงสามารถเข้าถึงเมธอดแมปได้
• ขณะนี้ วัตถุต้นแบบนี้มีเมธอดอาร์เรย์ทั้งหมดรวมถึงแผนที่

• ดังนั้น ในตัวอย่างข้างต้น “ Array.Prototype”คือต้นแบบของอาร์เรย์ตัวเลข ตัวแปรอาร์เรย์ตัวเลขนั้นเชื่อมโยงกับต้นแบบ ดังนั้นจึงสามารถเข้าถึงเมธอดทั้งหมดที่กำหนดไว้ใน ออบเจกต์ “ array.prototype ” ดังนั้นในตัวอย่างข้างต้น อาร์เรย์ “number” จะสืบทอดเมธอดแมป
• ใน Javascript เราสามารถใช้การสืบทอดต้นแบบได้สามวิธี วิธีหนึ่งคือฟังก์ชันคอนสตรัคเตอร์ วิธีที่สองคือคลาส ES6 และวิธีสุดท้ายคือเมธอด Object.Create()

• ฟังก์ชันคอนสตรัคเตอร์ใช้เพื่อสร้างวัตถุจากฟังก์ชัน นี่คือวิธีการใช้วัตถุในตัวเช่น Array และ map method

• นี่เป็นทางเลือกที่ทันสมัยสำหรับฟังก์ชันตัวสร้าง คลาส ES6 ทำงานเหมือนกับฟังก์ชันตัวสร้าง คลาส ES6 ไม่ทำงานเหมือน OOP แบบคลาสสิก เบื้องหลัง คลาส ES6 ถูกนำไปใช้กับฟังก์ชันตัวสร้าง

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    console.log(this.firstName + ' ' + this.lastName);
  }
}

const user = new User('Bennison', 'J');

console.log(user); // { firstName: 'Bennison', lastName: 'J' }

console.log(user.hasOwnProperty('firstName')); // true
console.log(user.hasOwnProperty('getFullName')); // false

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

• เมธอด “ object.create()”เป็นวิธีที่ง่ายที่สุดในการเชื่อมโยงออบเจกต์กับออบเจกต์ต้นแบบ

const objOne = {
  firstName: 'Bennison',
  lastName: 'J',
  getFullName: function () {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const objTwo = Object.create(objOne);

console.log(objTwo); // {}
objTwo.getFullName(); //  Bennison J

• เมธอด “Object.create” ส่งคืนวัตถุเปล่าพร้อมต้นแบบ และต้นแบบจะเป็นสิ่งที่เราส่งผ่านไปยังวิธีการนั้น

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