EcmaScript 6 dziedziczenie w JavaScript

Ostatnio pisałem o tym czym dokładnie jest dziedziczenie, jak wygląda dziedziczenie w innych językach programowanie takich jak C#, C++ czy Java, dzisiaj będziemy kontynuować ten temat. Pokaże Ci jak można kod z poprzedniego artykułu napisać prościej dzięki ES6. Standard EcmaScript 6 wprowadził wiele nowości, większość z nich opisywałem już we wcześniejszych artykułach na blogu, były to między innymi klasy, a także to co dzisiaj nas bardziej interesuje - dziedziczenie.

Przypomnijmy sobie kod z poprzedniego artykułu, ponieważ dzisiaj będziemy właśnie na nim pracować:

function extend(Child, Parent) {
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;
}

function Shape() {
}

Shape.prototype.setWidth = function(width) {
    this.width = width;
}

function Square() {
}

function Rectangle() {
}

extend(Square, Shape);
extend(Rectangle, Shape);

let square = new Square();
let rectangle = new Rectangle();

square.setWidth(10);
rectangle.setWidth(20);

Mamy tutaj 2 obiekty Square oraz Rectangle, które dziedziczą po Shape, oba obiekty dziedziczą metodę setWidth po obiekcie nadrzędnym (po rodzicu).

Jak już wspomniałem wcześniej w ES6 pojawiły się klasy. Jeżeli chcesz dowiedzieć się czegoś więcej o klasach, to zapraszam do tego artykułu klasy w JavaScript. Klasy zostały wprowadzone po to, aby upodobnić składnie do innych języków programowania takich jak C# czy Java. Zostały także wprowadzone 3 nowe słowa kluczowe, które będziemy dzisiaj używać. Są to class, extends oraz super. Wprowadzone dziedziczenie to tak naprawdę tylko nakładka, tzw. syntatic sugar, ponieważ pod spodem odbywa się zwykłe poznane w poprzednim artykule dziedziczenie prototypowe. Może tym razem najpierw pokaże jak powyższy kod może wyglądać dzięki ES6, a następnie go omówimy.

class Shape {
    setWidth (width) {
        this.width = width;
    }
}

class Square extends Shape {
}

class Rectangle extends Shape {
}

let square = new Square();
let rectangle = new Rectangle();

square.setWidth(10);
rectangle.setWidth(20);

Jak widzisz powyższy kod jest dużo krótszy oraz bardziej czytelny. Najpierw następuje deklaracja klasy bazowej Shape, która zawiera 1 metodę. Następnie klasy Square oraz Rectangle dzięki słowu kluczowemu extends rozszerzają, czyli dziedziczą po klasie Shape. Nic skomplikowanego. Pod spodem wykonuje się dziedziczenie prototypowe, czyli mniej więcej ten sam kod, od którego zaczęliśmy dzisiejszy artykuł.

Napisałem również, że zostało wprowadzone słowo kluczowe super. Dzięki niemu możesz wywołać konstruktor bazowy w klasie podrzędnej. Zobacz na przykład:

class Shape {
    constructor(location){
        this.location = location;
    }
}

class Square extends Shape {
    constructor(location, width){
        super(location);
        this.width = width;
    }
}

let square = new Square(10, 500);
console.log(square.location);
console.log(square.width);

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Dziedziczenie w JavaScript.
Następny artykuł - Polimorfizm w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

EcmaScript 6 dziedziczenie w JavaScript

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły