Hướng dẫn what are javascript objects what do they contain? - các đối tượng javascript chúng chứa những gì?

Đối tượng cơ bản

Một đối tượng là một tập hợp các dữ liệu và/hoặc chức năng liên quan. Chúng thường bao gồm một số biến và hàm (được gọi là thuộc tính và phương thức khi chúng ở bên trong các đối tượng). Hãy làm việc thông qua một ví dụ để hiểu chúng trông như thế nào.

Để bắt đầu, hãy tạo một bản sao cục bộ của tệp oojs.html của chúng tôi. Điều này chứa rất ít - một yếu tố

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Như với nhiều thứ trong JavaScript, việc tạo một đối tượng thường bắt đầu bằng việc xác định và khởi tạo một biến. Hãy thử nhập dòng sau bên dưới mã JavaScript đã có trong tệp của bạn, sau đó lưu và làm mới:

Bây giờ hãy mở bảng điều khiển JavaScript của trình duyệt, nhập

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

[object Object]
Object { }
{ }

Xin chúc mừng, bạn vừa tạo đối tượng đầu tiên của mình. Công việc hoàn thành! Nhưng đây là một đối tượng trống, vì vậy chúng tôi thực sự không thể làm được gì nhiều với nó. Hãy cập nhật đối tượng JavaScript trong tệp của chúng tôi để trông như thế này:

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Sau khi lưu và làm mới, hãy thử nhập một số điều sau đây vào bảng điều khiển JavaScript trên trình duyệt của bạn DevTools:

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Bây giờ bạn đã có một số dữ liệu và chức năng bên trong đối tượng của mình và hiện có thể truy cập chúng với một số cú pháp đơn giản đẹp!

Chuyện gì đang xảy ra ở đây vậy? Vâng, một đối tượng được tạo thành từ nhiều thành viên, mỗi thành viên có một tên (ví dụ:

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

Giá trị của một thành viên đối tượng có thể khá nhiều - trong đối tượng người của chúng tôi, chúng tôi có một số, một mảng và hai hàm. Hai mục đầu tiên là các mục dữ liệu và được gọi là thuộc tính của đối tượng. Hai mục cuối cùng là các hàm cho phép đối tượng thực hiện một cái gì đó với dữ liệu đó và được gọi là phương thức của đối tượng.properties. The last two items are functions that allow the object to do something with that data, and are referred to as the object's methods.

Khi các thành viên của đối tượng là chức năng, có một cú pháp đơn giản hơn. Thay vì

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Từ bây giờ, chúng tôi sẽ sử dụng cú pháp ngắn hơn này.

Một đối tượng như thế này được gọi là một đối tượng theo nghĩa đen - chúng ta đã viết ra nội dung đối tượng theo nghĩa đen khi chúng ta đến để tạo nó. Điều này khác với các đối tượng được khởi tạo từ các lớp, mà chúng ta sẽ xem xét sau này.object literal — we've literally written out the object contents as we've come to create it. This is different compared to objects instantiated from classes, which we'll look at later on.

Rất phổ biến để tạo một đối tượng bằng cách sử dụng một đối tượng theo nghĩa đen khi bạn muốn chuyển một loạt các mục dữ liệu có cấu trúc, liên quan theo cách nào đó, ví dụ: gửi yêu cầu đến máy chủ để đưa vào cơ sở dữ liệu. Gửi một đối tượng duy nhất hiệu quả hơn nhiều so với việc gửi một số mục riêng lẻ và làm việc với một mảng dễ dàng hơn, khi bạn muốn xác định các mục riêng lẻ theo tên.

Ký hiệu chấm

Ở trên, bạn đã truy cập các thuộc tính và phương thức của đối tượng bằng cách sử dụng ký hiệu DOT. Tên đối tượng (người) đóng vai trò là không gian tên - nó phải được nhập trước để truy cập bất cứ thứ gì bên trong đối tượng. Tiếp theo bạn viết một dấu chấm, sau đó mục bạn muốn truy cập - đây có thể là tên của một thuộc tính đơn giản, một mục của thuộc tính mảng hoặc cuộc gọi đến một trong các phương thức của đối tượng, ví dụ:dot notation. The object name (person) acts as the namespace — it must be entered first to access anything inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:

person.age;
person.bio();

Đối tượng là thuộc tính đối tượng

Một thuộc tính đối tượng có thể là một đối tượng. Ví dụ: hãy thử thay đổi thành viên

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

const person = {
  name: ["Bob", "Smith"],
};

đến

const person = {
  name: {
    first: "Bob",
    last: "Smith",
  },
  // …
};

Để truy cập các mục này, bạn chỉ cần xâu chuỗi bước thêm vào cuối với một dấu chấm khác. Hãy thử những thứ này trong bảng điều khiển JS:

person.name.first;
person.name.last;

Nếu bạn làm điều này, bạn cũng sẽ cần phải thông qua mã phương thức của mình và thay đổi bất kỳ trường hợp nào của

đến

Để truy cập các mục này, bạn chỉ cần xâu chuỗi bước thêm vào cuối với một dấu chấm khác. Hãy thử những thứ này trong bảng điều khiển JS:

Nếu bạn làm điều này, bạn cũng sẽ cần phải thông qua mã phương thức của mình và thay đổi bất kỳ trường hợp nào của

Nếu không, phương pháp của bạn sẽ không còn hoạt động.

Ký hiệu khung

Ký hiệu khung cung cấp một cách khác để truy cập các thuộc tính đối tượng. Thay vì sử dụng ký hiệu DOT như thế này:

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

person.age;
person.name.first;

Ký hiệu DOT thường được ưa thích hơn ký hiệu khung vì nó ngắn gọn hơn và dễ đọc hơn. Tuy nhiên, có một số trường hợp bạn phải sử dụng dấu ngoặc. Ví dụ: nếu một tên thuộc tính đối tượng được giữ trong một biến, thì bạn không thể sử dụng ký hiệu DOT để truy cập giá trị, nhưng bạn có thể truy cập giá trị bằng ký hiệu khung.

Trong ví dụ dưới đây, hàm

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Thiết lập các thành viên đối tượng

Cho đến nay, chúng tôi chỉ xem xét các thành viên truy xuất (hoặc nhận) các thành viên đối tượng - bạn cũng có thể đặt (cập nhật) giá trị của các thành viên đối tượng bằng cách tuyên bố thành viên bạn muốn đặt (sử dụng ký hiệu DOT hoặc khung), như thế này:getting) object members — you can also set (update) the value of object members by declaring the member you want to set (using dot or bracket notation), like this:

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Hãy thử nhập các dòng trên, và sau đó nhận lại các thành viên để xem họ đã thay đổi như vậy như vậy:

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Cài đặt thành viên không chỉ dừng cập nhật các giá trị của các thuộc tính và phương thức hiện có; Bạn cũng có thể tạo thành viên hoàn toàn mới. Hãy thử những thứ này trong bảng điều khiển JS:

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Bây giờ bạn có thể kiểm tra các thành viên mới của mình:

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Một khía cạnh hữu ích của ký hiệu khung là nó có thể được sử dụng để đặt không chỉ các giá trị thành viên một cách linh hoạt, mà cả tên thành viên. Giả sử chúng tôi muốn người dùng có thể lưu trữ các loại giá trị tùy chỉnh trong dữ liệu người của họ, bằng cách nhập tên thành viên và giá trị vào hai đầu vào văn bản. Chúng ta có thể nhận được những giá trị đó như thế này:

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Sau đó, chúng tôi có thể thêm tên và giá trị thành viên mới này vào đối tượng

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Để kiểm tra điều này, hãy thử thêm các dòng sau vào mã của bạn, ngay bên dưới khả năng đóng cửa của đối tượng

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Bây giờ hãy thử lưu và làm mới, và nhập phần sau vào đầu vào văn bản của bạn:

