คุณอาจอ่านเจอที่ไหนสักแห่งขณะเตรียมตัวสำหรับการสัมภาษณ์ด้านเทคนิค: “ทุกสิ่งใน JavaScript นั้นเป็นวัตถุ! แม้แต่คลาส! แม้แต่ฟังก์ชั่น!”
JavaScript เป็นภาษาที่ได้รับความนิยมมากที่สุดภาษาหนึ่ง (หากไม่ใช่ “ภาษา”) ที่ใช้สำหรับแอปพลิเคชันบนเว็บและเซิร์ฟเวอร์ มันเป็นส่วนหนึ่งของมาตรฐาน ECMAScript โดยข้อกำหนดใหม่แต่ละข้อจะแนะนำคุณสมบัติเพิ่มเติม อัปเดตอยู่เสมอ และเพิ่มคุณสมบัติที่น่าตื่นเต้นใหม่ — อย่างไรก็ตาม งานที่น่าเบื่อ ซึ่งเป็นพื้นฐานที่ทำให้ JavaScript มีความหลากหลายมาก เป็นเรื่องจริงหรือไม่ที่เป็นเพียงวัตถุที่สร้างขึ้น
ความจริงนั้นทั้งเรียบง่ายและซับซ้อน ที่แกนกลาง JavaScript แบ่งประเภทค่าออกเป็นสองประเภท: ค่าดั้งเดิมและ วัตถุ แม้ว่า JavaScript มักจะดูเหมือนเป็นที่ที่ค่าทั้งหมดดูเหมือนวัตถุ แต่ก็มีความแตกต่างที่สำคัญและสถานการณ์เฉพาะที่ความแตกต่างเหล่านี้มีความสำคัญ
ขั้นแรก เรามาทำให้วัตถุดั้งเดิมและวัตถุชัดเจนกันก่อน
ค่าพื้นฐาน หรือค่าพื้นฐานเป็นประเภทข้อมูลพื้นฐานใน JavaScript ที่ไม่ใช่วัตถุและไม่มีวิธีการ JavaScript รู้จักข้อมูลพื้นฐานเจ็ดประเภท: String, Number, BigInt, Boolean, Undefined, Null และ Symbol หากคุณใช้ TypeScript คุณจะรู้ว่าฉันกำลังพูดถึงอะไร (หรือแม้แต่ PropTypes ใน React)
แม้ว่าประเภทดั้งเดิมเหล่านี้จะไม่มีคุณสมบัติหรือวิธีการโดยเนื้อแท้ JavaScript ก็รวมวัตถุที่เทียบเท่า — String, Number, BigInt, Boolean และ Symbol ซึ่งล้อมรอบคู่ดั้งเดิมตามลำดับ แนวคิดนี้เรียกว่า 'มวย'
let str = "Hello, World!"; // this is a string type console.log(str.length); // 13 - this is a number type
ในข้อมูลโค้ดด้านบน str เป็น สตริงดั้งเดิม และเมื่อเราอ้างอิง str.length จากนั้น JavaScript จะ 'ใส่กล่อง' str ลงในออบเจ็กต์ String ชั่วคราวโดยอัตโนมัติ จะเข้าถึงคุณสมบัติ length จากนั้นละทิ้งออบเจ็กต์ชั่วคราว สร้าง ภาพลวงตาของดั้งเดิมที่ทำหน้าที่เป็นวัตถุ แต่ในความเป็นจริงแล้ว ไม่ใช่เลย!
ตรงกันข้ามกับแบบพื้นฐาน อ็อบเจ็กต์ใน JavaScript แสดงถึงคอลเลกชันของคุณสมบัติ โดยที่แต่ละอันเป็นการเชื่อมต่อระหว่างคีย์และค่า
และที่นี่เราทุกคนก็รู้เรื่องนี้ ค่านี้สามารถเป็นค่า JavaScript ใดก็ได้ ยกเว้น null และ undefined และออบเจ็กต์สามารถแสดงโครงสร้างข้อมูลได้หลากหลาย เช่น อาร์เรย์ ฟังก์ชัน และนิพจน์ทั่วไป และอื่นๆ อีกมากมาย (ใช่แล้ว ทั้งหมดนี้เป็นออบเจ็กต์!)
สามารถสร้างออบเจ็กต์ได้โดยใช้:
- object literals;
- Constructors,
- the Object.create method
พวกมันดูคล้ายกันมาก แต่แล้วอะไรคือความแตกต่าง?
ความแตกต่างที่สำคัญที่สุดคือ ค่าพื้นฐานใน JavaScript ไม่เปลี่ยนรูป: แม้ว่า JavaScript จะอนุญาตให้คุณเข้าถึงคุณสมบัติและวิธีการในค่าพื้นฐานราวกับว่าเป็นวัตถุ แต่คุณไม่สามารถแก้ไขคุณสมบัติที่มีอยู่หรือเพิ่มคุณสมบัติใหม่ลงในค่าพื้นฐานได้ นี่คือตัวอย่าง:
let str = "Hello, World!"; // initiate a string str.property = "test"; // trying to add a property, as we would do in an obj console.log(str.property); // undefined - not allowed, but no error
ในที่นี้ JavaScript จะไม่ทำให้เกิดข้อผิดพลาดเมื่อเราพยายามกำหนดคุณสมบัติใหม่ให้กับสตริงดั้งเดิม str! อย่างไรก็ตาม เนื่องจากพื้นฐานไม่เปลี่ยนรูป การมอบหมายจึงไม่มีผล และการเข้าถึงคุณสมบัติที่ตามมาจะส่งกลับ undefined ดังนั้น "ฉันได้ยินคุณ แต่ไม่ ฉันจะไม่ทำ"
ยังไม่แน่ใจใช่ไหม? ให้ฉันพยายามคุกคามสตริงเหล่านั้นด้วยวิธีอื่นโดยแกล้งทำเป็นว่าเป็นอาร์เรย์ (เช่นวัตถุ)
let greetings = "hello John"; greetings[0] = "H"; // Attempt to change the first letter to 'H' console.log(greetings); // "hello", not "Hello"
ลักษณะเฉพาะอีกประการหนึ่งของวัตถุดึกดำบรรพ์ก็คือการเปรียบเทียบด้วยค่า ไม่ใช่การอ้างอิงเมื่อเกิดขึ้นกับวัตถุ นี่อาจใช้สัญชาตญาณมากกว่า ถ้าฉันถามคุณว่า "แก้วนี้เหมือนกันกับอันนี้ไหม" คุณจะต้องตรวจสอบสองสิ่งในมือของฉันแล้วเปรียบเทียบ มันใช้งานง่ายใช่ไหม? อย่างไรก็ตาม ใน JavaScript หากคุณทำแบบเดียวกัน โดยเปรียบเทียบสองคุณสมบัติ ดังตัวอย่างต่อไปนี้ คำตอบจะเป็น false !
let person1 = { age: 18};
let person2 = { age: 18};
console.log(person1 === person2); // false
พวกเขาเหมือนกัน! อย่างไรก็ตาม เรากำลังเปรียบเทียบวัตถุ อ้างอิง(ตำแหน่งหน่วยความจำ) แทนที่จะเป็นคุณสมบัติของวัตถุ และนี่คือเคล็ดลับ อย่างไรก็ตาม การเปรียบเทียบสองสิ่งพื้นฐานในลักษณะเดียวกัน จะให้ผลลัพธ์ที่ต่างกัน
let myAge = 22; // I wish! let yourAge= 22; console.log(myAge === yourAge); // true
ซึ่งหมายความว่าเมื่อคุณเปรียบเทียบสองรายการพื้นฐานโดยใช้ === JavaScript จะตรวจสอบว่ามีค่าเท่ากันหรือไม่
ถึงเวลาสรุปผล
ดังนั้นโดยสรุป:
- ดั้งเดิมเป็น ไม่เปลี่ยนรูปและเป็นประเภทข้อมูลธรรมดา ในขณะที่ออบเจ็กต์ไม่แน่นอนและอาจซับซ้อนกว่า
- พื้นฐานจะเปรียบเทียบด้วยค่า ในขณะที่วัตถุจะถูกเปรียบเทียบโดยการอ้างอิง
- พื้นฐานไม่มีคุณสมบัติหรือวิธีการ ในขณะที่วัตถุมี อย่างไรก็ตาม JavaScript อนุญาตให้ดั้งเดิมเข้าถึงวิธีการของออบเจ็กต์ wrapper ทำให้เกิดภาพลวงตาว่าดั้งเดิมมีวิธี (boxing)
และตอนนี้คุณก็รู้แล้วว่าจะต้องตอบอะไรในครั้งต่อไปในระหว่างการสัมภาษณ์ พวกเขาจะถามคำถามที่ยุ่งยากและน่าสนใจนี้กับคุณ 😉
