Một đối tượng javaScript là một thực thể có trạng thái và hành vi [thuộc tính và phương thức]. Ví dụ. xe hơi, bút, xe đạp, ghế, kính, bàn phím, màn hình, v.v.
JavaScript là một ngôn ngữ dựa trên đối tượng. Mọi thứ đều là đối tượng trong JavaScript
JavaScript dựa trên mẫu không dựa trên lớp. Ở đây, chúng ta không tạo lớp để lấy đối tượng. Nhưng, chúng tôi trực tiếp tạo các đối tượng
Tạo đối tượng trong JavaScript
Có 3 cách tạo đối tượng
- Theo đối tượng theo nghĩa đen
- Bằng cách tạo trực tiếp đối tượng [sử dụng từ khóa mới]
- Bằng cách sử dụng một hàm tạo đối tượng [sử dụng từ khóa mới]
1] Đối tượng JavaScript theo nghĩa đen
Cú pháp tạo đối tượng bằng cách sử dụng đối tượng chữ được đưa ra dưới đây
Như bạn có thể thấy, thuộc tính và giá trị được phân tách bằng. [Đại tràng]
Hãy xem ví dụ đơn giản về tạo đối tượng trong JavaScript
Kiểm tra nó ngay bây giờĐầu ra của ví dụ trên
2] Bằng cách tạo phiên bản của Đối tượng
Cú pháp tạo đối tượng trực tiếp được đưa ra dưới đây
Ở đây, từ khóa new được sử dụng để tạo đối tượng
Hãy xem ví dụ tạo đối tượng trực tiếp
Kiểm tra nó ngay bây giờĐầu ra của ví dụ trên
3] Bằng cách sử dụng hàm tạo đối tượng
Ở đây, bạn cần tạo hàm với các đối số. Mỗi giá trị đối số có thể được gán trong đối tượng hiện tại bằng cách sử dụng từ khóa này
Từ khóa this đề cập đến đối tượng hiện tại
Ví dụ về việc tạo đối tượng bằng hàm tạo đối tượng được đưa ra dưới đây
Kiểm tra nó ngay bây giờĐầu ra của ví dụ trên
Định nghĩa phương thức trong JavaScript Object
Chúng ta có thể định nghĩa phương thức trong đối tượng JavaScript. Nhưng trước khi định nghĩa phương thức, chúng ta cần thêm thuộc tính vào hàm có cùng tên với phương thức
Các đối tượng có thể được sử dụng theo nhiều cách khác nhau trong JavaScript. Có một số cách khác nhau để nhập chúng để hỗ trợ tất cả các trường hợp sử dụng khác nhau
Trong Flow, có hai loại đối tượng khác nhau. loại đối tượng chính xác và loại đối tượng không chính xác
Nói chung, chúng tôi khuyên bạn nên sử dụng bất cứ khi nào có thể. Các loại đối tượng chính xác chính xác hơn và tương tác tốt hơn với các tính năng hệ thống loại khác, như chênh lệch
Cú pháp kiểu đối tượng
Các loại đối tượng cố gắng khớp với cú pháp của các đối tượng trong JavaScript càng nhiều càng tốt. Sử dụng dấu ngoặc nhọn
1// @flow2var obj: { foo?: boolean } = {};3
4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
1// @flow2var obj: { foo?: boolean } = {};3
4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
1// @flow2var obj: { foo?: boolean } = {};3
4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
1// @flow2var obj1: { foo: boolean } = { foo: true };3var obj2: {4 foo: number,5 bar: boolean,6 baz: string,7} = {8 foo: 1,9 bar: true,10 baz: 'three',11};Ghi chú. Các loại đối tượng trước đây đã sử dụng dấu chấm phẩy
4 để phân tách các cặp tên-giá trị. Trong khi cú pháp vẫn hợp lệ, bạn nên sử dụng dấu phẩy1// @flow2var obj: { foo?: boolean } = {};3 4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
31// @flow2var obj: { foo?: boolean } = {};3 4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
Thuộc tính loại đối tượng tùy chọn
Trong JavaScript, việc truy cập một thuộc tính không tồn tại có giá trị là
1// @flow2var obj: { foo?: boolean } = {};3
4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
1// @flow2var obj = { foo: "bar" };3// $ExpectError4obj.bar; // Error!
Nếu bạn có một đối tượng đôi khi không có thuộc tính, bạn có thể biến nó thành thuộc tính tùy chọn bằng cách thêm dấu chấm hỏi
1// @flow2var obj: { foo?: boolean } = {};3
4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
1// @flow2var obj: { foo?: boolean } = {};3
4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
Ngoài loại giá trị đã đặt của chúng, các thuộc tính tùy chọn này có thể là
1// @flow2var obj: { foo?: boolean } = {};3
4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
1// @flow2var obj: { foo?: boolean } = {};3
4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
1// @flow2function acceptsObject[value: { foo?: string }] {3 // ...4}5
6acceptsObject[{ foo: "bar" }]; // Works!7acceptsObject[{ foo: undefined }]; // Works!8// $ExpectError9acceptsObject[{ foo: null }]; // Error!
10acceptsObject[{}]; // Works!phương pháp đối tượng
Cú pháp phương thức trong các đối tượng có hành vi thời gian chạy giống như thuộc tính hàm. Hai đối tượng này tương đương trong thời gian chạy
1// @flow2let a = {3 foo : function [] { return 3; }4};5let b = {6 foo[] { return 3; }7}Tuy nhiên, bất chấp hành vi thời gian chạy tương đương của chúng, Flow kiểm tra chúng hơi khác một chút. Cụ thể, các thuộc tính đối tượng được viết bằng cú pháp phương thức là chỉ đọc;
1// @flow2let b = {3 foo[] { return 3; }4}5b.foo = [] => { return 2; } // Error!
Ngoài ra, các phương thức đối tượng không cho phép sử dụng
0 trong phần thân của chúng, để đảm bảo hành vi đơn giản cho các tham số6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
0 của chúng. Thích tham chiếu đối tượng theo tên thay vì sử dụng6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
06:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
1// @flow2var obj = { foo: "bar" };3// $ExpectError4obj.bar; // Error!
Loại đối tượng suy luận
GHI CHÚ. Hành vi của các đối tượng trống bằng chữ đã thay đổi kể từ phiên bản 0. 191 - xem bài đăng trên blog này để biết thêm chi tiết
Khi bạn tạo một giá trị đối tượng, loại của nó được đặt tại điểm tạo. Bạn không thể thêm thuộc tính mới hoặc sửa đổi loại thuộc tính hiện có
1// @flow2var obj = { foo: "bar" };3// $ExpectError4obj.bar; // Error!
Nếu bạn cung cấp chú thích, bạn có thể thêm các thuộc tính bị thiếu trong giá trị đối tượng làm thuộc tính tùy chọn
1// @flow2var obj = { foo: "bar" };3// $ExpectError4obj.bar; // Error!
Bạn cũng có thể cung cấp loại rộng hơn cho một thuộc tính cụ thể
1// @flow2var obj = { foo: "bar" };3// $ExpectError4obj.bar; // Error!
Đối tượng trống có thể được hiểu là một , nếu bạn cung cấp chú thích thích hợp
1// @flow2var obj = { foo: "bar" };3// $ExpectError4obj.bar; // Error!
Các loại đối tượng chính xác
Trong Flow, việc chuyển một đối tượng có các thuộc tính bổ sung trong đó loại đối tượng bình thường được mong đợi là an toàn
1// @flow2var obj = { foo: "bar" };3// $ExpectError4obj.bar; // Error!
Ghi chú. Điều này là do "phân loại chiều rộng"
Đôi khi sẽ hữu ích khi vô hiệu hóa hành vi này và chỉ cho phép một bộ thuộc tính cụ thể. Đối với điều này, Flow hỗ trợ các loại đối tượng "chính xác"
1// @flow2var obj = { foo: "bar" };3// $ExpectError4obj.bar; // Error!
Bạn có thể biểu thị các loại đối tượng chính xác bằng cách thêm một cặp "thanh dọc" hoặc "đường ống" vào bên trong dấu ngoặc nhọn. Nếu bạn muốn đặt chúng làm mặc định khi viết các loại đối tượng, bạn có thể thêm vào
4 tùy chọn của mình6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
Không giống như các loại đối tượng thông thường, việc chuyển một đối tượng có thuộc tính "phụ" sang một loại đối tượng chính xác là không hợp lệ
1// @flow2var obj = { foo: "bar" };3// $ExpectError4obj.bar; // Error!
Giao lộ của các loại đối tượng chính xác có thể không hoạt động như bạn mong đợi. Nếu bạn cần kết hợp các loại đối tượng chính xác, hãy sử dụng loại đối tượng trải rộng
1Bản sao_______8_______24:5-4:7: Cannot get `obj.bar` because property `bar` is missing in object literal [1]. [prop-missing]
Loại đối tượng không chính xác rõ ràng
Ngoài cú pháp
1// @flow2var obj: { foo?: boolean } = {};3
4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
3Bản sao4:5-4:7: Cannot get `obj.bar` because property `bar` is missing in object literal [1]. [prop-missing]
Flow đang lên kế hoạch làm cho các loại đối tượng trở nên chính xác theo mặc định. Điều này có sẵn thông qua một. Bạn cũng có thể đọc hướng dẫn nâng cấp của chúng tôi để biết các bước kích hoạt tùy chọn này trong dự án của riêng bạn
Trong một dự án sử dụng cú pháp chính xác theo mặc định, cú pháp loại đối tượng không chính xác rõ ràng là cách duy nhất để thể hiện một loại đối tượng không chính xác
Các đối tượng như bản đồ
Các phiên bản mới hơn của tiêu chuẩn JavaScript bao gồm một lớp
6, nhưng việc sử dụng các đối tượng làm bản đồ vẫn rất phổ biến. Trong trường hợp sử dụng này, một đối tượng có thể sẽ có các thuộc tính được thêm vào và được truy xuất trong suốt vòng đời của nó. Hơn nữa, các khóa thuộc tính thậm chí có thể không được biết một cách tĩnh, do đó, việc viết ra một chú thích loại sẽ không thể thực hiện được6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
Đối với các đối tượng như thế này, Flow cung cấp một loại thuộc tính đặc biệt, được gọi là "thuộc tính bộ chỉ mục. " Thuộc tính bộ chỉ mục cho phép đọc và ghi bằng bất kỳ khóa nào khớp với loại khóa của bộ chỉ mục
4Bản sao4:5-4:7: Cannot get `obj.bar` because property `bar` is missing in object literal [1]. [prop-missing]
Một bộ chỉ mục có thể được đặt tên tùy chọn, cho mục đích tài liệu
5Bản sao4:5-4:7: Cannot get `obj.bar` because property `bar` is missing in object literal [1]. [prop-missing]
Khi một loại đối tượng có thuộc tính bộ chỉ mục, các truy cập thuộc tính được coi là có loại được chú thích, ngay cả khi đối tượng không có giá trị trong vị trí đó khi chạy. Người lập trình có trách nhiệm đảm bảo truy cập an toàn, như với mảng
6Bản sao4:5-4:7: Cannot get `obj.bar` because property `bar` is missing in object literal [1]. [prop-missing]
Các thuộc tính của bộ chỉ mục có thể được trộn lẫn với các thuộc tính được đặt tên
7Bản sao4:5-4:7: Cannot get `obj.bar` because property `bar` is missing in object literal [1]. [prop-missing]
6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
7 Loại
6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
GHI CHÚ. Đối với mã mới, hãy ưu tiên
8 hoặc6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
9.6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
7 là bí danh của6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
8 và sẽ không được dùng nữa cũng như bị xóa trong phiên bản tương lai của Flow6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
Đôi khi sẽ rất hữu ích khi viết các loại chấp nhận các đối tượng tùy ý, đối với những loại bạn nên viết
1// @flow2var obj: { foo?: boolean } = {};3
4obj.foo = true; // Works!5// $ExpectError6obj.foo = 'hello'; // Error!
84:5-4:7: Cannot get `obj.bar` because property `bar` is missing in object literal [1]. [prop-missing]
Tuy nhiên, nếu bạn cần chọn không tham gia trình kiểm tra loại và không muốn chuyển đến
8, bạn có thể sử dụng6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
9. [Lưu ý rằng6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
8 không an toàn và nên tránh]. Vì lý do lịch sử, từ khóa6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
7 vẫn còn. Trong các phiên bản trước của Flow,6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
7 giống như6:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]
96:11-6:17: Cannot assign `'hello'` to `obj.foo` because string [1] is incompatible with boolean [2]. [incompatible-type]