Đối tượng trong Javascript – sử dụng các đối tượng trong javascript

Cổng thông tin Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, được tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : sử dụng các đối tượng trong javascript

Đối tượng, trong JavaScript, là kiểu dữ liệu quan trọng nhất và tạo thành các khối xây dựng cho JavaScript hiện đại. Các đối tượng này khá khác với các kiểu dữ liệu nguyên thủy của JavaScript (Số, Chuỗi, Boolean, null, không xác định và biểu tượng) theo nghĩa là trong khi các kiểu dữ liệu nguyên thủy này đều lưu trữ một giá trị duy nhất (tùy thuộc vào kiểu của chúng).

  • Các đối tượng phức tạp hơn và mỗi đối tượng có thể chứa bất kỳ sự kết hợp nào của các kiểu dữ liệu nguyên thủy này cũng như các kiểu dữ liệu tham chiếu.
  • Một đối tượng, là một kiểu dữ liệu tham chiếu. Các biến được gán một giá trị tham chiếu được cung cấp một tham chiếu hoặc một con trỏ đến giá trị đó. Tham chiếu hoặc con trỏ đó trỏ đến vị trí trong bộ nhớ nơi lưu trữ đối tượng. Các biến không thực sự lưu trữ giá trị.
  • Nói một cách dễ hiểu, các đối tượng trong JavaScript có thể được định nghĩa là một tập hợp dữ liệu liên quan không có thứ tự, thuộc loại nguyên thủy hoặc tham chiếu, ở dạng “khóa: các cặp giá trị ”. Các khóa này có thể là biến hoặc hàm và được gọi là thuộc tính và phương thức, tương ứng, trong ngữ cảnh của một đối tượng.

Một đối tượng có thể được tạo bằng dấu ngoặc vuông {…} Với một danh sách các thuộc tính tùy chọn. Thuộc tính là một cặp “khóa: giá trị”, trong đó khóa là một chuỗi (còn được gọi là “tên thuộc tính”) và giá trị có thể là bất kỳ thứ gì. Hãy để chúng tôi hình dung điều này với cú pháp sau để tạo một đối tượng trong JavaScript.

Cú pháp:

 let object_name = {
    key_name: giá trị,
    ...
} 

Bây giờ sau khi hiểu và hình dung cú pháp tạo đối tượng, chúng ta hãy xem ví dụ về một Đối tượng JavaScript bên dưới:

 let school = {
    tên: "Trường Vivekananda",
    vị trí: "Delhi",
    thành lập: "1971"
} 

Trong ví dụ trên “tên”, “địa điểm”, “thành lập” đều là “chìa khóa” “Trường Vivekananda” , “Delhi” và 1971 lần lượt là giá trị của các khóa này. Mỗi khóa này được gọi là thuộc tính của đối tượng. Một đối tượng trong JavaScript cũng có thể có một hàm như một thành viên, trong trường hợp đó, nó sẽ được biết đến như một phương thức của đối tượng đó. Chúng ta hãy xem một ví dụ như vậy:

javascript

< p>

let school = {

tên: 'Trường Vivekananda' ,

vị trí: 'Delhi' ,

thành lập: < / code> '1971' ,

displayInfo: chức năng () {

console.log (`$ {school.name} đã được thành lập < / p>

trong $ { school.established} tại $ {school.location} `);

}

}

school.displayInfo ();

 
  

Đầu ra: Trong ví dụ trên, “displayinfo” là một phương thức của đối tượng trường đang được sử dụng để làm việc với dữ liệu của đối tượng, được lưu trữ trong các thuộc tính của nó.

Thuộc tính của Đối tượng JavaScript

Tên thuộc tính có thể là chuỗi hoặc số. Trong trường hợp tên thuộc tính là số, chúng phải được truy cập bằng "ký hiệu dấu ngoặc" như sau:

javascript




let school = {

tên: 'Trường Vivekananda' ,

vị trí: 'Delhi' ,

thành lập: '1971' ,

20: 1000,

displayInfo: function () {

console.log (`Giá trị của khóa 20 là $ { trường [ '20' ]} `);

}

}

school.displayInfo ();

 
  

Đầu ra: Nhưng nhiều hơn về ký hiệu ngoặc sau này. Tên thuộc tính cũng có thể là chuỗi có nhiều hơn một từ được phân tách bằng dấu cách. Trong trường hợp đó, các tên thuộc tính này phải được đặt trong dấu ngoặc kép:

 let school = {
    "tên trường": "Trường Vivekananda",
} 

Giống như tên thuộc tính là số, chúng cũng phải được truy cập bằng ký hiệu dấu ngoặc. Giống như nếu chúng ta muốn truy cập 'Vivekananda' từ 'Trường Vivekananda', chúng ta có thể làm như sau:

javascript

