#01. Javascript hướng đối tượng – Khởi tạo Đối Tượng (Object Initializers) – Phần 1

# Before we start

Bây giờ, chúng ta bắt đầu tìm hiểu về lập trình hướng đối tượng và cụ thể hơn là trong JAVASCRIPT. Nếu như bạn muốn biết vì sao chúng ta phải theo mẫu hình hướng đối tượng thì hãy đọc bài viết trước đó về  JAVASCRIPT (JS) HƯỚNG ĐỐI TƯỢNG – DIFFERENT MINDSETS.

Nếu bạn là người hoàn toàn hoặc biết rất ít về lập trình hướng đối tượng thì hãy theo dõi chương này thật kĩ nhé.

Nếu bạn là người đã biết qua về lập trình hướng đối tượng rồi hoặc đã áp dụng nó trong những ngôn ngữ khác như C# hay Java thì hãy tạm thời quên nó đi. Bởi vì, hướng đối tượng trong Javascript có đôi phần khác hơn một chút và sẽ đơn giản hơn những ngôn ngữ mà bạn đã từng học.

Trong bài viết này tôi sử dụng những công cụ như sau để viết và run code:

Click vào để xem

NodeJS (Download): Đây là một phần mềm, mã nguồn mở hỗ trợ cho việc phát triển các ứng dụng đa nền tảng và dựa trên ngôn ngữ giao tiếp là Javascript (Javascript V8 Engine). Tôi sử dụng NodeJS cho chuỗi series này là bởi vì 2 lí do:

  • Mọi kĩ thuât, công nghệ mới về JS luôn được cập nhật tại NodeJS
  • Rất nhiều Framework hiện đang được build trên nền tảng là NodeJS

Visual Studio Code (Download): IDE (Integrated Development Environment) tool hỗ trợ viết code của MS phổ biến hiện nay.

Nào, chúng ta bắt đầu chủ đề hôm nay nhé.

# Cái nhìn thoáng qua về lập trình hướng đối tượng

Tôi vô thẳng chủ đề và không lòng vòng nữa!!! Trong lập trình hướng đối tượng thì ĐỐI TƯỢNG là thứ quan trọng nhất.

Từ bây giờ tôi muốn thống nhất là sẽ dùng từ Object theo cho từ đối tượng trong xuyên suốt series này, vì 1 lí do rất đơn giản, khi các bạn đọc các tài liệu tiếng anh thì người ta cũng chỉ ghi Object chứ chẳng ai ghi là đối tượng cả 

Object luôn tồn tại trong cuộc sống hằng ngày của chúng ta. Các bạn có thể nhìn vào những ví dụ bên dưới để hình dung đối tượng là gì.

Xe hơi Vinfast, xe wave RSX, con chó vàng và lập trình viên có phải là những thực thể mà các bạn thấy hằng ngày không? YES, đó chính là OBJECT đấy. Tuy nhiên, đó là nhìn bằng mắt thường thôi, còn trong lĩnh vực lập trình thì chúng ta phải có cách nào đó xác định rõ ràng phải không nào. OK, bây giờ chúng ta đi vào trọng tâm đây. Trong lập trình, thì 1 object sẽ được xác định bằng 2 thành phần: 

  1. Properties (Các thuộc tính)
  2. Methods (Các phương thức – nó chính là các hành động)

Các bạn hãy đọc những tab bên dưới để thấy rõ đc

Xe hơi VinfastXe Wave RSXCon chó vàngLập trình viên
javascript-huong-doi-tuong-part-1
Xe hơi Vinfast
javascript-huong-doi-tuong-part-1
Xe Wave RSX
javascript-huong-doi-tuong-part-1
Con chó vàng
Lập trình viên

# Objects trong Javascript

Hầu hết mọi thứ được định nghĩa sẵn trong Javascript đều là Object. Chúng ta cùng xem ví dụ bên dưới đây.

Object “Array” trong javascript

Tôi khởi tạo một mảng (Array) “names” với 3 phần tử kiểu string là “Nguyen“, “Phu“, “Hao” và access vào mảng names đó. Lúc này, Browser trả về một đống những Properties và Method => ARRAY là một Object.

Chúng ta tiếp tục thử một ví dụ khác. Hầu hết các bạn đều biết đến “window” trong Javascript phải không? YEP, nó chính là Object luôn đấy. Nếu không tin thì chúng ta thử ra ngoài màn hình console truy xuất vào “window” thử xem nào. Và chắc chắn kiểu gì các bạn cũng sẽ thấy được kết quả như bên dưới.

Object “window” trong javascript

