1. Tổng quan.
Trong JavaScript, một đối tượng (object) là một thực thể tổ chức dữ liệu, được sắp xếp dưới dạng cặp tên (key) và giá trị (value). Đối tượng có thể chứa các thuộc tính (properties) và phương thức (methods) để thực hiện các hành động.
Dưới đây là một số khái niệm quan trọng về đối tượng trong JavaScript:
- Thuộc tính (Properties): Thuộc tính của đối tượng là các cặp key-value, trong đó key là tên của thuộc tính và value là giá trị của thuộc tính. Các thuộc tính có thể là các kiểu dữ liệu khác nhau như chuỗi (string), số (number), đối tượng (object) hoặc thậm chí là một hàm (function).
- Phương thức (Methods): Phương thức là các hàm được đặt tên và lưu trữ trong đối tượng. Chúng thường được sử dụng để thực hiện các hành động hoặc tính toán trên dữ liệu của đối tượng.
- Điểm truy cập (Dot Notation và Bracket Notation): Bạn có thể truy cập vào thuộc tính hoặc phương thức của đối tượng bằng cách sử dụng dấu chấm (dot notation) hoặc dấu ngoặc đơn (bracket notation).
- Tạo đối tượng: Bạn có thể tạo đối tượng bằng cách sử dụng từ khóa
newvà gọi một hàm tạo (constructor function) hoặc bạn có thể tạo đối tượng trực tiếp bằng cách sử dụng cặp dấu ngoặc nhọn{}. - Thừa kế và Prototype: JavaScript sử dụng một cơ chế gọi là prototype để thừa kế các thuộc tính và phương thức từ một đối tượng khác. Điều này cho phép bạn xây dựng các đối tượng dựa trên một mô hình đã có.
- Đối tượng có thể thay đổi: Bạn có thể thêm, xóa hoặc sửa đổi thuộc tính và phương thức của đối tượng sau khi nó đã được tạo.
- JSON (JavaScript Object Notation): JSON là một cú pháp để lưu trữ và truyền dữ liệu dưới dạng đối tượng. Nó thường được sử dụng trong giao tiếp với máy chủ và lưu trữ dữ liệu cấu trúc.
2. Ví dụ về đối tượng, thuộc tính và phương thức trong đời thực.
Trong ví dụ này, chúng ta có một đối tượng thực tế là “xe ô tô” (car). Đối tượng này có các thuộc tính (properties) như tên (name), mẫu (model), trọng lượng (weight), và màu sắc (color). Nó cũng có các phương thức (methods) như “start,” “drive,” “brake,” và “stop.”
Các đối tượng xe ô tô khác nhau có thể có các giá trị thuộc tính khác nhau, chẳng hạn xe Fiat có tên “Fiat,” mẫu “500,” trọng lượng “850kg,” và màu sắc “trắng.”
Các phương thức cũng giúp mô phỏng hành động của đối tượng. Ví dụ, khi gọi phương thức “start,” xe ô tô bắt đầu hoạt động. Khi gọi phương thức “drive,” nó di chuyển. Khi gọi phương thức “stop,” nó dừng lại.
Như vậy, việc biểu diễn đối tượng và hoạt động của nó bằng cách sử dụng thuộc tính và phương thức tương tự như trong thế giới thực giúp chúng ta hiểu và quản lý dữ liệu và hành vi của các đối tượng trong lập trình.
| Object | Properties | Methods |
|---|---|---|
 | car.name = Fiat car.model = 500 car.weight = 850kg car.color = white | car.start() car.drive() car.brake() car.stop() |