let school = {

name: 'Vivekananda School' ,

displayInfo: function () {

console.log (`$ {school.name.split ( '' ) [0]} `);

}

}

school.displayInfo ();

 
  

Đầu ra: Trong đoạn mã trên, chúng tôi đã sử dụng ký hiệu dấu ngoặc và cũng như phương pháp phân tách do JavaScript cung cấp mà bạn sẽ tìm hiểu trong bài viết về chuỗi.

Thuộc tính kế thừa

Thuộc tính kế thừa của một đối tượng là những thuộc tính đã được kế thừa từ nguyên mẫu của đối tượng, trái ngược với việc được định nghĩa cho chính đối tượng, được gọi là thuộc tính Riêng của đối tượng. Để xác minh xem một thuộc tính có phải là Thuộc tính riêng của đối tượng hay không, chúng ta có thể sử dụng phương thức hasOwnProperty . Thuộc tính thuộc tính Thuộc tính dữ liệu trong JavaScript có bốn thuộc tính.

  • value: Giá trị của thuộc tính.
  • có thể ghi: Khi đúng, giá trị của thuộc tính có thể được thay đổi
  • có thể liệt kê: Khi đúng, thuộc tính có thể được lặp lại bằng kiểu liệt kê “cho-in”. Nếu không, thuộc tính được cho là không thể liệt kê được.
  • có thể định cấu hình: Nếu sai, cố gắng xóa thuộc tính, thay đổi thuộc tính thành thuộc tính hoặc quyền truy cập hoặc thay đổi các thuộc tính của nó (không phải [[Giá trị]] hoặc thay đổi [[W ghi]] thành sai) sẽ không thành công.

javascript

< br />



const object1 = new Object ();

< p class = "line number3 index2 alt2"> object1.property1 = 42;

console.log (object1.hasOwnProperty ( 'property1' ));

 
  

Đầu ra:

Tạo đối tượng

Có một số cách hoặc cú pháp để tạo đối tượng. Một trong số đó, được gọi là cú pháp theo nghĩa đen của Object, chúng tôi đã sử dụng. Bên cạnh cú pháp theo nghĩa đen của đối tượng, các đối tượng trong JavaScript cũng có thể được tạo bằng cách sử dụng các hàm tạo, Khối tạo đối tượng hoặc mẫu nguyên mẫu.

  1. Sử dụng cú pháp theo nghĩa đen đối tượng: Cú pháp theo nghĩa đen đối tượng sử dụng ký hiệu {…} để khởi tạo đối tượng một cách trực tiếp các phương thức / thuộc tính của nó. Chúng ta hãy xem một ví dụ về cách tạo các đối tượng bằng phương pháp này:
 var obj = {
    member1: value1,
    member2: value2,
}; 
  1. Các thành viên này có thể là bất kỳ thứ gì - chuỗi, số, hàm, mảng hoặc thậm chí các đối tượng khác. Một đối tượng như thế này được gọi là một đối tượng theo nghĩa đen. Điều này khác với các phương pháp tạo đối tượng khác liên quan đến việc sử dụng các hàm tạo và lớp hoặc nguyên mẫu đã được thảo luận bên dưới.
  2. Khối tạo đối tượng: Một cách khác để tạo đối tượng trong JavaScript là sử dụng phương thức khởi tạo "Đối tượng". Phương thức khởi tạo đối tượng tạo một trình bao bọc đối tượng cho giá trị đã cho. Điều này, được sử dụng cùng với từ khóa "mới" cho phép chúng ta khởi tạo các đối tượng mới. Ví dụ:

javascript

const school = < / code> new Object ();

school.name = 'Vivekanada school' ;

school.location = 'Delhi' ; < / p>

school.displayInfo = hàm () {

console.log (` $ {school.name} đã được thành lập

trong $ {school.established} với giá $ {school.location} `);

}

school.displayInfo ();

 
 
  1. Đầu ra: Hai phương pháp nêu trên không phù hợp với các chương trình yêu cầu tạo nhiều đối tượng cùng loại, vì nó sẽ liên quan đến việc viết nhiều lần các dòng mã trên cho mỗi đối tượng như vậy. Để giải quyết vấn đề này, chúng ta có thể sử dụng hai phương pháp tạo đối tượng khác trong JavaScript để giảm bớt gánh nặng này đáng kể, như được đề cập bên dưới:
  2. Các hàm tạo: Các hàm tạo trong JavaScript, như trong hầu hết các ngôn ngữ OOP khác, cung cấp một khuôn mẫu để tạo các đối tượng. Nói cách khác, nó định nghĩa một tập hợp các thuộc tính và phương thức chung cho tất cả các đối tượng được khởi tạo bằng cách sử dụng hàm tạo. Hãy để chúng tôi xem một ví dụ:

javascript