Thêm một thuộc tính vào một đối tượng bằng phương thức ở trên không thể có với ký hiệu DOT, chỉ có thể chấp nhận tên thành viên theo nghĩa đen, không phải là giá trị biến chỉ vào tên.

Cái này là cái gì"?

Bạn có thể nhận thấy một cái gì đó hơi lạ trong các phương pháp của chúng tôi. Nhìn vào cái này chẳng hạn:

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Bạn có thể đang tự hỏi "điều này" là gì. Từ khóa

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Chà, khi bạn chỉ phải tạo một đối tượng theo nghĩa đen, nó không hữu ích. Nhưng nếu bạn tạo nhiều hơn một,

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Hãy minh họa những gì chúng ta muốn nói với một cặp đối tượng người đơn giản hóa:

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Trong trường hợp này,

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Giới thiệu các nhà xây dựng

Sử dụng các chữ cái đối tượng là tốt khi bạn chỉ cần tạo một đối tượng, nhưng nếu bạn phải tạo nhiều hơn một, như trong phần trước, chúng không đủ nghiêm trọng. Chúng ta phải viết ra cùng một mã cho mọi đối tượng chúng ta tạo và nếu chúng ta muốn thay đổi một số thuộc tính của đối tượng - như thêm thuộc tính

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Chúng tôi muốn một cách để xác định "hình dạng" của một đối tượng - tập hợp các phương thức và các thuộc tính mà nó có thể có - và sau đó tạo bao nhiêu đối tượng tùy thích, chỉ cần cập nhật các giá trị cho các thuộc tính khác nhau.

Phiên bản đầu tiên của điều này chỉ là một chức năng:

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Hàm này tạo và trả về một đối tượng mới mỗi khi chúng ta gọi nó. Đối tượng sẽ có hai thành viên:

• một tài sản

  person.name;
  person.name[0];
  person.age;
  person.bio();
  person.introduceSelf();
  

  9
