Các đối tượng có thể chứa các đối tượng trong javascript không?

Vì vậy, một đối tượng trong JavaScript là gì, cũng như trong nhiều ngôn ngữ lập trình khác, có thể được so sánh với các đối tượng ngoài đời thực. Khái niệm về các đối tượng trong JavaScript có thể được hiểu với các đối tượng hữu hình trong cuộc sống thực

Trong bài đăng trên blog này, chúng tôi giải thích

• Đối tượng trong JavaScript là gì
• Cách thêm phương thức vào đối tượng JavaScript
• một nhà xây dựng là gì
• từ khóa này là gì
• Cách viết mã sạch hơn bằng cách sử dụng tính kế thừa
• JSON là gì (ký hiệu đối tượng JavaScript)

Các đối tượng trong lập trình có thể là sự kết hợp của các biến, hàm và cấu trúc dữ liệu. Điều này có nghĩa là các đối tượng có thể lưu trữ các giá trị, bạn có thể sử dụng các đối tượng để thao tác các giá trị và kết hợp chúng thành các đối tượng phức tạp hơn, chẳng hạn như mảng mà vẫn nhận được tất cả các lợi ích. JavaScript cũng không khác. Nếu bạn muốn biết thêm, hãy đọc bài đăng trên blog của chúng tôi. JavaScript là gì?

Viết đối tượng đầu tiên của bạn bằng JavaScript

Cách tốt nhất để giải thích đối tượng là gì với một ví dụ từ cuộc sống thực. Lấy một cái cốc chẳng hạn. Một cái cốc là một đối tượng có thuộc tính. Một chiếc cốc có màu sắc, thể tích, trọng lượng, v.v.

Theo cách tương tự, các đối tượng JavaScript có thể có các thuộc tính xác định đặc điểm của chúng. Bạn có thể xác định một thuộc tính bằng cách gán cho nó một giá trị.  

Ví dụ: hãy tạo một đối tượng có tên myCup và đặt cho nó các thuộc tính có tên là màu sắc, khối lượng và trọng lượng như sau

Đầu tiên, chúng ta khai báo một biến bắt đầu bằng let myCup. Chúng tôi khởi tạo nó bằng Object() mới. Tiếp theo, chúng tôi thêm tất cả các thuộc tính. Chúng tôi thêm một thuộc tính có tên màu như thế này. màu chấm myCup bằng. Và sau đó viết giá trị. minh bạch trong dấu ngoặc kép

Đối với kích thước cốc 1 lít, chúng ta có thể viết myCup.volume = 1. Trọng lượng là tài sản cuối cùng. myCup.weight bằng và giá trị 0. 5

Ký hiệu ngắn hơn cho các đối tượng JavaScript

Chúng ta có thể viết cùng một đối tượng trong một ký hiệu ngắn hơn. Danh sách các cặp tên thuộc tính và giá trị liên quan được phân cách bằng dấu phẩy, được đặt trong dấu ngoặc nhọn

Chúng tôi khai báo một biến trong cùng một cách với. let myCup bằng và sau đó là dấu ngoặc nhọn

Trong dòng mới, chúng tôi viết thuộc tính đầu tiên, màu sắc như thế này. Tô màu dấu hai chấm rồi viết giá trị. minh bạch trong dấu ngoặc kép. Vì đây không phải là thuộc tính cuối cùng của một đối tượng nên chúng ta phải kết thúc dòng bằng dấu phẩy.  

Tiếp theo là tài sản. âm lượng. Chúng tôi viết volume: 1. Một lần nữa chúng ta phải thêm dấu phẩy ở cuối dòng. Tài sản cuối cùng là. trọng lượng. Trọng lượng ruột kết và giá trị. Lần này không có dấu phẩy ở cuối. Nhưng chúng tôi kết thúc đối tượng bằng một dấu ngoặc nhọn đóng

Bây giờ bạn đã biết đối tượng trong JavaScript là gì. Và làm thế nào bạn có thể xác định nó trong mã. Chúng tôi khuyên bạn nên sử dụng ký hiệu ngắn hơn, nhưng bạn có thể thực hiện theo cả hai cách

Khi nào chúng ta sử dụng dấu phẩy ở cuối dòng?

Chúng tôi sử dụng dấu phẩy cho mỗi giá trị thuộc tính ngoại trừ giá trị cuối cùng. Trong một số trình chỉnh sửa, bạn được phép sử dụng dấu phẩy ngay cả đối với thuộc tính cuối cùng. Nhưng cách tốt nhất là giữ cho nó sạch sẽ và để thuộc tính cuối cùng không có dấu phẩy