< code class = "keyword"> function Xe (tên, hãng sản xuất) {

this . name = name;

this . maker = maker;

}

let car1 = new Xe ( 'Fiesta' , 'Ford' );

let car2 = new Xe ( 'Santa Fe' , ' Huyndai ' )

< code class = "trơn"> console.log (car1.name);

console.log (car2.name);

 
  
  1. Đầu ra: Lưu ý việc sử dụng từ khóa" mới "trước chức năng Xe. Sử dụng từ khóa "mới" theo cách này trước khi bất kỳ hàm nào biến nó thành một phương thức khởi tạo. Những gì “Xe mới ()” thực sự làm là:
    • Nó tạo một đối tượng mới và đặt thuộc tính phương thức khởi tạo của đối tượng thành các trường (Điều quan trọng cần lưu ý là thuộc tính này là một thuộc tính mặc định đặc biệt không phải có thể liệt kê và không thể thay đổi bằng cách đặt thuộc tính “constructor: someFunction” theo cách thủ công).
    • Sau đó, nó thiết lập đối tượng để hoạt động với đối tượng nguyên mẫu của hàm Xe (Mỗi hàm trong JavaScript nhận một đối tượng nguyên mẫu, ban đầu chỉ là một đối tượng rỗng nhưng có thể được sửa đổi. đối tượng mới, có nghĩa là khi gặp từ khóa “this” trong hàm tạo (xe ()), nó đề cập đến đối tượng mới đã được tạo ở bước đầu tiên.
    • Sau khi hoàn thành, đối tượng mới tạo được trả về car1 và car2 (trong ví dụ trên).
  2. Nguyên mẫu: > Một cách khác để tạo các đối tượng liên quan đến việc sử dụng các nguyên mẫu. Mọi hàm JavaScript đều có thuộc tính đối tượng nguyên mẫu theo mặc định (mặc định nó trống). Các phương thức hoặc thuộc tính có thể được gắn vào thuộc tính này. Mô tả chi tiết về các nguyên mẫu nằm ngoài phạm vi của phần giới thiệu về các đối tượng này. Tuy nhiên, bạn có thể tự làm quen với cú pháp cơ bản được sử dụng như sau:
 let obj = Object.create (prototype_object, propertiesObject)
          // đối số thuộc tính thứ hai Đối tượng là tùy chọn 
  1. Ví dụ về việc sử dụng phương thức Object.create () là:

javascript

let the footballers = {

vị trí: "Tiền đạo"

}

let footballer1 = Object.create (footballers);

console.log (footballer1.position);

 
 
  1. Đầu ra: Trong ví dụ trên, các cầu thủ bóng đá được dùng làm nguyên mẫu để tạo đối tượng“ footballer1 ”. Tất cả các đối tượng được tạo theo cách này kế thừa tất cả các thuộc tính và phương thức từ các đối tượng nguyên mẫu của nó. Nguyên mẫu có thể có nguyên mẫu và những cái đó có thể có nguyên mẫu, v.v. Đây được gọi là chuỗi nguyên mẫu trong JavaScript. Chuỗi này kết thúc bằng Object.prototype là dự phòng nguyên mẫu mặc định cho tất cả các đối tượng. Các đối tượng JavaScript, theo mặc định, kế thừa các thuộc tính và phương thức từ Object.prototype nhưng chúng có thể dễ dàng bị ghi đè. Cũng cần lưu ý rằng nguyên mẫu mặc định không phải lúc nào cũng là Object.prototype, chẳng hạn như Chuỗi và Mảng có nguyên mẫu mặc định của riêng chúng - tương ứng là String.prototype và Array.prototype.

Truy cập thành viên đối tượng

Có thể truy cập thành viên đối tượng (thuộc tính hoặc phương thức) bằng ký hiệu:

  1. dấu chấm:

< pre> (objectName.memberName)

javascript

< p>

let school = {

name: "Vivekanada",

vị trí: "Delhi",

thành lập: 1971,

20: 1000,

< code class = "trơn"> displayinfo: function () {

console.log (` $ {school.name} đã được thành lập

trong $ {school.established} tại $ {school.location} `);

}

}

console.log (school.name);

console.log (school.established);

 
 
  1. Đầu ra: < / strong>
  2. Kí hiệu dấu ngoặc:
 objectName ["memberName"] 

javascript

< code class = "trơn"> let school = {

tên: "Trường Vivekanada",

< p class = "line number3 index2 alt2"> vị trí: "Delhi",

thành lập: 1995,

20: 1000,

displayinfo: function () { < / p>

document.write (`$ {school.name} đã được thành lập

trong $ {school.established} tại $ {school.location} `);

< mã số class = "trơn">}

}

console.log (trường [ 'name' ]);

console.log (trường [ '20' ]);

 
 
  1. Đầu ra:

Không giống như ký hiệu dấu chấm, từ khóa ngoặc hoạt động với bất kỳ tổ hợp chuỗi nào, bao gồm, nhưng không giới hạn ở các chuỗi nhiều từ. Ví dụ:

 somePerson.first name // không hợp lệ
    somePerson ["first name"] // hợp lệ 

Không giống như ký hiệu dấu chấm, ký hiệu dấu ngoặc vuông cũng có thể chứa các tên là kết quả của bất kỳ biến biểu thức nào có giá trị được tính tại thời điểm chạy. Ví dụ:

 let key = "first name" somePerson [key] = "Name Họ" 

Không thể thực hiện các thao tác tương tự khi sử dụng ký hiệu dấu chấm.

Lặp lại trên tất cả các khóa của một đối tượng

Để lặp lại trên tất cả các khóa liệt kê hiện có của một đối tượng, chúng tôi có thể sử dụng cấu trúc for… in . Cần lưu ý rằng điều này cho phép chúng ta chỉ truy cập những thuộc tính của một đối tượng có thể liệt kê được (Nhớ lại rằng enumerable là một trong bốn thuộc tính của thuộc tính dữ liệu). Ví dụ, các thuộc tính được kế thừa từ Object.prototype không thể liệt kê được. Tuy nhiên, cũng có thể truy cập các thuộc tính liệt kê từ một nơi nào đó bằng cách sử dụng cấu trúc for… in Ví dụ:

javascript

let person = {

giới tính: "nam"

}

var person1 = Object.create (person);

person1.name = "Adam";

person1.age = 45;

person1.nationality =" Australian ";

cho (để khóa trong person1) {

console.log (key);

}

 
 

Đầu ra:

<… Thuộc tính xóa

Để xóa thuộc tính của một đối tượng, chúng ta có thể sử dụng toán tử xóa. Dưới đây là một ví dụ về cách sử dụng nó:

javascript

let obj1 = {

propfirst: "Name" < / code>

}

console.log (obj1.propfirst);

xóa obj1.propfirst

console.log (obj1.propfirst );

 
  

Đầu ra: Điều quan trọng cần lưu ý là chúng ta không thể xóa các thuộc tính kế thừa hoặc các thuộc tính không thể định cấu hình theo cách này. Ví dụ:

javascript




let obj1 = {

propfirst: "Name"

}

console.log (obj1.propfirst)

let obj2 = Object.create (obj1);

console.log (obj2.propfirst);

console.log ( xóa obj2.propfirst); < / code>

console.log (obj2.propfirst);

 
 

Đầu ra:

Các trình duyệt được hỗ trợ:

  • Google Chrome 1 trở lên
  • Edge 12 trở lên
  • Firefox 1 trở lên
  • Opera 3 trở lên
  • Safari 1 trở lên
  • Internet Explorer 3 trở lên
  • < / ul>

    My Personal Ghi chú


Xem thêm những thông tin liên quan đến chủ đề sử dụng các đối tượng trong javascript

Javascript cơ bản - Bài 4 - Lập trình hướng đối tượng trong javascript

alt

  • Tác giả: Android PolyLabs
  • Ngày đăng: 2020-03-24
  • Đánh giá: 4 ⭐ ( 3076 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Android PolyLabs Live Stream chia sẻ các bài giảng lập trình

Đối tượng trong JavaScript

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 1003 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một đối tượng trong JavaScript là một thực thể có trạng thái và hành vi (các 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, ...

Lập trình hướng đối tượng trong javascript

  • Tác giả: longnv.name.vn
  • Đánh giá: 3 ⭐ ( 8858 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lập trình hướng đối tượng trong javascript hướng dẫn bạn các cách tạo đối tượng trong javavascript và các vấn đề trong OPP.

Đối tượng window trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 4 ⭐ ( 5547 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sau khi đã được tìm hiểu về DOM trong javascript rồi, thì bài này sẽ là bài mở đầu cho series BOM trong javascript.

Đối tượng (Object) trong Javascript?

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 7175 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Như các bạn đã biết, Javascript có 5 kiểu dữ liệu Number, String, Boolean, Undefined và Null và còn 1 kiểu khác nữa đó là Object (kiểu dữ liệu phức hợp). Kiểu Object là kiểu được sử dụng nhiều nhất...

Object Javascript Và Những Điều Bạn Cần Biết

  • Tác giả: codelearn.io
  • Đánh giá: 4 ⭐ ( 5762 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Javascript có 5 kiểu dữ liệu Number, String, Boolean, Undefined, Null và còn 1 kiểu nữa đó là Object. Bài viết này chúng ta cùng tìm hiều về Object nhé!

Đối tượng trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 6024 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng trong JavaScript - Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách nối 3 bảng (hoặc nhiều hơn) trong SQL - tham gia bảng sql 3