IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

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

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

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

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

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

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

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

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

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

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS JavaScript Objects - Các đối tượng trong JavaScript

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

by GokiSoft.Com - 09:40 20/05/2020 2,316 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ượ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 StringNumber, 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.












Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!