Thực hành - Đối tượng trong JavaScript là gì

Chúng tôi tại CodeBrainer muốn giải thích bằng các ví dụ, vì vậy hãy tạo một đối tượng khác để thực hành. Tạo đối tượng cho bảng. Bảng có thuộc tính. chiều cao, chiều rộng, chiều dài và màu sắc

Đừng lo, chúng tôi sẽ trình bày giải pháp từng bước trong video về "Đối tượng trong JavaScript là gì". Bạn xem cách khai báo biến cho đối tượng và cách nhập giá trị

Chúng tôi đã giải thích các đối tượng trong JavaScript là gì. Chúng tôi cũng chỉ ra cách tạo một đối tượng theo hai cách. Bây giờ chúng ta sẽ chỉ ra lợi ích của các đối tượng là gì

Thêm phương thức cho các đối tượng JavaScript

Sử dụng các đối tượng là điều tuyệt vời vì bạn có thể thêm các phương thức. Phương thức là các chức năng được liên kết với dữ liệu trong đối tượng của bạn. Điều này giúp làm việc với các đối tượng dễ dàng hơn nhiều.  

Chúng tôi đã tạo một đối tượng cho bảng trên, để thực hành. Hãy tưởng tượng rằng bạn có nhiều bảng. Làm thế nào bạn sẽ in ra tất cả các màu sắc?

Nói cách khác, một phương thức là một thuộc tính của một đối tượng là một hàm

Chúng ta cần một đối tượng để chỉ ra cách thức hoạt động của các phương thức

Đầu tiên, chúng tôi khai báo một biến cho đối tượng của chúng tôi. Chúng tôi bắt đầu với let myTable equals sau đó chúng tôi bắt đầu đối tượng với dấu ngoặc nhọn mở và nhấn enter, bây giờ chúng tôi viết các giá trị. Chiều cao dấu hai chấm và viết giá trị "75". Vì chúng tôi có nhiều thuộc tính hơn để viết, chúng tôi kết thúc bằng dấu phẩy và nhập.  

Bây giờ chúng ta viết thuộc tính tiếp theo. Mở rộng dấu hai chấm và viết giá trị "120". Chúng tôi kết thúc bằng dấu phẩy và nhấn enter. Bây giờ chúng ta viết thuộc tính tiếp theo.  

Độ dài dấu hai chấm và viết giá trị "60". Chúng tôi kết thúc bằng dấu phẩy và nhập. Bây giờ chúng ta viết thuộc tính tiếp theo.  

Tô màu dấu hai chấm và viết giá trị "trắng". Bây giờ chúng ta đi ra khỏi định nghĩa của đối tượng, chúng ta cũng thêm dấu chấm phẩy vào cuối định nghĩa

Trong mã của bạn, hãy tạo một khoảng trống nhỏ để viết phương thức của chúng ta

Hãy viết một phương thức cho đối tượng của chúng ta

Chúng ta có thể thêm một phương thức đơn giản bằng cách thêm một thuộc tính khác là một hàm. Chức năng này sẽ có thể đọc các giá trị của đối tượng và làm việc với chúng

Chúng tôi sẽ thêm một ví dụ sẽ in màu của bảng

Chúng tôi bắt đầu với myTable.whatIsMyColor bằng và chúng tôi viết một hàm không có tham số

Đây là nơi chúng tôi viết chức năng của mình. Nó có thể là bất cứ thứ gì bạn muốn, miễn là nó giúp bạn làm việc với một đối tượng

Hiện tại, chúng tôi chỉ hướng dẫn cách in màu. Bạn sẽ thấy rằng các chức năng của bạn sẽ phức tạp hơn

Bên trong chúng tôi gọi console.log và viết. "Màu của tôi là. " cộng với this.color. từ khóa. "Cái này" rất quan trọng và nó liên kết bạn với dữ liệu của đối tượng

Bây giờ chúng ta có thể thực hiện cuộc gọi

Bây giờ chúng ta có thể gọi myTable.whatIsMyColor(). Hãy nhớ luôn viết dấu ngoặc ở cuối

Bạn có thể tưởng tượng rằng bạn có thể sử dụng phương thức whatIsMyColor nhiều lần. Và đây là một trong những lợi ích vì bạn không phải lặp lại mã

Từ khóa "này" có nghĩa là gì?

Khi một hàm được sử dụng làm hàm tạo (với từ khóa new), từ khóa this được liên kết với đối tượng mới đang được tạo. Điều này có nghĩa là giá trị của this được quyết định dựa trên cách mã được thực thi

