Sử Dụng This Trong Javascript

Hôm nay bạn hãy cùng mình đi vào tìm hiểu khái niệm cũng như cách sử dụng phương thức và từ khóa this với object trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Method (Phương Thức) Object trong Javascript

Ở các bài trước bạn chỉ thấy các thuộc tính của object, hôm nay chúng ta sẽ đi vào phương thức(hành động) của object . Các hành động đó được hiển thị thông qua functuon (hàm). Để dễ hiểu thì bạn có thể hình dung một đối tượng (object) trong thực thực tế là một con mèo thì:

• Thuộc tính (property) của nó là màu sắc, cân nặng, tuổi...
• Phương thức (method) của nó là ngủ(), kêu() , chạy()...

Như bạn thấy phương thức là cách miêu tả các hành động của các đối tượng trong thực tế. Để hiểu rõ hơn chúng ta hãy đi vào ví dụ cụ thể sau đây nhé:

 let meo = {
    ten: "Boo",
    mauSac: "Đen"
  };
  meo.keu = function() {
    console.log("Meow Meow");
  };

  meo.keu();

Bạn xem kết quả bên dưới nhé:

• Đầu tiên chúng ta tạo ra một biến object(đối tượng) với tên là meo.
• Tiếp theo ta tạo ra một function(hàm) và gán nó vào trong thuộc tính meo.keu của đối tượng meo.
• Sau đó chúng ta sẽ gọi phương thức của đối tượng meo bằng cách meo.keu() thì lúc này hàm sẽ được thực thi và xuất ra màn hình chúng ta là dòng chữ "Meow Meow".

Ngoài ra chúng ta cũng có cách xác định phương thức cho đối tượng bằng cách khai báo hàm trước rồi sau đó mới thêm vào thuộc tính của object. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 let meo = {
     ten: "Boo",
     mauSac: "Đen"
   };
   function keu() {
     console.log("Meow Meow");
   };
  meo.keu = keu;
  meo.keu();

Bạn xem kết quả bên dưới nhé:

Ngoài ra bạn có thể khái báo method(phương thức) trực tiếp trong object bằng ví dụ sau đây nhé:

 let meo = {
      ten: "Boo",
      mauSac: "Đen",
      keu: function(){
          console.log("Meow Meow");
      }
  };
  meo.keu();//Kết quả: Meow Meow

Bạn cũng có thể khai khai báo method(phương thức) trong object bằng cú pháp ES6 giúp chúng ta rút ngắn đoạn code hơn ở ví dụ trên. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

 let meo = {
      ten: "Boo",
      mauSac: "Đen",
      keu() {
          console.log("Meow Meow");
      }
  };
  meo.keu();//Kết quả: Meow Meow

This Trong Method (Phương Thức)

Thông thường trong thực tế thì bạn sẽ có lúc cần truy cập và sử dụng dữ liệu của đối tượng cho phương thức hiện có thì từ khóa this rất phù hợp cho việc này.

Trong phương thức (method), giá trị this sẽ tham chiếu đến đối tượng mà đang chứa phương thức đó vì vậy bạn có thể truy cập, lấy dữ liệu của đối tượng này. Bây giờ chúng ta thử đi vào tìm hiểu cú pháp của nó nhé:

 this.(Tên Thuộc Tính)

Sau khi nắm sơ lược về cú pháp, chúng ta sẽ đi vào ví dụ thực tế bằng cách xây dựng hành động xin chào với dữ liệu được lấy từ thông tin khách hàng. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 let khachHang = {
      ten: 'An',
      ho: 'Nguyễn',
      xinChao: function () {
         console.log('Xin Chào Khách Hàng ' + this.ho + ' ' + this.ten);
      }
  };
  khachHang.xinChao();

Bạn xem kết quả bên dưới nhé:

Ở đây mình có vài lưu ý nhỏ tý là:

• Chúng ta sẽ tạo một biến object khachHang với hai thông tin là tên, họ của khách hàng và phương thức Xin Chào.
• Trong phương thức Xin Chào chúng ta sẽ sử dụng từ khóa this để tham chiếu đến object của nó là khachHang.
• Lúc này this.ho sẽ bằng với khachHang.ho và this.ten sẽ bằng với khachHang.ten.
• Cuối cùng kết quả bạn sẽ thấy như hình ảnh trên.

Bây giờ ta sẽ đi vào một trường hợp là bạn có hai khách hàng khác nhau, như những gì chúng ta đã học thì sẽ cần hai phương thức xin chào cho mỗi đối tượng khách hàng cụ thể như ví dụ sau đây:

 let khachHang1 = {
       ten: 'An',
       ho: 'Nguyễn',
       xinChao: function () {
          console.log('Xin Chào Khách Hàng ' + this.ho + ' ' + this.ten);
       }
   };
  let khachHang2 = {
       ten: 'Lan',
       ho: 'Đỗ',
       xinChao: function () {
          console.log('Xin Chào Khách Hàng ' + this.ho + ' ' + this.ten);
       }
   };
   khachHang1.xinChao();
   khachHang2.xinChao();

Bạn xem kết quả bên dưới nhé:

Như bạn thấy nếu cứ mỗi lần có khách hàng mới thì ta lại thêm một phương thức xin chào khác cho đối tượng đó thì việc như vậy sẽ rất mất thời gian và công sức. Nên phương thức nào lặp đi lặp lại như vậy thì bạn có thể viết phương thức đó dưới dạng một hàm và sử dụng cho nhiều loại đối tượng bằng từ khóa this. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

  let khachHang1 = {
       ten: 'An',
       ho: 'Nguyễn',
   };
  let khachHang2 = {
       ten: 'Lan',
       ho: 'Đỗ',
   };
   function xinChao(){
     console.log('Xin Chào Khách Hàng ' + this.ho + ' ' + this.ten);
    }
   khachHang1.thongDiep = xinChao;
   khachHang2.thongDiep = xinChao;

   khachHang1.thongDiep();
   khachHang2.thongDiep();

Bạn xem kết quả bên dưới nhé:

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được cách sử dụng phương thức(method) và từ khóa this trong object(đối tượng) trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!