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

by GokiSoft.Com - 09:40 20/05/2020 3,208 Lượt Xem

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ượng	Thuộc tính	Phươ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ính	Giá trị thuộc tính
firstName	John
lastName	Doe
age	50
eyeColor	blue

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ộc	Giá trị thuộc tính
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {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.

Ứng Dụng Học

Theo dõi cập nhật nội dung học trên Youtube & Facebook

Thông Tin Liên Hệ

Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.

Website: https://gozic.vn

SĐT: 096 - 70 25 996

Email: ziczacgroup@gmail.com

Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website

Tags:

javascript khoa hoc javascript khóa học javascript tài liệu javascript

Bình luận

Tôi muốn xem code từ thành viên khác

Tài Liệu Tham Khảo

Ứng Dụng Tiện Ích

MD5 Chuyển Đổi Chữ Hoa - UpperCase JSON Editor Coding Online Database Diagram Fake API Base64

Tài Liệu Học

Khai báo biến & hàm mặc định trong Javascript

Mệnh đề điều kiện

Vòng lặp for, while, do..while

Array & Function & Object

Xử lý sự kiện & thao tác thẻ HTML

Lưu trữ Javascript

Examination & Ôn Tập Tổng Quát