Trong bài số 7 các bạn đã được tìm hiểu về các loại dữ liệu như: Number (số), String (chuỗi), Boolean, Undefined, Null… Trong bài này chúng ta sẽ cùng tìm hiểu về kiểu Đối tượng – Object (kiểu dữ liệu có cấu trúc) trong Javascript. Kiểu Object là kiểu được sử dụng nhiều nhất vì tính linh hoạt cực kỳ mạnh mẽ của nó trong việc xử lý dữ liệu. Chúng ta hãy cùng nhau tìm hiểu chi tiết hơn về đối tượng trong Javascript nhé.

Đối tượng, thuộc tính và phương thức trong đời thực

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

Một chiếc ô tô có các thuộc tính như trọng lượng và màu sắc, và các phương thức như khởi động (start) và dừng lại (stop):

ĐỐI TƯỢNGTHUỘC TÍNHPHƯƠNG THỨC

car.name = Porsche Panamera

car.model = 500

car.weight = 1850kg

car.color = white

car.start ()

car.drive ()

car.brake ()

car.stop ()

Tất cả các ô tô đều có các thuộc tính giống nhau , nhưng các giá trị của thuộc tính sẽ khác nhau giữa các ô tô.

Tất cả các xe đều có các phương thức giống nhau , nhưng các phương thức này được thực hiện ở những thời điểm khác nhau .

Đối tượng trong Javascript là gì

Khái niệm đối tượng – objects trong JavaScript có thể được hiểu như những đối tượng thực tế trong đời thực.

Như chúng ta đã biết trong Javascript thì biến là một vùng nhớ chứa giá trị dữ liệu

Trong ví dụ dưới đây chúng ta dùng biến car_name và chỉ gán được 1 giá trị đơn giản là tên của chiếc xe ô tô

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<script>
// Create and display a variable:
let car_name = "Porsche Panamera";
document.write(car_name);
</script>
</body>
</html>

Trong Javascript đối tượng (object) cũng là một biến. Nhưng đối tượng có thể chứa nhiều giá trị.

Ví dụ dưới đây cho phép chúng ta gán nhiều giá trị vào một biến car

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<script>
// tạo mới một đối tượng:
const car = {type:"Porsche", model:"Panamera", color:"Orange"};
// Hiển thị các giá trị của đối tượng:
document.write("Tên xe: "+car.type + " "+car.model)
document.write("<br> Màu xe: "+car.color);
</script>
</body>
</html>

Các giá trị được viết dưới dạng cặp tên thuộc tính: giá trị (tên thuộc tính và giá trị cách nhau bởi dấu hai chấm).

Khai báo đối tượng trong Javascript

Chúng ta có 3 cách để khai báo một đối tượng trong Javascript

Cách 1: Sử dụng từ khóa new Object()

// Khởi tạo đối tượng
var Car = new Object();
// Thêm thuộc tính cho đối tượng
Car.type = 'Porsche';
Car.model = 'Panamera';
Car.color = 'white';

Hãy thử ví dụ dưới đây:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<script>
// Khởi tạo mới một đối tượng:
var car = new Object()
// Thêm thuộc tính cho đối tượng
car.type="Porsche";
car.model="Panamera";
car.color="white";
document.write(car.type); //hiển thị giá trị thuộc tính của đối tượng
</script>
</body>
</html>

Cách 2: Sử dụng cặp dấu {} và thêm thuộc tính ngay lúc khai báo

Đây là cách khai báo mà chúng ta đã làm quen ở phần trên.

// Khởi tạo đối tượng
var car = {
    type : "Porsche",
    model : "Panamera",
    color : "white"
};

Cách 3: Sử dụng cặp dấu {} và thêm thuộc tính sau đó

// Khởi tạo đối tượng
var Car = {};
// Thêm thuộc tính cho đối tượng
Car.type = 'Porsche';
Car.model = 'Panamera';
Car.color = 'white';

Hãy thử ví dụ sau đây:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<script>
// Khởi tạo mới một đối tượng:
var car = {};
// Thêm thuộc tính cho đối tượng
car.type="Porsche";
car.model="Panamera";
car.color="white";
document.write(car.model); //hiển thị giá trị thuộc tính của đối tượng
</script>
</body>
</html>

