Tại đây, bạn sẽ tìm hiểu các đối tượng, ký tự đối tượng, hàm tạo Object[] và truy cập đối tượng 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. Một đối tượng là một loại dữ liệu có cấu trúc, không nguyên thủy trong JavaScript. Các đối tượ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] sử dụng cú pháp Object Literal/Initializer Syntax 2] sử dụng hàm
var = { key1: value1, key2: value2,...};
4 Constructor với từ khóa new. 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 nhauVí dụ sau minh họa việc tạo đối tượng bằng cả hai cách
Thí dụ. Đối tượng JavaScript
var p1 = { name:"Steve" }; // object literal syntax
var p2 = new Object[]; // Object[] constructor function
p2.name = "Steve"; // property
Ở trên,
var = { key1: value1, key2: value2,...};
5 và var = { key1: value1, key2: value2,...};
6 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 = { key1: value1, key2: value2,...};
7 hoặc var = { key1: value1, key2: value2,...};
8. Đối tượng var = { key1: value1, key2: value2,...};
5 được tạo bằng cách sử dụng cú pháp ký tự đối tượng [một hình thức tạo đối tượng ngắn] với thuộc tính có tên là 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
}
};
0. Đối tượng var = { key1: value1, key2: value2,...};
6 được tạo bằng cách gọi hàm khởi tạo var = { key1: value1, key2: value2,...};
4 với từ khóa 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
}
};
3. 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
}
};
4 đính kèm thuộc tính 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
}
};
0 vào đối tượng var = { key1: value1, key2: value2,...};
6 với giá trị chuỗi 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
}
};
7Tạo đối tượng bằng cú pháp đối tượng bằng chữ
Đối tượng theo nghĩa đen là một dạng ngắn để tạo một đối tượng. Xác định một đối tượng trong dấu ngoặc _________8 bằng phím. các cặp giá trị đượ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ị bằng chữ hoặc hàm
cú pháp
var = { key1: value1, key2: value2,...};
Ví dụ sau minh họa các đối tượng được tạo bằng cú pháp ký tự đối tượng
Thí dụ. Đối tượng Literal Cú pháp
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 bên dưới
Thí dụ. sai cú pháp
var person = { firstName };
var person = { getFullName: };
Tạo các đố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 tạo
var = { key1: value1, key2: value2,...};
4 bằ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 var person = { firstName };
var person = { getFullName: };
0 hoặc sử dụng dấu ngoặc vuông var person = { firstName };
var person = { getFullName: };
1, như minh họa bên dướiThí dụ. Tạo đối tượng bằng Object[] Constructor
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;
};
Thử nó
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ư minh họa bên dưới
Thí dụ. Biến dưới dạng thuộc tính đối tượng
var firstName = "James";
var lastName = "Bond";
var person = { firstName, lastName }
Thử nó
Truy cập các phương thức & thuộc tính đối tượng JavaScript
Các thuộc tính của một đối tượng có thể được truy cập bằng cách sử dụng ký hiệu dấu chấm
var person = { firstName };
var person = { getFullName: };
2 hoặc dấu ngoặc vuông var person = { firstName };
var person = { getFullName: };
3. 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, var person = { firstName };
var person = { getFullName: };
4, như minh họa bên dướiThí dụ. Truy cập đối tượng JS
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
Thử nó
Trong ví dụ trên,
var person = { firstName };
var person = { getFullName: };
5 truy cập thuộc tính var person = { firstName };
var person = { getFullName: };
6 của đối tượng var person = { firstName };
var person = { getFullName: };
7. var person = { firstName };
var person = { getFullName: };
8 là một cách khác để truy cập một thuộc tính. Các phương thức của một đối tượng có thể được gọi bằng toán tử [] e. g. var person = { firstName };
var person = { getFullName: };
9. Công cụ JavaScript sẽ trả về định nghĩa hàm nếu phương thức được truy cập mà không có dấu ngoặc đơnTruy cập các thuộc tính không đượ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ó một thuộc tính cụ thể hay không, thì hãy sử dụng phương thức
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;
};
0 trước khi truy cập chúng, như hình bên dưới