05/10/2018, 23:18

Kế thừa trong javascript ES6

Trong ES6 đã hỗ trợ chúng ta có thể khai báo một đối tượng theo chuẩn OOP trong javascript, class trong ES6, hỗ trợ được phương thức constructor (phương thức khởi tạo tương tự như những ngôn ngữ khác, các thuộc tính không thể khai báo mà chỉ có thể khai báo và gán giá trị trong constructor hoặc phương thức của class, sử dụng từ khóa extends để kế thừa từ đối tượng khác, sử dụng super() để gọi lại constructor của class cha, sử dụng keyword super gọi các phương thức có sẵn của lớp cha, từ khóa static định nghĩa một hàm static (hàm tĩnh) trong một class, các phương thức của lớp con có thể overwrite của lớp ch, hỗ trợ setter và getter (magic method),

 

Trong ES6 đã hỗ trợ chúng ta có thể khai báo một đối tượng theo chuẩn OOP trong javascript, 

Class trong ES6,  hỗ trợ được phương thức constructor (phương thức khởi tạo tương tự như những ngôn ngữ khác, 

Các thuộc tính không thể khai báo mà chỉ có thể khai báo và gán giá trị trong constructor hoặc phương thức của class, 

Sử dụng từ khóa extends để kế thừa từ đối tượng khác, 

Sử dụng   super()  để gọi lại constructor của class  cha, 

Sử dụng keyword super gọi các phương thức có sẵn của lớp cha, 

Từ khóa static định nghĩa một hàm static (hàm tĩnh) trong một class, 

Các phương thức của lớp con có thể overwrite của lớp cha, 

Hỗ trợ setter và getter  (magic method),

Trình duyệt hỗ trợ

1:   Khai báo
class Vehicle {
    constructor(name = '', seat = 4) {
        this.name = name
        this.seat = parseInt(seat)
    }
    getName() {
        return this.name
    }
    getSeat() {
        return this.seat
    }
}

let vehicle = new Vehicle('toyota', 16);
console.log(vehicle.getName())
console.log(vehicle.getSeat())
2. Tính kế thừa
class Taxi extends Vehicle {
    constructor({name = '', seat = 4, license_plate = ''}) {
        super(name, seat);
        this.licensePlate = license_plate
    }
    getLicensePlate() {
        return this.licensePlate
    }
}
class Bus extends Vehicle {
    constructor({name = '', seat = 4, license_plate = ''}) {
        super(name, seat);
        this.licensePlate = license_plate
    }
    getLicensePlate() {
        return this.licensePlate
    }
}
let taxi = {
    name: 'Vios 2010',
    seat: 7,
    license_plate: '98F1-10529'
}
let bus = {
    name: 'Limousin 2018',
    seat: 7,
    license_plate: '29F1-10529'
}
let objTaxi = new Taxi(taxi);
console.log(objTaxi.getName());
console.log(objTaxi.getSeat());
console.log(objTaxi.getLicensePlate());
let objBus = new Bus(bus);
console.log(objBus.getName());
console.log(objBus.getSeat());
console.log(objBus.getLicensePlate());

 

3. Static method
class HaiVanComp {
    static talk(taxi, bus){
        let strTaxi = `Hải vân cung cấp ${taxi.getName()}-${taxi.getSeat()} chỗ, biển kiểm soát ${taxi.getLicensePlate()}`;
        let strBus = `Hải vân cung cấp ${bus.getName()}-${bus.getSeat()} chỗ, biển kiểm soát ${bus.getLicensePlate()}`;
        return `${strTaxi} ====== ${strBus}`;
    }
}
let result = HaiVanComp.talk(objTaxi, objBus)
console.log(result)
4. Setter và Getter
class Developer {
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
    set devName (name) {
        this.name = name;
    }
    get devName () {
        return this.name;
    }
    set devAge (age) {
        this.age = age;
    }
    get devAge () {
        return this.age;
    }
};

//khởi tạo đối tượng
let dev = new Developer();
//setter
dev.devName = "Đào Đăng Sơn"
dev.devAge = 18
//getter
console.log(dev.devName);
console.log(dev.devAge);

//Hoặc

//setter
Developer.devName = "Đào Đăng A"
Developer.devAge = 28
//getter
console.log(Developer.devName);
console.log(Developer.devAge);
Bài liên quan

Kế thừa trong javascript ES6

Trong ES6 đã hỗ trợ chúng ta có thể khai báo một đối tượng theo chuẩn OOP trong javascript, class trong ES6, hỗ trợ được phương thức constructor (phương thức khởi tạo tương tự như những ngôn ngữ khác, các thuộc tính không thể khai báo mà chỉ có thể khai báo và gán giá trị trong constructor ...

Đào Đăng Sơn viết 2 tuần trước

Tính kế thừa trong C++

Một trong những khái niệm quan trọng nhất trong lập trình hướng đối tượng là Tính kế thừa (Inheritance) . Tính kế thừa cho phép chúng ta định nghĩa một lớp trong điều kiện một lớp khác, mà làm cho nó dễ dàng hơn để tạo và duy trì một ứng dụng. Điều này cũng cung cấp một cơ hội để tái sử dụng ...

Tạ Quốc Bảo viết 12:39 ngày 14/08/2018

Golang embedded type - Kế thừa trong Go

Go không phải một ngôn ngữ hướng đối tượng (OOP). Tuy nhiên chúng ta có thể áp dụng một số ưu điểm của hướng đối tượng vào trong Go. Chúng ta có Struct (tương tự Class), Interface và Method. Để sử dụng thuộc tính "kế thừa" trong Go ta sẽ dùng embedded type . Embedded Type là khai báo một ...

Bùi Văn Nam viết 18:17 ngày 12/08/2018

Lớp và kế thừa trong Kotlin

Lớp Lớp trong kotlin được khai báo sử dụng từ khóa class class Invoice { } Khai báo lớp bao gồm tên lớp, tiêu đề của lớp(định nghĩa kiểu của tham số, constructor chính,...) và thân lớp bao quanh bởi dấu ngoặc nhọn. Cả tiêu đề và thân của lớp đều không bắt buộc, nếu lớp không có thân ...

Bùi Văn Nam viết 16:37 ngày 12/08/2018

Một số tính năng cơ bản trong Javascript ES6

Lời nói đầu Xin chào 500 anh em, Trong buổi seminar hôm nay mình sẽ giới thiệu về những điểm mới trong JavaScript ES6, Một phiên bản Javascript với cú pháp rất gọn, linh hoạt, dễ tiếp cận hơn phiên bản Javascript trước đó. Hiện tại đã có phiên bản JavaScript ES7,ES8 và sắp tới sẽ có phiên bản ...

Tạ Quốc Bảo viết 16:01 ngày 12/08/2018
+1