Tương tự như vậy khi sử dụng từ khóa this trong các phương thức trả về một hàm đối tượng dành cho. Sẽ hợp lý hơn khi bạn viết mã cho các đối tượng của mình, bởi vì bạn đang thêm chức năng vào các đối tượng mà bạn hiểu. Và sau đó this trả về đối tượng mà bạn đang làm việc

Điều quan trọng cần nhớ là từ khóa this có nghĩa khác nhau tùy theo ngữ cảnh. Nếu bạn sử dụng nó bên trong hàm tạo, phương thức hoặc đối tượng bên ngoài. Bạn có thể đọc thêm về nó trong một bài viết có tên đơn giản. cái này

Thực hành - các phương thức cho một đối tượng trong JavaScript

Đã đến giờ luyện tập. Viết phương thức trả về một vùng của bảng

Đừng lo lắng, bạn có thể xem từng bước giải pháp trong video trên. Cách thêm phương thức vào đối tượng JavaScript của bạn

Phương thức tính diện tích của bảng đã là một ví dụ tốt hơn vì nó tính toán một giá trị mới từ các giá trị hiện có. Trong tương lai, bạn sẽ thấy rằng hầu hết các phương thức sẽ được sử dụng để thao tác dữ liệu, tính toán và biểu thị các giá trị theo một cách mới

Bây giờ chúng tôi đã chỉ ra cách thêm một phương thức vào một đối tượng trong JavaScript. Đây là một kỹ thuật mà bạn sẽ sử dụng rất nhiều, vì nó làm cho mã của bạn ngắn hơn rất nhiều

Hàm tạo cho đối tượng JavaScript là gì?

Chúng tôi đã nói về đối tượng trong JavaScript là gì, chúng tôi đã giải thích các phương thức trong JavaScript là gì. Bây giờ chúng ta đã biết cách tạo các đối tượng, chúng ta có thể làm việc với chúng

Một kỹ thuật quan trọng trong lập trình là kế thừa. Trong JavaScript, điều này có nghĩa là chúng ta tạo một đối tượng "con" kế thừa các tính năng từ các lớp "cha" của chúng

Điều này có nghĩa là bạn chỉ có thể viết hàm cho đối tượng một lần và chỉ cần thay đổi giá trị. Điều này làm cho công việc của bạn dễ dàng hơn và cũng làm giảm số lượng lỗi trong mã của bạn

Một cách hay để sử dụng thừa kế là với các hàm tạo. Hàm tạo là một hàm đặc biệt được gọi để tạo một đối tượng. Nó cũng chuẩn bị đối tượng mới để sử dụng. Hầu hết thời gian một hàm tạo chấp nhận các đối số mà nó sử dụng để đặt các giá trị ban đầu của đối tượng

Hãy hiển thị điều này với một ví dụ cho đối tượng bảng của chúng tôi

Chúng tôi khai báo một biến với bảng myCup.weight4 và hàm bằng. Đối với chức năng, chúng tôi sử dụng các tham số. chiều cao, chiều rộng, chiều dài và màu sắc

Đừng quên đặt dấu ngoặc nhọn ở cuối dòng, rồi nhấn enter. Điều này xác định phần thân của hàm

Đối với tài sản đầu tiên, chúng tôi viết myCup.weight5. Và dấu chấm phẩy và nhập để kết thúc dòng. Tiếp theo, viết myCup.weight6. Với dấu chấm phẩy và nhập vào cuối. Và bây giờ cho chiều dài. Ở đây chúng tôi sử dụng một chữ viết tắt cho chiều dài. len (vì độ dài đã là một phương thức của từng đối tượng trong JavaScript). Và màu

Thừa kế là gì?

Kế thừa là cơ chế dựa trên một đối tượng hoặc lớp dựa trên một đối tượng khác (kế thừa dựa trên nguyên mẫu, vâng, đây là JavaScript) hoặc lớp (kế thừa dựa trên lớp). Kế thừa cho phép lập trình viên tạo các lớp được xây dựng dựa trên các lớp hiện có và sử dụng lại mã.  

Một lớp được kế thừa được gọi là lớp con của lớp cha hoặc siêu lớp của nó. Đây là lý do tại sao bạn có thể thấy từ khóa myCup.weight7 được sử dụng để làm việc với các phương thức của lớp cha

Tóm lại, ưu điểm chính của tính kế thừa là khả năng đọc lại mã và khả năng đọc

Đọc thêm trên wiki. Kế thừa (lập trình hướng đối tượng)

Các phương thức bên trong các hàm tạo

Các hàm tạo rất hữu ích vì đây cũng là một cách tốt để xác định các phương thức cho các đối tượng.

Hãy chỉ ra cách chúng ta có thể thêm một phương thức sẽ cho biết màu của bảng. Chúng tôi đã nói về các phương thức và bạn đã biết cách viết chúng, ở đây chúng tôi sử dụng trực tiếp trong hàm tạo

Viết myCup.weight8 bằng và viết hàm không có tham số. Với dấu ngoặc nhọn, chúng tôi xác định phần thân của hàm

Chúng tôi gọi myCup.weight9 và nhập giá trị. Chỉ cần cẩn thận để nhập dấu tích, không phải dấu nháy đơn

Giá trị là. "Màu của tôi là. ". Sau đó viết dấu $ và dấu ngoặc nhọn. Dấu ngoặc trong this.color. Điều này đọc giá trị cho đối tượng. Đối với dòng mới, chúng tôi sử dụng dấu ngắt thẻ HTML ở cuối

Lần này chúng tôi đang sử dụng tài liệu. viết. Điều này sẽ hiển thị một thông báo trên tài liệu HTML của bạn. Nhưng bạn có thể thay đổi nó và sử dụng bảng điều khiển. log để xem thông báo trong bảng điều khiển gỡ lỗi

Bây giờ chúng ta có thể sử dụng hàm tạo để khai báo các đối tượng mới

Sử dụng hàm tạo để khai báo các đối tượng mới

Chúng tôi khai báo một biến với ____21 bằng và sau đó chúng tôi gọi ____22. Bên trong ngoặc là các giá trị cho đối tượng của chúng tôi

Chúng ta có thể sử dụng constructor nhiều lần. Bây giờ chúng ta có thể khai báo một biến thứ hai với let mySecondTable. Một lần nữa, chúng tôi gọi Bảng mới và ghi giá trị. let myCup3

Điều cuối cùng là gọi phương thức cho cả hai đối tượng. Gọi let myCup4. Hãy nhớ rằng, dấu ngoặc ở cuối

Gọi cho đối tượng thứ hai là như nhau. let myCup5

Chúng ta hãy xem cái này trông như thế nào trong trình duyệt. (Nếu bạn đã sử dụng bàn điều khiển. log, hãy kiểm tra bảng điều khiển gỡ lỗi trong trình duyệt của bạn. ) Đừng quên lưu tệp của bạn trước khi xem

Thực hành - hàm tạo cho JavaScript

Bây giờ, hãy thực hành bằng cách thêm hai đối tượng mới. Đối tượng đầu tiên phải là một bảng có màu vàng. Kích thước tùy thuộc vào bạn. Đối tượng thứ hai cũng phải là một bảng màu nâu với các kích thước tùy chỉnh

Bạn có thể xem giải pháp từng bước trong video ở trên. Hàm tạo trong JavaScript là gì

Đây là kết quả bạn sẽ nhận được trong trình duyệt

Chúng tôi đã chỉ ra đối tượng trong JavaScript là gì, cách viết hàm tạo và các phương thức là gì.

Nếu bạn cần thêm thông tin, chỉ cần cho chúng tôi biết và chúng tôi sẽ thêm nó vào blog của chúng tôi

Ký hiệu ngắn cho các đối tượng và JSON

Khi bạn biết ký hiệu ngắn cho các đối tượng trông như thế nào, bạn có thể sử dụng kiến ​​thức đó để viết JSON. JSON là một loại ký hiệu đặc biệt cho phép bạn ghi dữ liệu theo cách nhỏ gọn và dễ đọc. JSON trông rất giống các đối tượng trong mã thuần túy JavaScript. Nếu bạn muốn tìm hiểu thêm, hãy đọc bài đăng trên blog của chúng tôi về. JSON trong JavaScript là gì

Phần kết luận

Biết đối tượng trong JavaScript là gì là quan trọng, nhưng bạn sẽ có cảm giác về nó khi lập trình. Càng viết nhiều dòng code, bạn càng hiểu lợi ích của các đối tượng. Quan trọng nhất, đây là cách để làm cho mã phức tạp trở nên dễ hiểu và dễ sử dụng

Chúng tôi đã trình bày một số ví dụ về cách tạo một đối tượng và cách sử dụng chúng bằng các phương thức, hãy cho chúng tôi biết suy nghĩ của bạn, chúng tôi có thể giúp bạn nhiều hơn như thế nào. Và hãy nhớ vui vẻ viết mã với CodeBrainer

Một đối tượng có thể chứa các đối tượng?

Chúng ta có thể lưu trữ đối tượng trong JavaScript đối tượng không?

Làm cách nào để thêm một đối tượng bên trong một đối tượng trong JavaScript?

Làm cách nào để kiểm tra xem một đối tượng có chứa đối tượng JavaScript không?