ES6

Sử dụng kế thừa 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 Kế thừa của ES6. Lần lượt giới thiệu và giải thích khái niệm và ví dụ về Kế thừa của ES6 là gì?

1. Kế thừa trong JS cách củ

Trước khi có cách viết kế thừa trong ES6 thì để làm kế thừa trong Javascript ta sử dụng prototype khai báo theo cách như sau

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

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

Animal.prototype.walk = function() {
    console.log('walking on ' + this.legs + ' legs');
}

function Bird(legs) {
    Animal.call(this, legs);
}

Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.constructor = Animal;

Bird.prototype.fly = function() {
    console.log('flying');
}

var pigeon = new Bird(2);
pigeon.walk(); // walking on 2 legs
pigeon.fly(); // flying

2. Kế thừa trong JS trong ES6

Chúng ta sử dụng từ khoá extends để sử dụng kế thừa. Trong ví dụ dưới đây chúng ta khai báo lớp Animal, Class Bird sẽ kế thừa lại Animal

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

class Animal {
    constructor(legs) {
        this.legs = legs;
    }
    walk() {
        console.log('walking on ' + this.legs + ' legs');
    }
}

class Bird extends Animal {
    constructor(legs) {
        super(legs);
    }
    fly() {
        console.log('flying');
    }
}


let bird = new Bird(2);

bird.walk();
bird.fly();

3. Shadowing method

Gọi phương thức cha từ phương thức con. Ví dụ chúng ta có lớp Dog kế thừa lớp động vật và ghi đè lại phương thức walk() như sau

1
2
3
4
5
6
7
8
9
10
11

class Dog extends Animal {
    constructor() {
        super(4);
    }
    walk() {
        console.log(`go walking`);
    }
}

let bingo = new Dog();
bingo.walk(); // go walking

Sau khi chương trình chạy chúng ta sẽ được kết quả là : go walking.

Bây giờ chúng ta muốn từ gọi phương thức walk trong lớp Aninal (lớp cha) thì chúng ta sử dụng từ khoá super như sau. Lúc này nó sẽ gọi hàm walk trong lớp Animal.

1
2
3
4
5
6
7
8
9
10
11
12

class Dog extends Animal {
    constructor() {
        super(4);
    }
    walk() {
        super.walk(); // gọi lên phương thức walk của lớp Animal
        console.log(`go walking`);
    }
}

let bingo = new Dog();
bingo.walk();

4. 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