Articles
Giới thiệu về JavaScript
Đối tượng Wrapper trong JavaScript

Đối tượng Wrapper trong JavaScript

Bài viết này giải thích về đối tượng wrapper trong JavaScript.

YouTube Video

Các đối tượng bao bọc

JavaScript có các kiểu dữ liệu nguyên thủy và các đối tượng để xử lý chúng (đối tượng bao bọc).

Các kiểu dữ liệu nguyên thủy

Các kiểu dữ liệu nguyên thủy đại diện cho một giá trị đơn lẻ và đơn giản cũng như nhẹ nhàng. Chúng là bất biến (không thể thay đổi) và không trực tiếp có các phương thức hoặc thuộc tính đối tượng, nhưng chúng có thể được tạm thời chuyển đổi thành các đối tượng gói để thực hiện các thao tác.

string và number là các ví dụ về kiểu dữ liệu nguyên thủy. Ngược lại, các đối tượng bao bọc bắt đầu bằng chữ cái viết hoa, như String và Number.

Đối tượng Wrapper

Để thao tác với các kiểu nguyên thủy, JavaScript tạm thời tạo các đối tượng bao bọc (Object wrappers). Các đối tượng bao bọc chứa các phương thức và thuộc tính cho các kiểu nguyên thủy.

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 là một kiểu đối tượng bao bọc một number nguyên thủy. Bằng cách tạo rõ ràng một đối tượng Number, bạn có thể xử lý các số như một number, nhưng thông thường, nên sử dụng kiểu nguyên thủy number.

typeof numObject là "object", nhưng typeof 42 là "number".

  • Lưu ý rằng, sử dụng toán tử new để tạo một đối tượng bao bọc mới sẽ cho kết quả khác so với việc gọi Number như một hàm. Khi được gọi dưới dạng một hàm, một kiểu nguyên thủy number sẽ được trả về.

String 

1let strObject = new String("Hello"); // Wrapper object
2
3console.log(typeof strObject);    // object
4console.log(strObject.valueOf()); // Hello
  • Nó là một kiểu đối tượng bao bọc một string nguyên thủy. Bằng cách sử dụng một đối tượng String, bạn có thể truy cập các thuộc tính và phương thức của chuỗi, nhưng thông thường một string nguyên thủy được sử dụng.

typeof strObject là "object", nhưng typeof "Hello" là "string".

  • Giống như Number, gọi String như một hàm sẽ trả về một string nguyên thủy.

Boolean 

1let boolObject = new Boolean(true); // Wrapper object
2
3console.log(typeof boolObject);    // object
4console.log(boolObject.valueOf()); // true
  • Nó là một kiểu đối tượng bao bọc một boolean nguyên thủy. Bạn cũng có thể tạo rõ ràng một đối tượng Boolean, nhưng thông thường kiểu nguyên thủy boolean được sử dụng.

typeof boolObject là "object", nhưng typeof true là "boolean".

  • Tương tự như Number, gọi Boolean như một hàm sẽ trả về một boolean nguyên thủy.

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()); //
  • Bạn có thể sử dụng Object để tạo một đối tượng bao bọc cho Symbol, nhưng thông thường, bạn sử dụng trực tiếp kiểu nguyên thủy Symbol.

Sự khác biệt giữa các kiểu nguyên thủy và các đối tượng bao bọc

  • Các kiểu nguyên thủy nhẹ và hiệu quả về bộ nhớ, nhưng chúng không có các thuộc tính hoặc phương thức trực tiếp. Tuy nhiên, trong JavaScript, ngay cả với các kiểu nguyên thủy, các đối tượng bao bọc tạm thời được tự động tạo khi cần thiết để cung cấp các phương thức và thuộc tính.
1let text = "Hello";
2
3// A temporary String object is created,
4// allowing access to the length property
5console.log(text.length);
  • Các đối tượng bao bọc là các đối tượng được tạo ra rõ ràng và có thể ảnh hưởng đến bộ nhớ và hiệu suất, vì vậy thường khuyến nghị sử dụng các kiểu nguyên thủy.

Kết luận

  • Kiểu Dữ Liệu Nguyên Thủy: Các kiểu dữ liệu nhẹ như number, string, boolean, null, undefined, và symbol không có phương thức trực tiếp.
  • Đối Tượng Bọc: Các đối tượng như Number, String, và Boolean được chuyển đổi tạm thời từ các kiểu dữ liệu nguyên thủy.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các kiểu dữ liệu trong JavaScriptToán tử trong JavaScript