• một phương pháp

  person.age;
  person.bio();
  

  0.

Lưu ý rằng

person.age;
person.bio();

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

person.age;
person.bio();

Bây giờ chúng ta có thể tạo bao nhiêu đối tượng tùy thích, tái sử dụng định nghĩa:

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Điều này hoạt động tốt nhưng có một chút dài dòng: chúng ta phải tạo một đối tượng trống, khởi tạo nó và trả về nó. Một cách tốt hơn là sử dụng một hàm tạo. Một hàm tạo chỉ là một hàm được gọi là từ khóa

person.age;
person.bio();

person.age;
person.bio();

• Tạo một đối tượng mới
• Liên kết

  const person = {
    name: ["Bob", "Smith"],
    age: 32,
    bio() {
      console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
    },
    introduceSelf() {
      console.log(`Hi! I'm ${this.name[0]}.`);
    },
  };
  

  1 với đối tượng mới, vì vậy bạn có thể tham khảo

  const person = {
    name: ["Bob", "Smith"],
    age: 32,
    bio() {
      console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
    },
    introduceSelf() {
      console.log(`Hi! I'm ${this.name[0]}.`);
    },
  };
  

  1 trong mã constructor của mình
• Chạy mã trong hàm tạo
• Trả về đối tượng mới.

Các hàm tạo, theo quy ước, bắt đầu bằng một chữ cái viết hoa và được đặt tên cho loại đối tượng họ tạo. Vì vậy, chúng tôi có thể viết lại ví dụ của mình như thế này:

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Để gọi

person.age;
person.bio();

person.age;
person.bio();

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Bạn đã sử dụng các đối tượng cùng

Khi bạn đã trải qua những ví dụ này, có lẽ bạn đã nghĩ rằng ký hiệu dấu chấm mà bạn đang sử dụng rất quen thuộc. Đó là bởi vì bạn đã sử dụng nó trong suốt khóa học! Mỗi khi chúng tôi đã làm việc thông qua một ví dụ sử dụng API trình duyệt tích hợp hoặc đối tượng JavaScript, chúng tôi đã sử dụng các đối tượng, bởi vì các tính năng như vậy được xây dựng bằng cách sử dụng chính xác cùng loại cấu trúc đối tượng mà chúng tôi đã xem xét ở đây , mặc dù những cái phức tạp hơn trong các ví dụ tùy chỉnh cơ bản của chúng ta.

Vì vậy, khi bạn đã sử dụng các phương thức chuỗi như:

Bạn đã sử dụng một phương thức có sẵn trên đối tượng

const person = {
  name: ["Bob", "Smith"],
};

const person = {
  name: ["Bob", "Smith"],
};

Khi bạn truy cập mô hình đối tượng tài liệu bằng cách sử dụng các dòng như thế này:

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Bạn đã sử dụng các phương thức có sẵn trên một đối tượng

const person = {
  name: ["Bob", "Smith"],
};

const person = {
  name: ["Bob", "Smith"],
};

const person = {
  name: ["Bob", "Smith"],
};

Điều tương tự cũng đúng với khá nhiều đối tượng hoặc API tích hợp khác mà bạn đã sử dụng-

const person = {
  name: ["Bob", "Smith"],
};

const person = {
  name: ["Bob", "Smith"],
};

Lưu ý rằng được tích hợp trong các đối tượng và API không luôn tự động tạo các phiên bản đối tượng. Ví dụ, API thông báo - cho phép trình duyệt hiện đại thông báo hệ thống hỏa hoạn - yêu cầu bạn khởi tạo một thể hiện đối tượng mới bằng cách sử dụng hàm tạo cho mỗi thông báo bạn muốn bắn. Hãy thử nhập phần sau vào bảng điều khiển JavaScript của bạn:

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Kiểm tra kỹ năng của bạn!

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra kỹ năng của bạn: Khái niệm cơ bản đối tượng.

Bản tóm tắt

Xin chúc mừng, bạn đã đạt đến cuối bài viết của các đối tượng JS đầu tiên của chúng tôi - giờ đây bạn nên có một ý tưởng tốt về cách làm việc với các đối tượng trong JavaScript - bao gồm tạo các đối tượng đơn giản của riêng bạn. Bạn cũng nên đánh giá cao rằng các đối tượng rất hữu ích vì các cấu trúc để lưu trữ dữ liệu và chức năng liên quan - nếu bạn cố gắng theo dõi tất cả các thuộc tính và phương thức trong đối tượng

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Trong bài viết tiếp theo, chúng ta sẽ xem xét các nguyên mẫu, đó là cách cơ bản mà JavaScript cho phép một đối tượng kế thừa các thuộc tính từ các đối tượng khác.prototypes, which is the fundamental way that JavaScript lets an object inherit properties from other objects.

• Tổng quan: Đối tượng
• Tiếp theo

Trong mô -đun này