Thuộc tính riêng JavaScript

Kể từ ES2022, bạn có thể xác định các trường riêng tư cho một lớp bằng cách sử dụng ký hiệu

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

1 có tiền tố là số nhận dạng. Bạn có thể truy cập các trường riêng tư từ hàm tạo của lớp trong phần khai báo lớp

Ví dụ: phần sau định nghĩa lớp

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

2 với trường riêng

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

3

class Circle {
  // private field
  #radius;
  constructor(value) {
    // You can access private field from constructor
    this.#radius = value;
  }
  get area() {
    return Math.PI * Math.pow(this.#radius, 2);
  }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Từ ví dụ trên,

• Chúng tôi khai báo trường riêng

  const circle = new Circle(10);
  console.log(circle.area); // 314.1592653589793
  

  0 trong phần thân của lớp
• Chúng tôi khởi tạo trường

  const circle = new Circle(10);
  console.log(circle.area); // 314.1592653589793
  

  0 trong hàm tạo với một đối số
• Chúng tôi tính diện tích của hình tròn bằng cách truy cập trường riêng tư

  const circle = new Circle(10);
  console.log(circle.area); // 314.1592653589793
  

  0 trong phương thức getter

Sau đây tạo một thể hiện mới của lớp Circle và tính diện tích của nó

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ,

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

0 là một trường riêng tư, bạn chỉ có thể truy cập nó bên trong lớp Circle. Nói cách khác, trường

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

0 ẩn bên ngoài lớp Circle

Cố gắng truy cập trường riêng bên ngoài lớp sẽ tạo ra lỗi cú pháp

console.log(circle.#privateField);   // Syntax error

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Di sản

Giống như các trường công khai, các trường riêng tư được thêm vào thời điểm xây dựng trong một lớp cơ sở hoặc tại thời điểm mà

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

5 được gọi trong một lớp con. Nhưng cố gắng truy cập trường Riêng tư từ một lớp con sẽ dẫn đến kết quả là

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

6. Các trường riêng tư chỉ có thể truy cập được trong lớp kèm theo (lớp nơi chúng được xác định). Ví dụ: phần sau định nghĩa lớp

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

7 mở rộng lớp

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

2

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nếu bạn cố gắng truy cập trường riêng của

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

0 trong lớp

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

7, bạn sẽ nhận được một

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

6

Cú pháp kỳ lạ?

Các định nghĩa lớp đã được giới thiệu trong ES6 và dư luận vẫn bình tĩnh. Các trường lớp ES2019 yêu cầu ít mã hơn, hỗ trợ khả năng đọc và cho phép một số khả năng lập trình hướng đối tượng thú vị

Việc sử dụng

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

1 để biểu thị các trường riêng tư đã nhận được một số lời chỉ trích, chủ yếu là vì nó xấu và có cảm giác như bị hack

Hầu hết các ngôn ngữ triển khai từ khóa

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

5, do đó, việc cố gắng sử dụng thành viên đó bên ngoài lớp sẽ bị trình biên dịch từ chối. JavaScript được giải thích. Hãy xem xét đoạn mã sau

GHI CHÚ. Vanilla Javascript không hỗ trợ từ khóa

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

5 nhưng hiện tại sẽ không hại gì khi cho rằng từ khóa

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

5 trong các lớp được hỗ trợ

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau khi khởi tạo lớp của chúng ta(

console.log(circle.#privateField);   // Syntax error

7), chúng ta đang cố gắng truy cập thuộc tính riêng tư của

console.log(circle.#privateField);   // Syntax error

8(

console.log(circle.#privateField);   // Syntax error

9). Điều này sẽ gây ra lỗi thời gian chạy ở dòng cuối cùng, nhưng đó là hậu quả quá lớn nếu chỉ cố gắng đặt một thuộc tính riêng tư.
Có thể bạn chưa biết, JavaScript ES5 cho phép sửa đổi thuộc tính trên bất kỳ đối tượng nào. Các lớp Javascript là các đối tượng dưới mui xe. Vì vậy, ném lỗi thời gian chạy khi cố gắng đặt thuộc tính riêng của lớp chúng ta thực sự giống như đặt quy tắc/quy ước của riêng bạn trong ngọn lửa🔥.

Mặc dù vô vị đối với mắt, ký hiệu

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

1 không hợp lệ bên ngoài định nghĩa lớp. Cố gắng truy cập

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

11 gây ra lỗi cú pháp.
_______112 là hợp lý vì trong Javascript, tên thuộc tính có thể bắt đầu bằng dấu gạch dưới hoặc chữ cái.

Nhấn nút thích và vui lòng cân nhắc theo dõi tôi trên twitter để cập nhật những gì tôi đang làm trong những ngày này. Theo tôi ở đây trong dev. để theo dõi khi bài viết tiếp theo của tôi xuất hiện. Bình yên✌️

Tài sản riêng tư trong JavaScript là gì?

JavaScript có thuộc tính riêng tư không?

Làm cách nào để tạo thuộc tính riêng tư trong một lớp JavaScript?