3. JavaScript Objects.
Trong JavaScript, biến có thể chứa nhiều loại dữ liệu khác nhau, bao gồm giá trị đơn giản như chuỗi, số và boolean. Trong ví dụ trên biến car được gán giá trị chuỗi “Fiat.”
JavaScript cũng cho phép bạn làm việc với các cấu trúc dữ liệu phức tạp hơn, như các đối tượng (objects), có thể chứa nhiều giá trị và hàm. Các đối tượng là một khái niệm cơ bản trong JavaScript và được sử dụng rộng rãi để tổ chức và cấu trúc dữ liệu.
Dưới đây là một ví dụ đơn giản về việc tạo và làm việc với một đối tượng trong JavaScript:
<html>
<body>
<p id="demo"></p>
<script>
// Create and display a variable:
let car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>
</body>
</html>Ví dụ đoạn HTML và JavaScript trên dùng để tạo một trang web cơ bản và hiển thị một giá trị trong một phần tử HTML.
<p id="demo"></p>: Đây là một phần tử HTML<p>(đoạn văn bản đoạn) với thuộc tínhidđược đặt là “demo.” Thuộc tínhidlà một cách để xác định phần tử đặc biệt. Trong trường hợp này, chúng ta đã đặtidlà “demo” để có thể tìm và thay đổi nội dung của phần tử này bằng JavaScript.let car = "Fiat";: Tạo một biến có tên là “car” và gán giá trị “Fiat” cho biến này. Biến “car” được sử dụng để lưu trữ thông tin về chiếc xe hơi.document.getElementById("demo").innerHTML = car;: Truy cập phần tử HTML cóidlà “demo” (phần tử<p>chúng ta đã định nghĩa ở trên) và thay đổi nội dung của phần tử đó thành giá trị của biến “car” (trong trường hợp này là “Fiat”). Phương thức.getElementById("demo")được sử dụng để lấy tham chiếu đến phần tử HTML vớiidlà “demo,” và sau đó,.innerHTMLđược sử dụng để đặt nội dung của phần tử đó bằng giá trị của biến “car.”
Khi bạn chạy đoạn code này trong một trình duyệt web, trang web sẽ hiển thị từ “Fiat” trong một đoạn văn bản. Điều này là do chúng ta đã sử dụng JavaScript để thay đổi nội dung của phần tử HTML với id là “demo” thành giá trị của biến “car.”
Fiat4. Object Definition.
Trong JavaScript, bạn cũng có thể sử dụng các đối tượng (objects) để chứa nhiều giá trị khác nhau. Đoạn code sau gán nhiều giá trị (Fiat, 500, white) cho một biến có tên là car:
<html>
<body>
<p id="demo"></p>
<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>
</body>
</html>Kết quả.
The car type is FiatCác giá trị trong đối tượng được viết dưới dạng các cặp tên:giá trị (name:value), trong đó tên và giá trị được ngăn cách bằng dấu hai chấm (colon).
Việc sử dụng từ khóa const để khai báo đối tượng là một thực hành phổ biến, giúp đảm bảo rằng bạn không thể gán lại đối tượng cho một giá trị khác. Việc này giữ cho đối tượng được bảo toàn và không thay đổi trong suốt vòng đời của nó.
Bạn có thể định nghĩa và tạo ra một đối tượng JavaScript bằng cách sử dụng object literal (ký hiệu đối tượng).
Ví dụ sau đây là cách tạo một đối tượng:
<html>
<body>
<p id="demo"></p>
<script>
// Create an object:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>Kết quả.
John is 50 years old.Khi tạo đối tượng này, bạn có thể xác định các thuộc tính của đối tượng, ví dụ như firstName (tên), lastName (họ), age (tuổi), và eyeColor (màu mắt). Mỗi thuộc tính được đặt tên và gán giá trị tương ứng.
Việc định nghĩa đối tượng này có thể được thực hiện trên một dòng hoặc trải dài qua nhiều dòng, tùy thuộc vào cách bạn muốn định dạng code của mình.
<html>
<body>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>Các cặp tên, giá trị trong đối tượng JavaScript được gọi là thuộc tính. Ví dụ, trong đối tượng đã cho ở trên chúng ta có các thuộc tính như sau:
firstName(tên)lastName(họ)age(tuổi)eyeColor(màu mắt)
Và đây là kết quả.
John is 50 years old.5. Accessing Object Properties.
Để truy cập giá trị của các thuộc tính này trong đối tượng, chúng ta có thể sử dụng hai cách:
Sử dụng cú pháp objectName.propertyName.
objectName.propertyNameHoặc objectName["propertyName"].
objectName["propertyName"]Điều này cho phép bạn truy cập giá trị của thuộc tính bằng cách sử dụng tên của đối tượng sau đó là dấu chấm và tên của thuộc tính.
<html>
<body>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>Ví dụ person.lastName sẽ trả về giá trị “Doe” (họ là Doe).
John DoeSử dụng cú pháp objectName["propertyName"]: Điều này cho phép bạn truy cập giá trị của thuộc tính bằng cách sử dụng tên của đối tượng sau đó là dấu ngoặc vuông và chuỗi chứa tên của thuộc tính.
<html>
<body>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>Ví dụ: person["lastName"] cũng sẽ trả về giá trị “Doe” (họ là Doe).
John DoeCả hai cách này đều cho kết quả tương tự và bạn có thể chọn cách nào phù hợp với cách bạn muốn sử dụng.
Trong đối tượng JavaScript, chúng ta có thể định nghĩa những phương thức, đó là các hành động có thể thực hiện trên đối tượng đó. Các phương thức này được lưu trữ trong các thuộc tính của đối tượng dưới dạng các định nghĩa hàm.
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};Ví dụ, trong đoạn code trên, chúng ta có một đối tượng person có một số thuộc tính như firstName, lastName và id. Ngoài ra, đối tượng này cũng có một thuộc tính fullName nhưng khác với các thuộc tính trước đó, fullName là một hàm. Điều này nghĩa là fullName không chỉ là một giá trị đơn giản mà là một hàm có thể thực hiện một tác vụ cụ thể.
Hàm fullName trong đối tượng person có nhiệm vụ trả về chuỗi kết hợp tên firstName và họ lastName. Điều này được thực hiện thông qua cú pháp return this.firstName + " " + this.lastName;.
Trong trường hợp này this đề cập đến đối tượng person chứa hàm. Vì vậy, this.firstName tương đương với thuộc tính firstName của đối tượng person và this.lastName tương đương với thuộc tính lastName của cùng đối tượng.
Khi bạn gọi person.fullName() nó sẽ thực thi hàm fullName trong đối tượng person và trả về giá trị là tên đầy đủ “John Doe.”
6. Object Methods.
Trong JavaScript, từ khóa this đề cập đến một đối tượng cụ thể. Đối tượng mà this đề cập đến phụ thuộc vào cách this được sử dụng hoặc gọi.
- Trong một phương thức của đối tượng,
thisđề cập đến đối tượng đó. - Khi
thisđược sử dụng một cách độc lập, nó đề cập đến đối tượng toàn cục (global object). - Trong một hàm,
thisđề cập đến đối tượng toàn cục (global object). - Trong một hàm và ở chế độ nghiêm ngặt (strict mode),
thislà undefined. - Trong một sự kiện,
thisđề cập đến phần tử nhận sự kiện. - Các phương thức như
call(),apply(), vàbind()có thể đặt lạithisđể đề cập đến bất kỳ đối tượng nào.
Từ khóa this không phải là một biến và bạn không thể thay đổi giá trị của this. this chỉ đơn giản là một cách để tham chiếu đến đối tượng liên quan đến trường hợp sử dụng của nó.
Bạn có thể truy cập một phương thức của đối tượng bằng cú pháp sau:
objectName.methodName()Ví dụ:
<html>
<body>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>Kết quả.
John DoeNếu bạn truy cập một phương thức mà không có dấu ngoặc () thì nó sẽ trả về định nghĩa của hàm đó:
<html>
<body>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>Trong trường hợp này, name sẽ chứa định nghĩa của phương thức fullName, nhưng không phải giá trị trả về từ phương thức đó. Để thực sự gọi và nhận giá trị từ phương thức, bạn cần sử dụng dấu ngoặc (). Vì vậy kết quả của bạn sẽ như dưới.
function() { return this.firstName + " " + this.lastName; }Trong JavaScript, khi bạn khai báo một biến với từ khoá “new”, biến đó sẽ được tạo ra dưới dạng một đối tượng:
x = new String(); // Khai báo biến x là một đối tượng String
y = new Number(); // Khai báo biến y là một đối tượng Number
z = new Boolean(); // Khai báo biến z là một đối tượng BooleanTuy nhiên, không nên sử dụng các đối tượng String, Number, và Boolean như vậy. Chúng làm phức tạp code của bạn và làm chậm tốc độ thực thi. Thay vào đó, bạn nên sử dụng kiểu dữ liệu nguyên thủy (primitive data types) cho chuỗi (string), số (number) và giá trị boolean để viết code JavaScript hiệu quả hơn.
