ตัวห่อวัตถุใน JavaScript

บทความนี้อธิบายเกี่ยวกับตัวห่อวัตถุใน JavaScript

YouTube Video

วัตถุห่อหุ้ม

JavaScript มี primitive types และอ็อบเจกต์ที่ใช้จัดการกับมัน (wrapper objects)

ประเภทดั้งเดิม

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

string และ number เป็นตัวอย่างของ primitive types ในทางกลับกัน wrapper objects จะเริ่มต้นด้วยอักษรตัวใหญ่ เช่น String และ Number

ตัวห่อวัตถุ

เพื่อจัดการกับประเภทฐาน JavaScript จะสร้างวัตถุห่อ (Object) ชั่วคราว วัตถุห่อจะมีเมธอดและพร็อพเพอร์ตี้สำหรับประเภทฐาน

Number

1let numObject = new Number(42);   // Wrapper object
2
3console.log(typeof numObject);    // object
4console.log(numObject.valueOf()); // 42
5
6let numValue = Number(42);        // Return primitive value
7
8console.log(typeof numValue);     // number
9console.log(numValue);            // 42

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

typeof numObject เป็น "object" แต่ typeof 42 เป็น "number"

• โปรดทราบว่าการใช้ตัวดำเนินการ new เพื่อสร้างวัตถุห่อใหม่ จะให้ผลลัพธ์ที่แตกต่างจากการเรียกใช้ Number แบบฟังก์ชัน เมื่อถูกเรียกในฐานะฟังก์ชัน จะส่งคืนค่าชนิดข้อมูลพื้นฐาน number

String

1let strObject = new String("Hello"); // Wrapper object
2
3console.log(typeof strObject);    // object
4console.log(strObject.valueOf()); // Hello

• มันเป็น ประเภทวัตถุที่ห่อหุ้มประเภทฐาน string โดยการใช้วัตถุ String คุณสามารถเข้าถึงพร็อพเพอร์ตี้และเมธอดของสายอักขระได้ แต่โดยทั่วไปใช้ประเภทฐาน string

typeof strObject เป็น "object" แต่ typeof "Hello" เป็น "string"

• เช่นเดียวกับ Number การเรียกใช้ String แบบฟังก์ชันจะคืนค่าประเภทฐาน string

Boolean

1let boolObject = new Boolean(true); // Wrapper object
2
3console.log(typeof boolObject);    // object
4console.log(boolObject.valueOf()); // true

• มันเป็น ประเภทวัตถุที่ห่อหุ้มประเภทฐาน boolean คุณสามารถสร้างวัตถุ Boolean โดยชัดเจนได้ แต่โดยทั่วไปจะใช้ประเภทฐาน boolean

typeof boolObject เป็น "object" แต่ typeof true เป็น "boolean"

• เช่นเดียวกับ Number การเรียกใช้ Boolean แบบฟังก์ชันจะคืนค่าประเภทฐาน boolean

BigInt

 1let bigIntObject = Object(9007199254740991n); // Wrapper object
 2
 3console.log(typeof bigIntObject);    // object
 4console.log(bigIntObject.valueOf()); // 9007199254740991n
 5
 6let bigIntValue = BigInt(9007199254740991);   // Return primitive BigInt
 7
 8console.log(typeof bigIntValue);     // bigint
 9console.log(bigIntValue);            // 9007199254740991n
10
11// Error
12let bigIntObject2 = new BigInt(9007199254740991n);

• Objectを使ってBigIntのラッパーオブジェクトを生成できますが、通常はプリミティブ型のbigintを直接使うのが一般的です。

typeof bigIntObjectは"object"であるのに対し、typeof 9007199254740991nは"bigint"です。

• BigIntを関数として呼び出すとプリミティブなbigintを返しますが、new演算子をつけてBigIntのラッパーオブジェクトを生成することはできません。

Symbol

1let symObject = Object(Symbol("id")); // Wrapper object for Symbol
2
3console.log(typeof symObject);    // object
4console.log(symObject.valueOf()); //

• คุณสามารถใช้ Object เพื่อสร้างวัตถุห่อ (wrapper object) สำหรับ Symbol ได้ แต่โดยทั่วไป คุณควรใช้ประเภทฐาน (primitive type) Symbol โดยตรง

ความแตกต่างระหว่างประเภทฐานและวัตถุห่อ

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

1let text = "Hello";
2
3// A temporary String object is created,
4// allowing access to the length property
5console.log(text.length);

• วัตถุห่อ เป็นวัตถุที่สร้างขึ้นโดยชัดเจนซึ่งอาจส่งผลต่อหน่วยความจำและประสิทธิภาพ ดังนั้นจึงแนะนำให้ใช้ประเภทฐานโดยทั่วไป

บทสรุป

• ประเภทดั้งเดิม: ประเภทที่มีน้ำหนักเบา เช่น number, string, boolean, null, undefined, และ symbol ที่ไม่มีเมธอดโดยตรง
• วัตถุห่อหุ้ม (Wrapper Objects): วัตถุเช่น Number, String และ Boolean ที่ถูกแปลงมาจากประเภทดั้งเดิมชั่วคราว

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video