By GokiSoft.Com| 09:40 20/05/2020|
Tài Liệu Javascript

JavaScript Objects - Các đối tượng trong JavaScript

Các đối tượng thực tế, các tính chất, và các phương thức(Real Life Objects, Properties, and Methods)


Trong thực tế, một chiếc xe là một đối tượng.

Một cái xe có các thuộc tính như cân nặng và màu, và các phương thức như chạy và dừng:

Đối tượngThuộc tínhPhương thức

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white
car.start()

car.drive()

car.brake()


Tất cả các xe đều có chung các thuộc tính, nhưng giá trị thuộc tính sẽ khác nhau.

Tất cả các xe đều có chung phương thức, nhưng các phương thức sẽ được hành động ở thời điểm khác nhau.


Các đối tượng JavaScript(JavaScript Objects)


Bạn đã được học rằng các biến JavaScript là các hộp chứa các giá trị dữ liệu.

Đoạn code này gán một giá trị đơn giản (Fiat) cho một biến tên là xe:

var car = "Fiat";
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p id="demo"></p>

<script>
// Create and display a variable:
var car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>

</body>
</html>


Các đối tượng cũng là các biến. Nhưng các đối tượng có thể chứa rất nhiều giá trị.

Đoạn code sau gán nhiều giá trị (Fiat, 500, white) vào một biến tên là car:

var car = {type:"Fiat", model:"500", color:"white"};
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
var 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>


Các giá trị được viết thành một đôi tên:giá trị (tên và giá trị được chia cắt bởi  một dấu hai chấm).

Tip: Các đối tượng JavaScript là các hộp chứa cho các giá trị được đặt tên gọi là các thuộc tính hoặc phương thức.


Định nghĩa đối tượng(Object Definition)


Bạn định nghĩa(và tạo) một đối tượng JavaScript như một đối tượng theo nghĩa đen:

ví dụ

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
var 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 dấu cách và dấu ngắt dòng không quan trọng. Khi định nghĩa đối tượng có thể dãn ra nhiều dòng:

ví dụ

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
var 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>


Thuộc tính đối tượng(Object Properties)


Cặp tên:giá trị trong các đối tượng JavaScript được gọi là các thuộc tính:

Thuộc tínhGiá trị thuộc tính
firstNameJohn
lastNameDoe
age50
eyeColorblue


Truy cập vào các thuộc tính đối tượng


Bạn có thể truy cập vào các thuộc tính các đối tượng bằng hai cách:

objectName.propertyName


Hoặc:

objectName["propertyName"]


ví dụ 1

person.lastName;
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
var 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ụ 2

person["lastName"];
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>


Phương thức của đối tượng(Object Methods)

 

Các đối tượng cũng có thể có các phương thức.

Các phương thức là các hành động có thể được thực hiện trong các đối tượng.

Các phương thức được lưu trữ trong các thuộc tính giống như định nghĩa một hàm.

ThuộcGiá trị thuộc tính
firstNameJohn
lastNameDoe
age50
eyeColorblue
fullNamefunction() {return this.firstName + " " + this.lastName;}


Tip: Một phương thức chính là một hàm lưu trữ như một thuộc tính. 

ví dụ

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};


Từ khóa This


Trong một định nghĩa hàm, this tham chiếu đến "chủ sở hữu" của hàm.

Trong ví dụ trên,  this chính là đối tượng person sở hữu chức năng fullName.

Một cách nói khác,  this.firstName đề cập thuộc tính  firstName của chính đối tượng này.

Đọc nhiều hơn về từ khóa this trong bài Từ khóa this JavaScript(JavaScript this Keyword).


Truy cập các phương thức của đối tượng(Accessing Object Methods)


Bạn có thể truy cập vào các phương thức của đối tượng với những cú pháp sau:

objectName.methodName()


ví dụ

name = person.fullName();
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
// Create an object:
var 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>


Nếu bạn truy cập vào phương thức khi không có dấu ngoặc đơn (), nó sẽ trả về định dạng hàm:

ví dụ

name = person.fullName;
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</p>

<p id="demo"></p>

<script>
// Create an object:
var 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>


Không khai báo các chuỗi, các số, và Booleans như các đối tượng !


Khi một biến JavaScript được khai báo với từ khóa "new", biến đó sẽ được tạo như một đối tượng:

var x = new String();        // Declares x as a String object
var y = new Number();        // Declares y as a Number object
var z = new Boolean();       // Declares z as a Boolean object


Tránh các đối tượng String, Number, và Boolean. Chúng làm code của bạn phức tạp và làm chậm đi tốc độ thực thi.












Tags: