Tìm hiểu về JavaScript Classes và lập trình hướng đối tượng một cách toàn diện
Classes là một trong những tính năng được giới thiệu trong phiên bản ES6 của
JavaScript.
Một class là một bản thiết kế cho đối tượng. Bạn có thể tạo một đối tượng từ
class.
Bạn có thể coi class như một bản phác thảo (nguyên mẫu) của một ngôi nhà. Nó
chứa tất cả các chi tiết về sàn nhà, cửa ra vào, cửa sổ, v.v. Dựa trên những
mô tả này, bạn xây dựng ngôi nhà. Nhà là đối tượng.
Vì có thể tạo nhiều ngôi nhà từ cùng một mô tả, nên chúng ta có thể tạo
nhiều đối tượng từ một class.
Tạo JavaScript Class
JavaScipt class cũng tương tự như một javascript constructor function và nó
đơn thuần là một cú pháp đặc biệt.
Hàm tạo constructor được định nghĩa như sau:
// constructor function
function Person () {
this.name = 'John',
this.age = 23
}
// create an object
const person1 = new Person();
Thay vì sử dụng từ khóa function, bạn có thể sử dụng từ khóa
class cho việc tạo một JS classes. Ví dụ
// creating a class
class Person {
constructor(name) {
this.name = name;
}
}
Từ khóa class được sử dụng để tạo một class. Các thuộc tính được gán trong
một hàm tạo constructor.
Bấy giờ bạn có thể tạo một đối tượng từ class đó. Ví dụ
// creating a class
class Person {
constructor(name) {
this.name = name;
}
}
// creating an object
const person1 = new Person('John');
const person2 = new Person('Jack');
console.log(person1.name); // John
console.log(person2.name); // Jack
Ở đây, person1 và person2 là các đối tượng của class
Person.
Lưu ý: Phương thức constructor() bên trong class Person được gọi
tự động ngay khi đối tượng được tạo.
Các phương thức JavaScript Class
Khi sử dụng hàm tạo constructor, bạn sẽ định nghĩa các phương thức là:
// constructor function
function Person (name) {
// assigning parameter values to the calling object
this.name = name;
// defining method
this.greet = function () {
return ('Hello' + ' ' + this.name);
}
}
Thật dễ dàng để định nghĩa các phương thức trong Javascript class. Bạn chỉ
cần đặt tên của các phương thức theo sau là "()". Ví dụ
class Person {
constructor(name) {
this.name = name;
}
// defining method
greet() {
console.log(`Hello ${this.name}`);
}
}
let person1 = new Person('John');
// accessing property
console.log(person1.name); // John
// accessing method
person1.greet(); // Hello John
Lưu ý: Để truy xuất đến các phương thức của một đối tượng, bạn cần
gọi đến phương thức bằng tên nó theo sau là "()".
Getters và Setter
Trong JavaScript, các phương thức getters lấy giá trị của một đối
tượng và phương thước setters đặt lại giá trị của một đối tượng.
Các JavaScript class có thể bao gồm getters và setters. Bạn sử
dụng từ khóa get cho các phương thức getter và set cho
các phương thức setter. Ví dụ
class Person {
constructor(name) {
this.name = name;
}
// getter
get personName() {
return this.name;
}
// setter
set personName(x) {
this.name = x;
}
}
let person1 = new Person('Jack');
console.log(person1.name); // Jack
// changing the value of name property
person1.personName = 'Sarah';
console.log(person1.name); // Sarah
Hoisting
Một class cần được định nghĩa trước khi sử dụng nó. Không giống như các hàm
hay các cách khai báo Javascript khác, class không được hoist. Ví dụ
// accessing class
const p = new Person(); // ReferenceError
// defining class
class Person {
constructor(name) {
this.name = name;
}
}
Như bạn có thể thấy, việc truy xuất một class trước khi định nghĩa nó sẽ gây
ra lỗi.
'use strict'
Classes luông luôn tuân theo "use strict". Tất cả code bên trong class sẽ tự
động ở chế độ strict mode. Ví dụ
class Person {
constructor() {
a = 0;
this.name = a;
}
}
let p = new Person(); // ReferenceError: Can't find variable: a
Lưu ý: JavaScript class là một loại function đặc biệt và khi bạn sử dụng toán tử typeof sẽ trả về là function cho một class.
Tags
Javascript