Javascript là ngôn ngữ mạnh mẽ hỗ trợ lập trình hướng đối tượng (OOP).
Trên thực tế trong Javascript, object có mặt ở khắp mọi nơi - từ những tính năng cốt lõi như chuỗi (strings) hay mảng (array) cho tới các browser API dựng sẵn.
Bautista, một nhà phát triển nền tảng web từng nhấn mạnh rằng: "... Để nâng kĩ năng lập trình Javascript của mình lên, bạn cần phải hiểu được object-based nature(?) của nó!".
Sau đây là ba cách để tạo một object trong Javascript hướng đối tượng:
1. Sử dụng Object literals
Trong lập trình hướng đối tượng, object literals được biểu diễn bằng dấu phẩy ngăn cách giữa các cặp name-value nằm trong ngoặc nhọn.
Thuộc tính name thuộc kiểu dữ liệu dạng chuỗi (strings) và giá trị là một trong số bất kỳ kiểu dữ liệu nào của javascript như mảng (arrays), chuỗi (strings), số (number) hay hàm (function)...
Thông thường, object literals thường được sử dụng bằng cách đóng gói lại trong một package một cách có trật tự. Bằng cách này, có thể tránh được xung đột với các biến hoặc đối tượng trong global scope.
Với object literals, bạn có thể gom các giá trị (properties) và phương thức (method) cùng với nhau, giúp cho code sạch và không bị xáo trộn.
Dưới đây là một ví dụ:
var liveedu = {
//declaring properties
student: "james",
//declaring methods
watch: function() {
console.log("learn new tech skills");
},
};
//accessing methods and properties
liveedu.watch();
//output is learn new tech skillsJavascript object literals là một singleton, và chúng giúp bạn tạo object một cách thuận tiện và linh hoạt.
Chúng giúp bạn khỏi bị thừa code.
Ví dụ, bạn có thể đưa một object literals vào bất cứ đâu trong workspace của bạn mà trước đó không cần thiết lập gì cả, vậy mà nó vẫn chạy tốt và hiệu quả!
Mặc dù object literals quan trọng, nhưng nó lại không hề hỗ trợ thực thể hóa (instantiation) hay kế thừa (inheritance)
Nếu bạn muốn làm cho tính năng của bạn trở nên hiệu quả, bạn có thể sử dụng một số kĩ thuật khác để tạo một object.
2. Sử dụng Object constructor functions
Constructor function là một trong số những cách thông dụng nhất để tạo một Javascript object phụ thuộc vào việc kế thừa prototype nhằm giúp các chức năng trở nên hữu dụng.
Mấu chốt của những function dạng này là chúng có thể được thực thể hóa (instantiation) và được kế thừa (inherited).
Hãy cùng xem constructor function được sử dụng như thế nào trong Javascript hướng đối tượng
function Liveedu(student) {
// properties
this.student = student;
// methods
this.watch = function() {
console.log(this.student + "learns new tech skills");
}
}
// instantiating the object
var liveedu = new Liveedu("James ");
// accessing methods and properties
liveedu.watch(); //output is James learns new tech skills
console.log(Object.getPrototypeOf(liveedu)); // output is objectĐây là những gì diễn ra trong hàm:
- Constructor function được tạo ra giống như một function thông thường. Tuy nhiên, điều khác biệt ở đây chính là từ khóa this được dùng để khai báo giá trị (properties) và phương thức (method). Trong trường hợp này, this đại diện cho đối tượng của hàm Liveedu.
- Một object mới là liveedu được tạo ra bởi toán tử new. Điển hình là toán tử new liên kết các object mới được tạo nằm trong hàm constructor vừa được gọi. Do đó, liên kết được tạo ra trong đối tượng liveedu lấy các giá trị (properties) và phương thức (methods) trong hàm.
- Đối tượng liveedu có một giá trị liên quan đến prototype, nơi các thành phần kế thừa được định nghĩa. Vì vậy, khi một hàm như hàm watch() được gọi, trình duyệt sẽ chạy qua một loạt các objects và prototype tương ứng cho đến khi lấy được giá trị (value)
3. Sử dụng prototyping inheritance
Một đối tượng trong Javascript còn có thể được tạo bằng cách sử dụng khái niệm prototypical inheritance.
Phần lớn các trình duyệt hiện nay đều bổ sung thêm một prototype mang giá trị (property) đặc biệt là proto, hay còn được gọi là dunder proto (gọi tắt của double underscope prototype).
Hãy xem một số ví dụ dưới đây để xem proto được sử dụng ra sao trong prototyping inheritance:
var liveedu = {
student: "james",
watch: function() {
return this.student + " is learning new skills";
}
}
var livecoding = {
student: "felix",
watch: function() {
return this.student + " is learning new skills";
}
}Như đã thấy ở đoạn code trên, cả hai object đều có phương thức tương tự nhau, nên đoạn code trông như bị thừa.
Do đó, để hai object trên dùng chung phương thức watch, ta có thể dùng giá trị (property) proto cho prototype.
Nói cách khác, ta có thể dùng prototype để mở rộng các giá trị cho các đối tượng.
Và đây là đoạn code được viết lại:
var WatchProto = {
watch: function() {
return this.student + " is learning new skills";
}
}
var liveedu = {
student: "james",
__proto__: WatchProto
}
var livecoding = {
student: "felix",
__proto__: WatchProto
}
console.log(liveedu.watch()); //james is learning new skills
console.log(livecoding.watch()); //felix is learning new skillsCó thể thấy ở đoạn code trên, cả hai đối tượng đều dùng chung phương thức đã được định nghĩa trước ở WatchProto, hai đối tượng liveedu và livecoding đều có thể truy cập trực tiếp vào biến này, khiến cho code trông sạch hơn và hoạt động hiệu quả hơn.
Một lưu ý quan trọng là proto là cú pháp mới chỉ có từ Javascript ES6 trở đi nên có thể sẽ không hoạt động trên các trình duyệt cũ.
Một cách thay thế khác là bạn có thể sử dụng phương thức Object.create() để tạo ra các prototype.
Dưới đây là ví dụ:
var WatchProto = {
watch: function() {
return this.student + " is learning new skills";
}
}
var liveedu = Object.create(WatchProto);
liveedu.student = "james";Tóm lại, qua bài viết, có thể hiểu được rằng đối tượng trong Javascript là chìa khóa giúp chúng ta tìm hiểu sâu hơn về ngôn ngữ lập trình hiện đang rất phổ biến này.
Hãy chia sẻ những kinh nghiệm của bạn về việc sử dụng Javascript hướng đối tượng trong quá trình học cũng như làm việc ở phần comment dưới bài viết nhé!
Nguồn tham khảo tại đây.
Bình luận