Vậy thì câu hỏi đặt ra là: “Làm sao chúng ta có thể tạo ra một object giống như bên trên?“. Để làm đc như thế, đừng bỏ qua những phần bên dưới nhé.

# Tạo Object trong Javascript

Có rất nhiều cách để khởi tạo 1 object trong Javascript. Chúng ta có thể sử dụng code theo cú pháp của ES5 hoặc ES6 tùy thích nhưng về cơ bản thì chúng ta có 3 cách sau: 

  1. Tạo object từ Object Literals.
  2. Tạo object bằng new Object() (Object constructor).
  3. Tạo object từ mẫu định nghĩa sẵn.

## Tạo object từ Object Literals

Object Literals là gì? Vâng, chúng ta chỉ cần hiểu đơn giản, chúng là 1 object được viết theo cú pháp như sau:

var tenObject = {
    tenProperty: value,
    tenMethod: function(){
        //viết gì cũng được
    }
};

Thôi, làm luôn 1 cái ví dụ cho dễ hình dung nhé. giờ mình lấy object “Lập trình viên” bên trên và tạo liền tay luôn. Trước khi viết code thì chúng ta review lại những Properties Methods của object “Lập trình viên” một chút.

Đây là code chúng ta sẽ viết ra

var objLapTrinhVien = {
  //CÁC PROPERTIES
  tenDayDu: 'Nguyễn Phú Hảo',
  tenThuongGoi: 'Hảo',
  chieuCao: '1m7',
  canNang: '71kg',
  mauToc: 'Đen',
  ngoaiNgu: ['Tiếng việt', 'English'],
  soThich: ['Thể thao', 'Đọc sách', 'Lập trình', 'Viết blog'],
  email: 'nguyenphuhao.it@gmail.com',
  website: 'nguyenphuhao.com',

  //CÁC METHODS
  gioiThieuBanThan: function() {
    var msg = `--Xin chào tất cả các bạn--
Tôi tên là ${this.tenDayDu}. Chúng ta cùng nhau làm quen nhé!
${this.tenThuongGoi} rất vui tính và hòa đồng.
Các bạn có thể hình dung ra được dáng người của ${this.tenThuongGoi} thông qua chiều cao và cân nặng: ${this.chieuCao} , ${this.canNang}
${this.tenThuongGoi} rất thích những hoạt động sau: ${this.soThich}. Ngoài ra, ${this.tenThuongGoi} còn thích học ${this.ngoaiNgu[1]}
Chúng ta có thể thảo luận với nhau để trao đổi kiến thức nên các bạn đừng ngại mà liên lạc cho ${this.tenThuongGoi} thông qua:
- Email: ${this.email}
- website: ${this.website}
Rất vui được làm quen cùng tất cả các bạn ^^! ` document.getElementById('hello').innerHTML = msg; }, lapTrinh: function() { //CHƯA BIẾT VIẾT GÌ HẾT NÊN TÔI ĐỂ TRỐNG. }, vietBlog: function() { return ''; }, choiBongBan: function() { //HIỆN TẠI ĐANG ĂN TẾT NÊN KHÔNG CÓ BẠN CHƠI. return null; } };
Note:
Trong ví dụ trên có từ khóa this. Các bạn tạm thời đừng quan tâm tới nó, chúng ta sẽ thảo luận trong bài viết sau.

Xong, chúng ta đã tạo thành công object “Lập trình viên”. Bây giờ chúng ta gọi thử 1 method để xem kết quả xuất ra thế nào nhé. Tôi sẽ gọi gioiThieuBanThan method

Cú pháp như sau: objLapTrinhVien.gioiThieuBanThan();

Đây là code hoàn chỉnh & kết quả:

Xong, chúng ta đã biết cách tạo 1 object theo Object Literials rồi. Thật đơn giản phải không nào !

Next, chúng ta tiếp tục nhé.

## Object constructor

Đây là một cách khác để tạo 1 object. Cách này cũng tương tự với cách tạo ojbject thông qua Object Literals. Cách này gọi là thông qua Object constructor,

Cú pháp như sau:

var obj = new Object();

Nếu xét về bản chất thì cách tạo object từ Object construtor cũng giống hệt Object Literals. Bây giờ chúng ta thử apply ví dụ tạo object Lập trình viên vào cách này nhé. 

Code sẽ như sau:

var objLapTrinhVien = new Object();
//CÁC PROPERTIES
objLapTrinhVien.tenDayDu = 'Nguyễn Phú Hảo';
objLapTrinhVien.tenThuongGoi =  'Hảo';
objLapTrinhVien.chieuCao =  '1m7';
objLapTrinhVien.canNang =  '71kg';
objLapTrinhVien.mauToc =  'Đen';
objLapTrinhVien.ngoaiNgu =  ['Tiếng việt', 'English'];
objLapTrinhVien.soThich =  ['Thể thao', 'Đọc sách', 'Lập trình', 'Viết blog'];
objLapTrinhVien.email =  'nguyenphuhao.it@gmail.com';
objLapTrinhVien.website =  'nguyenphuhao.com';

//CÁC METHODS
objLapTrinhVien.gioiThieuBanThan =  function() {
    var msg = `--Xin chào tất cả các bạn (NEW OBJECT())--
Tôi tên là ${this.tenDayDu}. Chúng ta cùng nhau làm quen nhé!
${this.tenThuongGoi} rất vui tính và hòa đồng.
Các bạn có thể hình dung ra được dáng người của ${this.tenThuongGoi} thông qua chiều cao và cân nặng: ${this.chieuCao} , ${this.canNang}
${this.tenThuongGoi} rất thích những hoạt động sau: ${this.soThich}. Ngoài ra, ${this.tenThuongGoi} còn thích học ${this.ngoaiNgu[1]}
Chúng ta có thể thảo luận với nhau để trao đổi kiến thức nên các bạn đừng ngại mà liên lạc cho ${this.tenThuongGoi} thông qua:
- Email: ${this.email}
- website: ${this.website}
Rất vui được làm quen cùng tất cả các bạn ^^! ` document.getElementById('hello').innerHTML = msg; }; objLapTrinhVien.lapTrinh = function() { //CHƯA BIẾT VIẾT GÌ HẾT NÊN TÔI ĐỂ TRỐNG. }; objLapTrinhVien.vietBlog = function() { return ''; }; objLapTrinhVien.choiBongBan = function() { //HIỆN TẠI ĐANG ĂN TẾT NÊN KHÔNG CÓ BẠN CHƠI. return null; }; //GỌI METHOD objLapTrinhVien.gioiThieuBanThan();

Điểm khác biệt duy nhất ở cú pháp này so với Object Literals là ở cái toán tử = và cách set value cho property. Thay vì, chúng ta set trực tiếp ngay lúc khởi tạo object như ở Object Literals, thì ở Object construtor chúng ta phải tạo empty object xong -> update lại ojbject. Nói tóm lại, kết quả vẫn giống nhau, chỉ khác về hình thức và cú pháp thôi.

Tôi không ưa cách này lắm, làm mất thời gian dễ sợ Haizzzz.
😕……Hmmmm, 😳ấy khoan đã! Nếu như cái cách này củ chuối như thế thì bạn giới thiệu trong bài viết này làm chi vậy?🤔🤔🤔

Nếu như các bạn cũng có cùng câu hỏi đấy thì tôi xin chúc mừng các bạn đã nắm rõ được vấn đề rồi đấy. Xét về nguyên tắc, làm việc gì cũng phải có lí do. Tôi giới thiệu về Object construtor với 2 lí do sau:

  1. Show cho các bạn thấy, Javascript có tồn tại một object mang tên là Object. Sau này, chúng ta sẽ sử dụng những method bên trong nó để làm nhiều việc lắm. Tôi sẽ cho ví dụ sau nhé.
  2. Đây là tiền đề để tôi giới thiệu tiếp cách tạo object từ mẫu định sẵn ở tiêu đề bên dưới.

Các bạn cảm thấy ổn chưa nào? Nếu ổn rồi thì, OK, let’s move.

## Tạo object từ mẫu định sẵn (User defined object)

Bây giờ, chúng ta làm phức tạp vấn đề lên một xíu nhé!

Như các bạn thấy ở ví dụ về việc tạo object “Lập trình viên” từ Object Literals hay Object constructor trên kia, việc tạo object rất nhanh gọn phải không nào? OK, bây giờ, vấn đề đặt ra là, nếu có tầm 100 objects lập trình viên với cùng số lượng properties như trên thì các bạn giải quyết thế nào. Đối với tôi, tôi sẽ có 2 cách:

  • Tôi sẽ kiên nhẫn copy hết 100 objects giống nhau và sửa tên lại. Nếu làm theo cách này thì tôi nhận thấy có 1 vấn đề phát sinh là SỐ LƯỢNG DÒNG CODE NHIỀU QUÁ, FILE TRỞ NÊN NẶNG NỀ và KHÓ BẢO TRÌ CODE. ===> Thôi, chia tay từ đây. Đôi khi kiên nhẫn không đem lại kết quả tốt.
  • Cách khác. Đây là cách mà tôi sẽ giới thiệu cho các bạn – tạo object từ mẫu định sẵn

Chúng ta cùng xem qua cú pháp để tạo object từ mẫu định sẵn nhé. Tôi sẽ lấy ví dụ nhỏ về khởi tạo 1 object User có properties là name và age cho các bạn dễ hình dung về cú pháp hơn, rồi sau đó chúng ta sẽ quay trở lại với ví dụ về Lập trình viên

Các bạn có thấy quen quen với cú pháp bên trên không? Vâng, cú pháp rất giống C# và Java, chỉ có xíu khác biết ở chỗ định nghĩa object thôi. Với kiểu định nghĩa này thì chúng ta nhận thấy:

  1. Object luôn có một template nhất định.
  2. Tận dụng được khả năng REUSABLE
  3. Dễ dàng bảo trì và quản lí code.

Và đây là full code cho ví dụ về Lập Trình Viên

# Từ khóa “this“?

Nếu như ai đã từng biết và làm việc trên những ngôn ngữ lập trình cấp cao như  C# hay Java thì sẽ biết rõ từ khóa this này. Nhưng, đối với những bạn mới học qua lập trình hướng đối tượng sẽ không biết hoặc biết ít về từ khóa this

Theo định nghĩa trong ngôn ngữ lập trình thì từ khóa this là một con trỏ, tham chiếu đến một object nào đó. WTH 😲😲😲? Con trỏ, tham chiếu là cái quái gì thế 😣😣😣 ? …………………..Các bạn cứ từ từ nhé, đọc qua cái ví dụ bên dưới thì các bạn sẽ rõ thôi.

Nguyễn Phú Hảo là một lập trình viên. Anh ấy cao 1m71, nặng 71kg và có mái tóc đen. Ngoài ra, anh ấy còn chơi bóng bàn giỏi.

Trong đoạn văn miêu tả bên trên, this chính là Anh ấy. Thay vì lặp đi lặp lại danh từ riêng Nguyễn Phú Hảo thì việc dùng đại từ Anh ấy sẽ làm cho câu văn hay hơn, mượt mà hơn, và nếu trường hợp ông thầy bảo bạn không tả anh Nguyễn Phú Hảo nữa mà tả qua anh Nguyễn Văn A nào đó thì chúng ta chỉ cần thay đúng 1 chỗ duy nhất là Nguyễn Phú Hảo —-> Nguyễn Văn A.

Bây giờ, chúng ta nhìn code cho hình dung rõ ràng hơn nhé.

Tôi có một object LapTrinhVien với những thông tin như sau:

function LapTrinhVien(tenDayDu, chieuCao, canNang, mauToc) {
    this.tenDayDu = tenDayDu; 
    this.chieuCao = chieuCao;
    this.canNang = canNang;
    this.mauToc = mauToc;
    this.choiBongBan = function(){
    	console.log('Chơi bóng bàn giỏi')
    }
}

Nếu dựa vào đoạn văn bên trên để diễn tả lại thì code sẽ như sau:

function LapTrinhVien(tenDayDu, chieuCao, canNang, mauToc) {
    this.tenDayDu = "Nguyễn Phú Hảo"; 
    this.chieuCao = "1m71"; // Anh ấy (this) cao 1m71 (chieuCao)
    this.canNang = "71kg"; // Anh ấy (this) nặng 71kg (canNang)
    this.mauToc = "Đen"; // Anh ấy (this) có mái tóc đen (mauToc)
    // Anh ấy (this) chơi bóng bàn (method choiBongBan) ---> xuất ra câu "chơi bóng bàn giỏi"
    this.choiBongBan = function(){
    	console.log('Chơi bóng bàn giỏi');
    }
}

this đơn giản như thế đấy các bạn ạ!

# Kết Luận

Khi nào nên sử dụng Object Literals, Object constructor và User defined object?

Câu trả lời chỉ là tương đối. Bởi vì, nó thiên về thiết kế hơn là về kĩ thuật. Mỗi người sẽ có cái nhìn khác nhau ở một ngữ cảnh khác nhau. Xét về tổng thể, đây là cái nhìn của tôi.

  • Object Literals, Object Constructor: Khi object này chỉ dùng với mục đích làm object tạm hoặc dùng làm parameter. Tôi hay gọi là dynamic object (object động).
  • User defined object: Khi object này đóng vai trò là Model và ít bị thay đổi cấu trúc trong quá trình phát triển – dùng làm chuẩn để GỬI hoặc NHẬN data.

Chúng ta sẽ đào sâu hơn những vấn đề này vào những bài viết tiếp theo. Bài viết này cũng đã khá dài rồi và tôi xin hẹn gặp lại các bạn trong bài viết kế tiếp cũng trong chuối series Javascript – The New World;

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *