Hướng đối tượng trong javaScript

Không giống như hầu hết các ngôn ngữ hướng đối tượng khác, trên thực tế javaScript không thực sự có khái niệm lớp, trong hầu hết các ngôn ngữ lập trình bạn phải xây dựng lớp sau đó mới khai báo đối tượng để sử dụng. Trong javaScript đối tượng được tạo trực tiếp và có thể tạo bằng nhiều cách , đối tượng cũng có thể kế thừa từ đối tượng khác. Để tạo đối tượng bạn có hai cách cơ bản để tạo đối tượng như sau:

// Tạo đối tượng thông qua cú pháp new Object()
var obj = new Object();
// Tạo một số thuộc tính cho đối tượng
obj.val = 5;
obj.click = function () {
  alert("hello");
};

// Sử dụng cách viết ngắn gọn bằng cách dùng dấu {...}
var obj = {
  val: 5,
  click: function () {
    alert("hello");
  }
};

Trong thực tế khi bạn khai báo một hàm bất kỳ trong javaScript cũng có thể được mô tả cho một đối tượng, trong thực tế điều này có thể gây nhiều khó hiểu. Chúng ta sẽ cùng xem xét ví dụ sau để hiểu rõ hơn điều này:

// Tạo một hàm đơn giản, bên trong có tạo một thuộc tính name
function User(x) {
  this.name = x;
}
// Khai báo đối tượng từ hàm trên
var me = new User("My Name");
// Kiểm tra thuộc tính
alert(me.name);

// Dùng phương thức construtor để kiểm tra đối tượng User
alert(me.constructor == User);
// Chạy hàm User
User("Test");

// Trong bối cảnh hàm trên từ khóa 'this' không được sét,
// mặc định nó có thể được gán cho đối tượng toàn cầu 'window',
// nghĩa là bạn có thể truy cập tới thuộc tính name
alert(window.name);

Phương thức public

Phương thức public giúp bạn sử dụng nó bên ngoài đối tượng, bạn có thể tạo phương thức public bên ngoài đối tượng thông qua một đối tượng trung gian đó là prototype. Ví dụ:

// Tạo cấu trúc đối tượng User
function User(name, age) {
  this.ten = name;
  this.tuoi = age;
}
// Thêm phương thức getName cho đối tượng User
User.prototype.getName = function () {
  return this.ten;
};
// Thêm phương thức getAge cho đối tượng User
User.prototype.getAge = function () {
  return this.tuoi;
};

// Tạo một biến user lưu đối tượng User
var user = new User("Bob", 44);
// Kiểm tra hai phương thức của đối tượng
alert(user.getName());
alert(user.getAge());

Bạn có thể thấy prototype thực sự tiện lợi giúp bạn tạo phương thức của đối tượng một cách giễ ràng, và nó được dùng phổ biến để xây dựng ứng dụng javaScript

Phương thức private

Phương thức private được tạo ra bên trong đối tượng điều này làm cho bạn không thể truy cập nó bên ngoài đối tượng, nó tạo sự chặt chẽ cho ứng dụng của bạn, khỏi đụng độ với các đối tượng khác khi bạn phát triển ứng dụng với lượng code lớn. Xem ví dụ sau để hiểu hơn về phương thức private:

// Tạo cấu trúc cho đối tượng Classroom
function Classroom(students, teacher) {
  // Tạo một phương thức private hiển thị sinh viên trong lớp
  function get() {
    alert(students.join(", "));
  }
  // Tạo thuộc tính đối tượng lưu trữ thông tin
  this.students = students;
  this.teacher = teacher;
  // Gọi phương thức get
  get();
}

// tạo đối tượng Classroom
var myclass = new Classroom(["Chiến", "Đinh"], "Thảo");
// Kiểm tra phương thức của đối tượng
alert(myclass.teacher)
// Gọi phương thức private bên ngoài đối tượng
myclass.get();

Kết quả ví dụ trên khi gọi phương thức private bên ngoài đối tượng ta nhận được một thông báo lỗi là đối tượng Classroom không có phương thức get()

phương thức privileged

Đây là phương thức được tạo bên trong đối tượng và bạn có thể truy cập nó bên ngoài đối tượng, thực ra nó là một hàm "nặc danh" được lưu vào một thuộc trong đối tượng. Xem ví dụ sau để hiểu rõ hơn điều này:

// Tạo cấu trúc đối tượng User
function User(name, age) {
  // Tạo biến lưu thông tin năm sinh
  var year = (new Date()).getFullYear() - age;
  // Tạo phương thức Privileged trả về năm sinh
  this.getYearBorn = function () {
    return year;​
  }
}

// Tạo đối tượng User
var user = new User("Bob", 44);
// Kiểm tra phương getYearBorn
alert(user.getYearBorn());

Phương thức static

Trước kia khi tôi tìm hiểu về kỹ thuật tạo phương thức static, tôi đã bị bất ngờ bởi kết quả mà nó đem lại. Trước tiên chúng sẽ ta cùng xét một số trường hợp sử dụng đối tượng trong javaScript với phương thức public. Bạn  sẽ sử dụng lại ví dụ đã trình bày ở phần phương thức public.

Nếu bạn gán đối tượng user cho một biến user2 và kiểm tra các phương thức và thuộc tính của user trên user2 thì thực chất user và user2 là một, cùng là đối tượng User vì mọi thay đổi trên user hay user2 đều ảnh hưởng lẫn nhau. Ví dụ:

var user = new User('Tí',100);
var user2 = user;
alert(user2.getName()); // Kết quả: Tí

// Thay đổi thuộc tính 'ten' trên user2
user2.ten = 'Tẻo';
alert(user2.getName()); // Kết quả: Tèo
alert(user.getName()); // Kết quả: Tèo

// Nếu tạo thêm thuộc tính cho đối tượng user2
user2.interest = 'web';
alert(user.interest); // Kết quả: web

Nếu bạn muốn tạo ra đối tượng User khác thì bạn phải gọi lại và không thể thừa kế được giá trị gì từ đối tượng trước đã tạo, bạn buộc phại gọi lại đối tượng với tham số hay các giá trị cần thiết. Ví dụ:

var user = new User('Tí',100);
var user3 = new User('Tí',100);
alert(user3.getName()); // Tí

// Thay đổi thuộc tính 'ten' trên user3
user3.ten = 'Tèo';
alert(user3.getName()); // Tèo
alert(user.getName()); // Tí

// Nếu tạo thêm thuộc tính cho đối tượng user3
user3.interest = 'web';
alert(user.interest); // Kết quả: thuộc tính không xác định
alert(user3.interest); // Kết quả: web

Tuy khi thêm hay thay đổi user3 thì không ảnh hưởng gì đến user nhưng bạn không thừa kế được những giá trị đã được tạo ra hay thay đổi từ user mà bạn phải khai báo lại nó. Vấn đề này nảy sinh ra một kỹ thuật trong javaScript mà người ta gọi nó là phương thức static. Xem ví dụ sau để hiểu rõ điều này:

// Tạo phương thức static cloneUser tới đối tượng User
User.cloneUser = function (user) {
  // Tạo và trả về một đối tượng user mới
  return new User(
  // Nhân bản những phương thức hay thuộc tính đối tượng user
  user.getName(),
  user.getAge());
};

var user = new User('Tí', 100);
// Sử dụng phương thức cloneUser nhân bản đối tượng user
var other = User.cloneUser(user);
alert(other.getName()); // Tí

// Thay đổi giá trị thuộc tính 'ten' trên other
// đối tượng user không đổi
other.ten = 'Tèo';
alert(other.getName()); // Tèo
alert(user.getName()); // Tí

// Thay đổi giá trị thuộc tính 'ten' trên user.
// đối tượng other không đổi
user.ten = 'Tùng';
alert(user.getName()); // Tùng
alert(other.getName()); // tèo

// Nhân bản đối tượng user một lần nữa
var other1 = User.cloneUser(user);
alert(other1.getName()); // Tùng

// Nhân bản đối tượng other
var other2 = User.cloneUser(other);
alert(other2.getName()); // Tèo

Điều này thực sự hữu dụng nếu bạn phát triển ứng dụng lớn nhưng cũng có thể giễ gây nhầm lẫn nếu bạn mới làm quen với kỹ thuật này. Khi bạn thực hiện coding một dự án nào đó bạn nên nghĩ ngay tới việc coding làm sao đoạn code bạn có thể dùng lại giễ dàng và có thể phát triển tiếp, nếu mỗi lần dùng lại bạn lại phải tìm hiểu rồi edit nhiều chỗ mới dùng được hay thậm chí phải code lại từ đầu thì quả là phí công sức nếu ứng dụng bạn có một lượng code lớn, đó là vì sao việc coding theo hướng đối tượng là điều nên làm bởi vì ưu điểm của nó thì có lẽ bạn cũng biết, nhưng cũng có thể là không cần thiết với ứng dụng nhỏ và đơn giản, tất cả là tùy ở bạn, tôi mong nhận được sự góp ý của tất cả các bạn có cùng chung sở thích.

Tham khảo Apress.pro.javascript.techniques _ 2006 John Resig