รู้เบื้องต้นเกี่ยวกับจาวาสคริปต์เชิงวัตถุ

ด้วยเหตุผลบางประการในอุตสาหกรรมไอทีมีแนวโน้มที่จะมองว่าหากคุณไม่ได้ใช้วิธี Object Oriented Programming (OOP) แสดงว่าคุณไม่ใช่“ โปรแกรมเมอร์ตัวจริง” นั่นเป็นท่าทีที่ค่อนข้างงี่เง่าที่ต้องทำเพราะมีหลายสถานการณ์ที่ OOP ไม่ใช่วิธีที่เหมาะสมที่สุดในการจัดการกับปัญหา นี่คือข้อบกพร่องในภาษาเช่น Java ซึ่งบังคับ OOP ในทุกงานการเขียนโปรแกรมไม่ว่าคุณจะต้องการหรือไม่ก็ตาม

JavaScript (ซึ่งแทบจะไม่มีอะไรเกี่ยวข้องกับ Java) เป็นภาษาที่แตกต่าง มันให้อิสระและความคล่องตัวที่แทบไม่ จำกัด พร้อมความซับซ้อนที่ลดลงในพื้นที่ส่วนใหญ่ น่าเสียดายที่มีบางสิ่งที่ซับซ้อนกว่าใน JavaScript เนื่องจากความอิสระในการพยายามให้คุณ

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

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

ตกลงมันยาก แต่ก็ไม่ยาก

ก่อนที่คุณจะเริ่มคิดแนวคิดของ Object Oriented JavaScript นั้นมากเกินไปสำหรับคุณให้พิจารณาว่าคุณใช้ OOP อยู่แล้วแม้ว่าคุณจะไม่ทราบก็ตาม ครูสอนอาจไม่เห็นด้วย แต่ฉันคิดว่ามันยุติธรรมที่จะพูดว่าถ้าคุณใช้ HTML และ CSS อยู่แล้วและคุณเคยใช้ JavaScript เพื่อจัดการองค์ประกอบ HTML บนหน้าเว็บเป็นครั้งคราวคุณก็เป็นโปรแกรมเมอร์ OOP ที่มีประสบการณ์แล้ว

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

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

ดังนั้นใช่ OOP ไม่ใช่เรื่องง่าย แต่คุณอาจทำไปแล้วมีอะไรที่ต้องกลัวบ้าง

ระดับถัดไป: การสร้างวัตถุของคุณเอง

การทำงานกับวัตถุ DOM ในตัวนั้นง่ายเกินไป คุณต้องการความท้าทายมากขึ้น การทำให้วัตถุของคุณเป็นขั้นตอนแรกสู่ระดับที่สูงขึ้นของ OOP

คุณอาจคาดหวังว่าการสร้างวัตถุเป็นเรื่องใหญ่ที่ต้องใช้รหัสที่ซับซ้อนจำนวนมาก แน่นอนถ้าคุณเคยลองสร้างคลาสอ็อบเจ็กต์ที่กำหนดเองในภาษาเช่น Java หรือ C # คุณจะต้องคาดหวังว่าจะสร้างตัวสร้างคลาสที่มีความยาว นี่คือวิธีที่เราทำใน JavaScript:

นั่นเป็นการต่อต้านภูมิอากาศใช่มั้ย? สิ่งที่เราทำคือเราสร้างวัตถุว่างของคลาส“ myObject” เห็นได้ชัดว่าวัตถุว่างเปล่านั้นน่าเบื่อเพราะมันไม่ได้ทำอะไรเลยนอกจากกินพื้นที่ในหน่วยความจำ วัตถุจะต้องมีเนื้อหาเพื่อประโยชน์ ลองพิจารณาชั้นเรียนที่เป็นประโยชน์เพิ่มเติม:

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

การใช้วัตถุในโปรแกรม

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

รหัสนี้จะทำให้เอเลี่ยนสีเขียวลื่น 20 ตัวแยกออกจากกัน 110 พิกเซล (ดังนั้นเราสามารถเดาได้ว่าภาพที่ใช้ในการจัดเก็บเอเลี่ยนนั้นมีความกว้าง 100px และมีระยะขอบ 10px ระหว่างแต่ละเอเลี่ยน) แน่นอนว่านี่ไม่ใช่วิธีที่ดีในการนำเกมใน JavaScript มาใช้เพราะมีเทคนิคที่ดีกว่า แต่บทความนี้ไม่ได้เกี่ยวกับการสร้างเกม แต่เป็นการสร้างและใช้วัตถุ

ไม่จำเป็นต้องเพิ่มวัตถุโดยใช้คำหลักใหม่ นี่คือตัวอย่างของรหัสจากโครงการที่วัตถุตั้งค่าคุณสมบัติของตนเองโดยใช้ค่าของวัตถุอื่น:

 

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

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

ทำไมต้องใช้วัตถุ

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

เมื่อไม่ใช้วัตถุ

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

ทำไม JavaScript Objects จึงสร้างได้ง่ายกว่า Object ในภาษา OOP อื่น ๆ

