Tworzenie obiektów w JavaScript

W dzisiejszym artykule powrócimy do tematu obiektów w JavaScript. O podstawach tzn. czym są obiektu, do czego służą i jak ich używać dowiedziałeś się w jednym z wcześniejszych artykułów o obiektach. Dzisiaj trochę rozszerzę ten temat i napiszę w jaki sposób można tworzyć obiekty. W JavaScript obiekty można tworzyć na 3 różne sposoby: poprzez inicjalizator obiektu (literał obiektywy, ang. object literal syntax), fabrykę (ang. factory function) oraz funkcje konstruujące (ang. constructor functions).

O pierwszym z nich, a mianowicie inicjalizatorze obiektu wspomniałem już we wcześniejszym artykule, ale dla utrwalenia przypomnę Ci jego konstrukcje:

let car1 = {
    name: 'Audi',
    price: 35000,
    isDiesel: true,
    turnOn: function() {
        console.log('silnik włączony');    
    }
};

Możesz podejrzeć obiekt w konsoli:

console.log(car1); //Object { name: "Audi", price: 35000, isDiesel: true, turnOn: turnOn() }
console.log(car1.name); //Audi
console.log(car1.price); //35000
console.log(car1.isDiesel); //true
car1.turnOn(); //silnik włączony

Powyższy obiekt car posiada 3 właściwości: name typu string, price typu number oraz isDiesel typu boolean oraz 1 metodę turnOn. Jest to obiekt, który najczęściej jest przypisywany do zmiennej, zawiera w sobie właściwości w formie klucz:wartość oraz funkcje, zwane metodami.

Zobaczmy na ten sam przykład tworzony poprzez fabrykę:

function createCar(name, price, isDiesel) {
    return {
        name,
        price,
        isDiesel,
        turnOn() {
            console.log('silnik włączony');
        }    
    };
}

Dzięki powyższej fabryce możemy tworzyć obiekty w następujący sposób:

let car2 = createCar('Audi', 35000, true);

Obiekt car1, stworzony poprzez inicjalizator jest takim samym obiektem jak obiekt car2.

console.log(car2); //Object { name: "Audi", price: 35000, isDiesel: true, turnOn: turnOn() }
console.log(car2.name); //Audi
console.log(car2.price); //35000
console.log(car2.isDiesel); //true
car2.turnOn(); //silnik włączony

W przypadku fabryki podajemy wartości właściwości w parametrze i trafiają one do odpowiednich kluczy. Dzięki takiej składni tworzenie obiektów jest dużo łatwiejsze, ponieważ mamy do napisania mniej kodu jeśli chcemy tworzyć kilka takich samych obiektów. Jeśli będziemy potrzebować zrobić jakąś zmianę w metodzie, to wystarczy zrobić to tylko w 1 miejscu. W przypadku nazw fabryk stosowana jest notacja camel case, tzn. pierwszy wyraz zaczynamy od małej litery, a każdy kolejny od dużej.

Ostatnim do omówienia sposobem tworzenia obiektów jest tworzenie poprzez funkcje konstruujące. Spróbujmy stworzyć taki sam obiekt jak powyższe poprzez funkcję konstruującą.

function Car(name, price, isDiesel) {
    this.name = name;
    this.price = price;
    this.isDiesel = isDiesel;
    this.turnOn = function () {
       console.log('silnik włączony');
    }
}

Tworzenie obiektów poprzez funkcję konstruującą:

let car3 = new Car('Audi', 35000, true);

Na pewno zauważyłeś tutaj słowo kluczowe this, podejrzewam że odnośnie tego zapisu będzie trzeba stworzyć osobny artykuł, ale na teraz wystarczy żebyś wiedział, że this odnosi się do tego konkretnie tworzonego obiektu. Podobnie jak w fabryce, przekazujemy wartości poprzez parametry, które zostają przypisane do odpowiednich właściwości obiektu. Zostanie utworzony identyczny obiekt jak w obu poprzednich przypadkach.

console.log(car3); //Object { name: "Audi", price: 35000, isDiesel: true, turnOn: turnOn() }
console.log(car3.name); //Audi
console.log(car3.price); //35000
console.log(car3.isDiesel); //true
car3.turnOn(); //silnik włączony

W przeciwieństwie do fabryk tutaj stosowane jest nazewnictwo pascal case, czyli każdy wyraz łącznie z pierwszy rozpoczynamy od dużej litery. Oba sposoby tworzenia obiektów poprzez fabrykę oraz funkcje konstruujące są takie same, także możesz wybrać taką składnie, która bardziej Ci odpowiada.

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ł - Pętle w JavaScript cz. 2
Następny artykuł - Dynamiczne tworzenie obiektów w JavaScript.

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

Tworzenie obiektów w JavaScript

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły