JavaScript Classes: Xây dựng ứng dụng JavaScript mạnh mẽ với Classes

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

thumnail

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 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 setters. Bạn sử dụng từ khóa get cho các phương thức getter 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.

No comments:

Powered by Blogger.