HomeLập trìnhJavaScriptTổng quan nhanh...

Tổng quan nhanh về các ký hiệu JavaScript


bởi Vali Shah

1*3AzH-G1JpbL4UhzH5TXS5w
Ký hiệu — JS Primitives

ký hiệu

Biểu tượng là mới nguyên thủy loại được giới thiệu trong ES6. Biểu tượng là định danh hoàn toàn duy nhất. Cũng giống như các đối tác nguyên thủy của chúng (Con số, Chuỗi, Boolean), chúng có thể được tạo bằng chức năng xuất xưởng Symbol() trả về một Biểu tượng.

const symbol = Symbol('description')

Mỗi khi bạn gọi chức năng xuất xưởng, một biểu tượng mới và duy nhất sẽ được tạo. Tham số có giá trị chuỗi tùy chọn là một chuỗi mô tả được hiển thị khi in biểu tượng.

> symbol
Symbol(description)

Mọi biểu tượng được trả về bởi Symbol() là duy nhất, vì vậy mỗi biểu tượng có bản sắc riêng của nó:

> Symbol() === Symbol()
false

Bạn có thể thấy rằng các biểu tượng là nguyên thủy nếu bạn áp dụng typeof toán tử cho một trong số chúng – nó sẽ trả về một kết quả dành riêng cho ký hiệu mới:

> typeof symbol
'symbol'

Trường hợp sử dụng: Ký hiệu là khóa của thuộc tính không công khai

Bất cứ khi nào có hệ thống phân cấp thừa kế trong JavaScript, bạn có hai loại thuộc tính (ví dụ: được tạo thông qua các lớp, một cách tiếp cận nguyên mẫu thuần túy):

  • Công cộng các thuộc tính được nhìn thấy bởi các khách hàng của mã
  • Riêng tư các thuộc tính được sử dụng nội bộ trong các phần tạo nên hệ thống phân cấp thừa kế (ví dụ: lớp, đối tượng).
Đọc thêm  Ghi nhớ là gì? Cách thức và thời điểm ghi nhớ trong JavaScript và React

Vì lợi ích của khả năng sử dụng, các thuộc tính công khai thường có các khóa chuỗi. Nhưng đối với các thuộc tính riêng tư có khóa chuỗi, xung đột tên ngẫu nhiên có thể trở thành một vấn đề. Do đó, các biểu tượng là một lựa chọn tốt.

Ví dụ: trong đoạn mã sau, các ký hiệu được sử dụng cho các thuộc tính riêng tư _counter_action:

const _counter = Symbol('counter');
const _action  = Symbol('action');
class Countdown {
    constructor(counter, action) {
        this[_counter] = counter;
        this[_action] = action;
    }
    dec() {
        let counter = this[_counter];
        if (counter < 1) return;
        counter--;
        this[_counter] = counter;
        if (counter === 0) {
            this[_action]();
        }
    }
}

Lưu ý rằng các biểu tượng chỉ bảo vệ bạn khỏi xung đột tên, không bảo vệ khỏi truy cập trái phép. Bạn có thể tìm ra tất cả các khóa thuộc tính của một đối tượng — bao gồm các ký hiệu — thông qua cách sau:

const obj = {
  [Symbol('my_key')]  : 1, 
   enum               : 2, 
   nonEnum            : 3
};

Object.defineProperty(obj, 'nonEnum', { enumerable: false }); // Making 'nonEnum' as not enumerable.

// Ignores symbol-valued property keys:
> Object.getOwnPropertyNames(obj)
['enum', 'nonEnum']

// Ignores string-valued property keys:
> Object.getOwnPropertySymbols(obj)
[Symbol(my_key)]

// Considers all kinds of keys:
> Reflect.ownKeys(obj)
[Symbol(my_key),'enum', 'nonEnum']

// Only considers enumerable property keys that are strings:
> Object.keys(obj)
['enum']

Chúng ta có thực sự cần các biểu tượng?

Sử dụng các ký hiệu khi yêu cầu của bạn là một trong những điều sau:

  • liệt kê: Để cho phép bạn xác định các hằng số có tên ngữ nghĩa và giá trị duy nhất.
const directions = {
  UP   : Symbol( ‘UP’ ),
  DOWN : Symbol( ‘DOWN’ ),
  LEFT : Symbol( ‘LEFT’ ),
  RIGHT: Symbol( ‘RIGHT’ )
};
  • Xung đột tên: khi bạn muốn ngăn va chạm với các phím trong đối tượng
  • Sự riêng tư: khi bạn không muốn các thuộc tính đối tượng của mình là vô số
  • giao thức: Để xác định cách một đối tượng có thể được lặp lại.
    Ví dụ, hãy tưởng tượng một thư viện như dragula xác định một giao thức thông qua Symbol.for(dragula.moves) . Bạn có thể thêm một phương thức vào đó Symbol đến bất kỳ phần tử DOM nào. Nếu một phần tử DOM tuân theo giao thức, thì dragula có thể gọi el[Symbol.for('dragula.moves')]() phương thức do người dùng định nghĩa để xác nhận xem phần tử có thể được di chuyển hay không.
  • Các biểu tượng nổi tiếng: Ngoài các ký hiệu do người dùng định nghĩa, JavaScript còn có một số ký hiệu tích hợp sẵn. Chúng đại diện cho các hành vi ngôn ngữ nội bộ không được các nhà phát triển tiếp xúc trong đây.
Đọc thêm  Hướng dẫn đóng JavaScript – Với mã ví dụ đóng JS

Phần kết luận

Symbols trong JavaScript có thể cung cấp tính duy nhất ở cấp độ truy cập cho các đối tượng. Tất cả các nhà phát triển đều cần có hiểu biết cơ bản về chúng và các trường hợp sử dụng khác nhau của chúng.

code = coffee + developer



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status