Trong ba cách khai báo đối tượng ở trên tùy thuộc vào các yêu cầu, tính chất của đối tượng mà chúng ta có thể sử dụng cách khai báo 1 cách phù hợp. Tuy nhiên Wecode khuyến khích các bạn nên sử dụng cách thứ hai bởi vì nó mạch lạc và dễ quản lý đối tượng trong quá trình làm việc hơn.

Thuộc tính của đối tượng

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

Thuộc tínhGiá trị thuộc tính
typePorsche
modelPanamera
colorwhite

Truy cập thuộc tính đối tượng

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

objectName.propertyName

hoặc

objectName["propertyName"]

Hãy thử ví dụ sau:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<script>
// Khởi tạo mới một đối tượng:
var car = {};
// Thêm thuộc tính cho đối tượng
car.type="Porsche";
car.model="Panamera";
car.color="white";
document.write(car.type); //truy cập thuộc tính type
document.write(car["model"]); // truy cập thuộc tính model
</script>
</body>
</html>

Phương thức của đối tượng

Phương thức là những hành động (có thể hiểu là hàm) của đối tượng. Ví dụ trong đối tượng car thì mình cần hai phương thức là: addCar() deleteCar()

Lúc này ta sẽ có ba cách khai báo tương tự như cách khai báo thuộc tính.

Cách 1: Sử dụng từ khóa new Object()

// Khởi tạo đối tượng
var Car = new Object();

// Thêm phương thức cho đối tượng
Car.addCar = function(){
  document.write("This function add car");
};

Car.deleteCar = function(){
    document.write("This function delete car");
};

Cách 2: Sử dụng từ khóa {} và thêm phương thức ngay lúc khai báo

// Khởi tạo
var Car = {
    addCar : function(){
        document.write("Đây là phương thức thêm mới một chiếc xe");
    },
    delCar : function(){
        document.write("Đây là phương thức xóa bỏ một chiếc xe");
    }
};

Cách 3: Sử dụng từ khóa {} và thêm phương thức sau đó

// Khởi tạo đối tượng
var Car = {};
// Thêm phương thức cho đối tượng
Car.addCar = function(){
   document.write("Đây là phương thức thêm mới một chiếc xe");
};
Car.delCar = function(){
    document.write("Đây là phương thức xóa bỏ một chiếc xe");
};

Cách gọi phương thức của đối tượng

Cách gọi các phương thức cũng tương đối đơn giản. Vì bản thân phương thức chính là các hàm thực hiện 1 nhiệm vụ nào đó của đối tượng nên cách gọi phương thức tương tự các gọi hàm.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<script>
var Car = {
    addCar : function(){
        document.write("Đây là phương thức thêm mới một chiếc xe");
    },
    delCar : function(){
        document.write("Đây là phương thức xóa bỏ đi một chiếc xe");
    }
};
Car.addCar(); //gọi phương thức addCar
document.write("<br>");
Car.delCar(); //gọi phương thức delCar
</script>
</body>
</html>

Hãy thử thêm một ví dụ nữa:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Bạn có thể gọi phương thức như gọi một hàm trong Javascript.</p>
<script>
var person = {
  firstName: "Nam",
  lastName : "Nguyen",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  } //phương thức fullName ghép họ và tên
};
document.write("Full Name: "+person.fullName()); //gọi phương thức fullName
</script>
</body>
</html>

this là gì?

Ở ví dụ trên chúng ta thấy có đối tượng this.firstName và this.lastName vậy this ở đây là gì và được sử dụng như thế nào? Trong javascript, chúng ta dùng từ khóa this để đại diện cho một đối tượng (Object)

Từ khóa this đề cập đến các đối tượng khác nhau tùy thuộc vào cách nó được sử dụng:

  • Trong một phương thức của đối tượng, this tham chiếu đến đối tượng .
  • Khi nó đứng một mình, this đề cập đến đối tượng toàn cục .
  • Trong một hàm, this tham chiếu đến đối tượng toàn cục .
  • Trong một hàm, ở chế độ nghiêm ngặt, this sẽ là 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() bind() có thể tham chiếu this đến bất kỳ đối tượng nào.

this không phải là một biến, nó là một từ khóa và bạn không thể thay đổi giá trị của this

Trong một định nghĩa hàm, this đề cập đến “chủ sở hữu” của hàm.

Trong ví dụ trên, this là đối tượng person “sở hữu” hàm fullName()

Nói cách khác, this.firstName có nghĩa là firstName là thuộc tính của đối tượng this .