Modest Programmer logo
27 listopada 2018
Tagi: 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.
Autor artykułu:
Kazimierz Szpin
Kazimierz Szpin
Programista. Specjalizuje się w C#, głównie WPF, Windows Forms oraz ASP.NET MVC.
Autor bloga ModestProgrammer.pl
Dodaj komentarz
© Copyright 2018 modestprogrammer.pl. Wszelkie prawa zastrzeżone Design by Kazimierz Szpin