ในภาษาเช่น Java และแม้แต่ Visual Basic การสร้างวัตถุถือเป็นงานใหญ่ เนื่องจากคุณจำเป็นต้องสร้างเทมเพลตคลาส (หรือใช้เทมเพลตที่มีอยู่) เพื่อยึดวัตถุของคุณก่อนจึงจะสามารถกำหนดได้ สิ่งนี้ไม่จำเป็นใน JavaScript เนื่องจากเราได้รับเทคนิคการสร้างแบบง่ายๆ (objectname = {…}) ออบเจ็กต์ใน JavaScript สามารถรวมตัวแปรประเภทใดก็ได้รวมทั้งอาร์เรย์และการประกาศประเภทก็ไม่มีอยู่จริง ค่าส่งกลับเป็นทางเลือก

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

คุณคาดหวังได้อย่างถูกต้องว่าบรรทัดของโค้ดด้านบนจะใส่ 5 ไว้ในองค์ประกอบที่มี ID“ par1” แต่ถ้าคุณจะพิมพ์ข้อความเช่น:

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

วิธีหนึ่งในการทดสอบสำหรับสิ่งนี้คือ:

คำตอบนั้นค่อนข้างรุนแรง แต่คุณได้รับความคิด สังเกตว่าเรากำลังทดสอบ“! ==” ไม่ใช่“! =” ซึ่งเป็นเรื่องง่ายที่จะสับสน นี่เป็นอีกวิธีที่ทำได้:

สิ่งเดียวกันวิธีที่แตกต่าง คุณยังสามารถเพิ่มคุณสมบัติให้กับวัตถุหลังจากสร้างพวกเขา คุณสามารถทำได้เช่นนี้:

เห็นได้ชัดว่าคุณสามารถเปลี่ยนค่าของคุณสมบัติในลักษณะเดียวกัน ในการลบคุณสมบัติ Favorite Flavour ออกจากวัตถุเราต้องทำสิ่งนี้:

มีสถานการณ์น้อยมากที่สิ่งนี้จะเป็นสิ่งจำเป็น

ทำให้วัตถุใช้งานได้อีกครั้ง

คุณอาจสังเกตเห็นปัญหาที่ใหญ่ที่สุดที่อาจเกิดขึ้นกับการสร้างวัตถุซึ่งถ้าคุณต้องการมีเอเลี่ยนชนิดต่าง ๆ คุณจะต้องทำให้คุณสมบัติ objAlien.type เป็นอาร์เรย์ แต่มีวิธีอื่นซึ่งดีกว่า

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

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

ดังนั้นตอนนี้เพื่อสร้างวัตถุตามต้นแบบที่เราสามารถทำได้:

นี่เหมือนกับการทำเช่นนี้:

เนื่องจากเราสร้างต้นแบบเราไม่จำเป็นต้องทำมันด้วยวิธีที่สองและประกาศมนุษย์ต่างดาวประเภทต่าง ๆ ด้วยความเร็วที่แตกต่างกันจำนวนอาวุธอาวุธและตำแหน่งเริ่มต้นนั้นง่ายกว่ามาก

อะไรต่อไป?

บทความนี้เป็นการแนะนำ Object Oriented JavaScript ซึ่งหวังเป็นอย่างยิ่งว่าจะเข้าใจอย่างชัดเจนในเรื่องนี้และทำให้ดูเหมือนหวาดกลัวน้อยลง เราครอบคลุมพื้นฐานทั้งหมดรวมถึงวิธีการสร้างวัตถุง่าย ๆ วิธีเพิ่มลบและปรับเปลี่ยนคุณสมบัติวิธีประกาศและใช้วิธีการและวิธีการใช้ต้นแบบในการทำให้วัตถุกลับมาใช้ง่ายขึ้น แต่ยังมีอะไรอีกมากมายให้เรียนรู้ดังนั้นเมื่อคุณมีจุดเริ่มต้นที่ดีคุณจะสามารถเข้าถึงการสอนหรือบทเรียนเกี่ยวกับ OOP ขั้นสูงได้อย่างมั่นใจ

บ็อกดานแรนเซีย

บ็อกแดนเป็นสมาชิกผู้ก่อตั้งของนิตยสาร Inspired Mag ซึ่งสะสมประสบการณ์เกือบ 6 ปีในช่วงเวลานี้ ในเวลาว่างเขาชอบเรียนดนตรีคลาสสิกและสำรวจทัศนศิลป์ เขาค่อนข้างหมกมุ่นอยู่กับ fixies เช่นกัน เขาเป็นเจ้าของ 5 คนแล้ว

ความคิดเห็น 0 คำตอบ

เขียนความเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเปิดเผย กรุณากรอกช่องที่มีเครื่องหมายให้ครบถ้วน *

อันดับ *

ไซต์นี้ใช้ Akismet เพื่อลดสแปม เรียนรู้วิธีการประมวลผลข้อมูลความคิดเห็นของคุณ.

มาเป็นผู้เชี่ยวชาญด้านอีคอมเมิร์ซ

ป้อนอีเมลของคุณเพื่อเริ่มปาร์ตี้