ES6

Sử dụng class trong ES6

nguyen.le , 15 min read

Giới thiệu nội dung bài viết

Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người về cách khai báo và sử dụng Class của ES6. Lần lượt giới thiệu và giải thích khái niệm và ví dụ về For of của ES6 là gì?

1. Tạo Class và đối tượng trong JS cách củ

Trước khi có cách viết Class mới trong ES6, thì để tạo một class trong Javascript ta khai báo theo cách như sau

1
2
3
4
5
6
7
8
9
10

function Animal(type) {
    this.type = type;
}

Animal.prototype.identify = function() {
    console.log(this.type);
}

var cat = new Animal('Cat');
cat.identify(); // Cat

Chúng ta sử dụng function và prototype để tạo ra các đối tượng và thuộc tính cho một đối tượng.

2. Tạo Class và đối tượng trong ES6

Trong ES6 chúng ta tạo class và đối tượng một cách tường minh hơn bằng cách sử dụng từ khoá class để khai báo class, sử dụng từ khoá constructor để khai báo hàm dựng như sau.

1
2
3
4
5
6
7
8
9
10
11

class Animal {
    constructor(type) {
        this.type = type;
    }
    identify() {
        console.log(this.type);
    }
}

let cat = new Animal('Cat');
cat.identify();

3. Kiểm tra đối tượng trong ES6

Chúng ta sử dụng instance of để kiểm tra xem đối tượng đó có phải là đối tượng chúng ta mong muốn không, có đúng kiểu dữ liệu ta yêu cầu không.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

let Animal = class {
    constructor(type) {
        this.type = type;
    }
    identify() {
        console.log(this.type);
    }
}

let duck = new Animal('Duck');

console.log(duck instanceof Animal); // true
console.log(duck instanceof Object); // true

console.log(typeof Animal); // function
console.log(typeof Animal.prototype); // function

4. Sử dụng Getter và Setter

Chúng ta sử dụng từ khoá get và set để thực hiện việc lấy giá trị và set giá trị của đối tượng như sau.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    get fullName() {
        return this.firstName + ' ' + this.lastName;
    }

    set fullName(str) {
        let names = str.split(' ');
        if (names.length === 2) {
            this.firstName = names[0];
            this.lastName = names[1];
        } else {
            throw 'Invalid name format';
        }
    }
}

let mary = new Person('Mary', 'Doe');
console.log(mary.fullName); // Mary Doe

5. Demo Video

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments