JavaScript Objects - Lập Trình JavaScript

Ở đây bạn sẽ tìm hiểu các đối tượng, các ký tự đối tượng, hàm tạo Object () và đối tượng truy cập trong JavaScript.

Bạn đã học về các kiểu dữ liệu nguyên thủy và có cấu trúc trong JavaScript. Đối tượng là một kiểu dữ liệu có cấu trúc, không nguyên thủy trong JavaScript. Các đối tượng cũng giống như các biến trong JavaScript, điểm khác biệt duy nhất là một đối tượng chứa nhiều giá trị về thuộc tính và phương thức.

Trong JavaScript, một đối tượng có thể được tạo theo hai cách: 1) bằng Object Literal / Initializer Syntax 2) bằng cách sử dụng hàm Object () Constructor với từ khóa mới. Các đối tượng được tạo bằng bất kỳ phương pháp nào trong số này đều giống nhau.

Ví dụ sau minh họa việc tạo các đối tượng bằng cả hai cách.

var p1 = { name:"Steve" }; // object literal syntax
var p2 = new Object(); // Object() constructor function
p2.name = "Steve"; // property

Ở trên, p1 và p2 là tên của các đối tượng. Các đối tượng có thể được khai báo giống như các biến bằng cách sử dụng từ khóa var hoặc let. Đối tượng p1 được tạo bằng cú pháp theo nghĩa đen của đối tượng (một dạng ngắn gọn của việc tạo đối tượng) với một thuộc tính có tên là tên. Đối tượng p2 được tạo bằng cách gọi hàm khởi tạo Object () với từ khóa new. P2.name = "Steve"; đính kèm tên thuộc tính cho đối tượng p2 với giá trị chuỗi "Steve".

Xem thêm: Hình nền cute

Tạo đối tượng bằng Cú pháp văn bản đối tượng

Đối tượng theo nghĩa đen là một hình thức ngắn của việc tạo ra một đối tượng. Xác định một đối tượng trong dấu ngoặc vuông {} với các cặp key: value được phân tách bằng dấu phẩy. Khóa sẽ là tên của thuộc tính và giá trị sẽ là giá trị chữ hoặc hàm

Cấu trúc:

var <object-name> = { key1: value1, key2: value2,...};

Ví dụ sau minh họa các đối tượng được tạo bằng cách sử dụng cú pháp theo nghĩa đen của đối tượng

var emptyObject = {}; // object with no properties or methods
var person = { firstName: "John" }; // object with single property
// object with single method
var message = {
showMessage: function (val) {
alert(val);
}
};
// object with properties & method
var person = {
firstName: "James",
lastName: "Bond",
age: 15,
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
};

Lưu ý rằng toàn bộ cặp khóa-giá trị phải được khai báo. Chỉ khai báo một khóa mà không có giá trị là không hợp lệ, như hình dưới đây.

var person = { firstName };
var person = { getFullName: };

Tạo đối tượng bằng Objects () Constructor

Một cách khác để tạo các đối tượng là sử dụng hàm khởi tạo Object () bằng cách sử dụng từ khóa mới. Các thuộc tính và phương thức có thể được khai báo bằng cách sử dụng ký hiệu dấu chấm .property-name hoặc sử dụng dấu ngoặc vuông ["property-name"], như được hiển thị bên dưới.

var person = new Object();
// Attach properties and methods to person object
person.firstName = "James";
person["lastName"] = "Bond";
person.age = 25;
person.getFullName = function () {
return this.firstName + ' ' + this.lastName;
};

Một đối tượng có thể có các biến làm thuộc tính hoặc có thể có các thuộc tính được tính toán, như được hiển thị bên dưới

var firstName = "James";
var lastName = "Bond";
var person = { firstName, lastName }

Truy cập các thuộc tính và phương thức đối tượng JavaScript

Các thuộc tính của đối tượng có thể được truy cập bằng ký hiệu dấu chấm obj.property-name hoặc dấu ngoặc vuông obj ["property-name"]. Tuy nhiên, phương thức chỉ có thể được gọi bằng cách sử dụng ký hiệu dấu chấm với dấu ngoặc đơn, obj.method-name (), như được hiển thị bên dưới.

var person = {
firstName: "James",
lastName: "Bond",
age: 25,
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
};
person.firstName; // returns James
person.lastName; // returns Bond
person["firstName"];// returns James
person["lastName"];// returns Bond
person.getFullName(); // calling getFullName function

Trong ví dụ trên, person.firstName truy cập thuộc tính firstName của đối tượng person. Người ["firstName"] là một cách khác để truy cập thuộc tính. Các phương thức của một đối tượng có thể được gọi bằng cách sử dụng toán tử (), ví dụ: person.getFullName (). Công cụ JavaScript sẽ trả về định nghĩa hàm nếu phương thức được truy cập không có dấu ngoặc đơn.

Việc truy cập các thuộc tính chưa được khai báo của một đối tượng sẽ trả về không xác định. Nếu bạn không chắc liệu một đối tượng có thuộc tính cụ thể hay không, hãy sử dụng phương thức hasOwnProperty () trước khi truy cập chúng, như được hiển thị bên dưới.

var person = new Object();
person.firstName; // returns undefined
if(person.hasOwnProperty("firstName")){
person.firstName;
}

Các thuộc tính và phương thức sẽ chỉ có sẵn cho một đối tượng mà chúng được khai báo

var p1 = new Object();
p1.firstName = "James";
p1.lastName = "Bond";
var p2 = new Object();
p2.firstName; // undefined
p2.lastName; // undefined
p3 = p1; // assigns object
p3.firstName; // James
p3.lastName; // Bond
p3.firstName = "Sachin"; // assigns new value
p3.lastName = "Tendulkar"; // assigns new value

Enumerate Object's Properties

Sử dụng vòng lặp for in để liệt kê một đối tượng, như hình dưới đây.

var person = new Object();
person.firstName = "James";
person.lastName = "Bond";
for(var prop in person){
alert(prop); // access property name
alert(person[prop]); // access property value
};

Pass by Reference

Đối tượng trong JavaScript chuyển bằng tham chiếu từ hàm này sang hàm khác.

function changeFirstName(per)
{
per.firstName = "Steve";
}
var person = { firstName : "Bill" };
changeFirstName(person)
person.firstName; // returns Steve

Nested Objects

Một đối tượng có thể là một thuộc tính của một đối tượng khác. Nó được gọi là một đối tượng lồng nhau.

var person = {
firstName: "James",
lastName: "Bond",
age: 25,
address: {
id: 1,
country:"UK"
}
};
person.address.country; // returns "UK"

những điểm cần nhớ:

Đối tượng JavaScript là một thực thể độc lập chứa nhiều giá trị về thuộc tính và phương thức.

Thuộc tính đối tượng lưu trữ một giá trị theo nghĩa đen và phương thức đại diện cho chức năng.

Một đối tượng có thể được tạo bằng cách sử dụng chữ đối tượng hoặc cú pháp của hàm tạo đối tượng.

Object literal:

var person = {
firstName: "James",
lastName: "Bond",
age: 25,
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
};

Object constructor:

var person = new Object();
person.firstName = "James";
person["lastName"] = "Bond";
person.age = 25;
person.getFullName = function () {
return this.firstName + ' ' + this.lastName;
};

Các thuộc tính và phương thức của đối tượng có thể được truy cập bằng ký hiệu dấu chấm hoặc dấu ngoặc [].

Một đối tượng được truyền bằng tham chiếu từ hàm này sang hàm khác.

Một đối tượng có thể bao gồm một đối tượng khác làm thuộc tính.

Nguồn: Thủ thuật lập trình