Weblabor

A következőekben szeretném folytatni a JavaScript nyelv bemutatását, amit a függvényekkel kezdtem el.

A további cikkekben szeretnék jobban elmélyedni olyan témákban, mint a

• funkcionális programozás,
• eseménykezelés,
• objektumok,
• valamint kitérni arra, hogyan változnak meg a fentiek az ECMAScript (ES) következő változataiban.

Ezekhez korszerű, ES5 kompatibilis JavaScript motort feltételezek, de kitérek rá, hogyan lehet megvalósítani mindezt régebbi böngészőkben is (amennyiben egyáltalán lehetséges).

A JavaScript egy objektumorientált (OOP) programozási nyelv. Egy prototípusos nyelv, ami azt jelenti, hogy az öröklődést prototípusok segítségével, és nem osztályokkal valósítja meg. A JavaScriptben minden objektum, vagy használható objektumként.

Primitívek

A JavaScriptben öt primitív típus van (boolean, number, string, null és undefined), és az utolsó kettő kivételével automatikusan objektummá alakulnak, amikor meghívjuk egy metódusukat, majd automatikusan vissza is alakulnak primitívvé.

false.toString()                    === 'false'   // true
'string'.slice(2).replace('r', 'k') === 'king';   // true
typeof 1                            === 'number'; // true

A primitív érték alakíthatatlan (immutable), ugyanakkor becsomagolhatjuk egy objektumba a csomagoló függvényével: a Boolean(), Number() vagy String() függvényt a new operátorral meghívva (vagy az Object() függvényt használva), és átadva neki az értéket:

new Boolean(true)           === true;    // false
new Boolean(true).valueOf() === true;    // true
typeof new Number(1)        === 'object' // true
Object('string') instanceof String       // true

A becsomagolt primitív mostmár egy teljes értékű objektum, kicsomagolni a valueOf() metódus meghívásával tudjuk. Mivel azonban nincs olyan eset, ahol az explicit csomagolás indokolt volna, használjuk ki, hogy a primitív értéket a futtatókörnyezet automatikusan be- és kicsomagolja.

Objektumok

Ahogy korábban írtam, a JavaScriptben, hasonlóan a Javához, minden objektum (a primitívek kivételével). Ugyanakkor a Javától eltérően itt minden objektum egy kulcs–érték pár tároló. Objektumokat nagyon egyszerűen tudunk létrehozni: az objektum konstruktor segítségével, illetve objektum literál használatával (ez utóbbi az ajánlott):

var object1 = new Object();
var object2 = {};

A Javával és sok más nyelvvel ellentétben további tulajdonságokat adhatunk egy objektumhoz a létrehozás után is, a pont szintaxissal, illetve szögletes zárójel használatával:

var object3 = {};

object3.poperty1     = 'value1';
object3['property2'] = 'value2';

A tulajdonságok nevei sztringek (ES6-ban [ES 2015-ben] kiegészülve a Symbol típussal), és akármilyen értéket tárolhatnak: primitívet és objektumot is. Az értékeket már az objektum literál felírásakor is megadhatjuk:

var object4 = {
    property3: 1,
    
    'continue': function () {
        return null;
    }
};

A JavaScriptben egy függvényt metódusnak nevezünk, ha az egy objektum tulajdonsága. Mivel JavaScriptben minden függvény egyben objektum is, így természetesen megadható tulajdonságnak, így lesznek az objektumoknak metódusai.

Prototípus lánc

Minden objektumnak van egy prototípusa ([[Prototype]]), ami közvetlenül nem hozzáférhető (habár néhány futtatómotor elérhetővé teszi a __proto__ tulajdonságon keresztül). Ha az Object() konstruktort vagy az objektum literált használjuk objektumunk létrehozására, akkor [[Prototype]] tulajdonsága az Object prototype objektumára fog mutatani (és ezzel megörököl néhány tulajdonságot tőle, mint amilyen a toString() és a valueOf()).

Amikor egy objektum egy tulajdonságát akarjuk elérni, akkor a futtatómotor előbb az objektum saját tulajdonságai között keresi, majd ha itt nem találja, akkor az objektum [[Prototype]] értékét lekérdezve feljebb lép a prototípus lánc mentén, és itt fogja keresni a tulajdonságot, egészen addig, amíg el nem éri a null-t a prototípus lánc végén.

    +------------------+
    |       null       |<--+
    +------------------+   |
                           |
    +------------------+   |
+-->| Object.prototype |   |
|   +------------------+   |
|   |   [[Prototype]]  |---+
|   +------------------+
|   
|   +------------------+
|   | String.prototype |<--+
|   +------------------+   |
+---|   [[Prototype]]  |   |
    +------------------+   |
                           |
    +------------------+   |
    |  new String('')  |   |
    +------------------+   |
    |   [[Prototype]]  |---+
    +------------------+

Öröklődés

JavaScriptben az öröklődést hagyományosan a prototípus lánc kiterjesztésével oldjuk meg. Új objektum létrehozásakor az előbb leírt prototípus lánc végéhez adunk egy új elemet. Például a var object5 = {}; a következő prototípus láncot eredményezi:

    +------------------+
    |       null       |<--+
    +------------------+   |
                           |
    +------------------+   |
+-->| Object.prototype |   |
|   +------------------+   |
|   |   [[Prototype]]  |---+
|   +------------------+
|   
|   +------------------+
|   |      object5     |
|   +------------------+
+---|   [[Prototype]]  |
    +------------------+

Felülírhatjuk az örökölt tulajdonságokat, vagy hozzáadhatunk újakat, magában az objektumban, illetve bárhol a prototípus láncban. A prototípus láncban való felülírás azt jelenti, hogy minden objektum, aminek a prototípus lánca tartalmazza a felülírt objektumot, szintén megkapja az új tulajdonságot. Ez a működés nagy rugalmasságot ad a nyelvnek, ugyanakkor rengeteg hiba okozója is lehet.

Object.create()

Az Object.create() segítségével könnyen megvalósíthatjuk az öröklődést (mellékhatások nélkül):

var Prototype = {
    name: 'Prototype',
    
    sayName: function () {
        console.log('My name is: ' + this.name);
    }
};

Prototype.sayName(); // > My name is: Prototype

var object6 = Object.create(Prototype);

object6.name = 'object6';
object6.sayName(); // > My name is: object6

Habár a kódunkban nem deklaráltuk az object6.sayName() metódust, meghívásakor a motor kikeresi a Prototype objektumban megtalálhatót a prototípus láncban lépkedve.

A megmaradt problémánk, hogy a name tulajdonságot külön sorban tudjuk csak felülírni. Ezt megoldhatjuk úgy, hogy átadunk egy propertiesObject objektumot az Object.create()-nek:

var object7 = Object.create(Prototype, {
    name: {
        value: 'object7',
        
        enumerable:   true,
        writable:     true,
        configurable: true,
    }
});

object7.sayName() // > My name is: object7

Azokban az implementációkban, amik nem valósítotják meg az Object.create() függvényt, egy polyfill használatával könnyen megadhatjuk az alapvető működést (a propertiesObject használatának kivételével):

if (typeof Object.create !== 'function') {
    Object.create = (function () {
        var Heir = function () {};
        
        return function (prototype) {
            if (arguments.length > 1) {
                throw Error('Second argument not supported');
            }
            
            if (typeof prototype !== 'object') {
                throw TypeError('Argument must be an object');
            }
            
            Heir.prototype = prototype;
            
            return new Heir();
        };
    })();
}

Az Object.create() használatával még mindig ránk marad az objektumok inicializálása. Itt jönnek segítségünkre a konstruktorok.

Konstruktorok

A konstruktorok szokásos függvények. Azonban amikor a new operátorral hívjuk meg őket, akkor konstruktorként viselkednek, és visszaadnak egy objektumot (még akkor is, ha primitívet vagy semmilyen értéket nem adnának vissza a return utasítással).

A függvényeket, amiket konstruktorként szeretnénk használni, olyanra érdemes tervezni, hogy úgy nézzenek ki, és úgy is viselkedjenek, mint egy konstruktor. Ezért legjobb, ha nagybetűvel kezdjük a nevét, ezzel jelezve a használójának, mi a fejlesztő szándéka:

function Shape() {
    console.log('Constructor called');
}

// A () jelek opcionálisak, ha egy függvényt konstruktorként hívunk meg.
var shape = new Shape(); // > Constructor called

console.log(typeof shape); // > object

Közvetlenül a konstruktorfüggvény meghívása előtt a JavaScript motor létrehoz egy objektumot, melynek [[Prototype]]-ja a konstruktor prototype tulajdonságára mutat. Ezen új objektumot ezután a függvény a this értékeként kapja meg. Ha a függvény nem ad vissza semmit, vagy nem objektumot ad vissza, a this értéke kerül automatikusan visszaadásra.

Kiterjeszthetjük az objektumunkat úgy, hogy újabb tulajdonságokat adunk a konstruktora prototype objektumához, akár azután is, hogy az objektum létrejött:

Shape.prototype.move = function () {
    console.log('Shape moved');
};

shape.move() // > Shape moved

Minden objektum, amit a konstruktorfügvénnyel hoztunk létre, ezután megörökli az összes tulajdonságot, amit a prototype-hoz adunk, mivel azok bekerülnek a prototípus láncba.

Öröklődés konstruktorokkal

Kombinálhatjuk az öröklődést és konstruktorfüggvényeket. Ezzel olyan objektumokat nyerünk, melyek egymástól örökölnek tulajdonságokat. Ehhez újabb konstruktort hozunk létre, annak prototípusát megfeleltetjük a szülő konstruktorának prototype-jából létrejött objektumnak, végül pedig helyreállítjuk a konstruktor prototípusának constructor tulajdonságát:

function Rectangle() {}

Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

Függvény deklarálásakor a JavaScript motor automatikusan hozzáadja a prototípushoz a függvényre mutató constructor hivatkozást. Miután az objektum prototípusát felülírtuk, vissza kell állítanunk a constructor értékét az eredetire.

Ezután már használhatjuk is az új konstruktort. Az általa generált objektumok ezután mind a szülő, mind pedig a konstruktor prototípusának tulajdonságait megöröklik:

var rectangle = new Rectangle();

console.log(rectangle instanceof Rectangle); // > true
console.log(rectangle instanceof Shape);     // > true

rectangle.move(); // > Shape moved

A szülő függvényeinek meghívása

Az előző megvalósításnak van egy kisebb hibája. Nem hívja meg a szülő (superclass) konstruktorát, amikor egy új objektumot hoz létre. Ezt viszonylag könnyű orvosolni. Meg kell hívni a szülő konstruktorfüggvényének call() metódusát, átadva neki az újonnan létrejött this objektumot, valamint a további paramétereket, amennyiben szükséges:

function Rectangle() {
    Shape.call(this);
}

Mivel a fenti esetben mindig emlékezni kell mi volt a szülőosztály konstruktora, ezért a megoldás nem túl elegáns, ezen kívül szorossá teszi a csatolást a szülő és a gyermek között, mivel a kódban többször kell, hogy szerepeljen a szülő konstruktorának a neve. Kicsit dinamikusabbá tudjuk tenni ezt a csatolást azzal, ha az öröklődést egy segédfügvénnyel valósítjuk meg. Pár függvénytár ad is nekünk ilyen kényelmi funkciót, mint amilyen a util.inherits() Node.js-ben vagy a goog.inherits() a Google Closure Library-ben. Segítségükkel az öröklődés és a szülő elérése átlátszóvá válik. Amennyiben nem használunk olyan függvénytárat, ami segít ebben, könnyen megvalósíthatjuk:

function inherits(childConstructor, superConstructor) {
    childConstructor.super_ = superConstructor;
    
    childConstructor.prototype = Object.create(superConstructor.prototype, {
        constructor: {
            value: childConstructor,
            
            enumerable:   false,
            writable:     true,
            configurable: true
        }
    });
}

Ezek után már használhatjuk is, hogy ezzel hozzuk létre a prototípus láncunkat, és meghívjuk a konstruktort és prototípusának metódusait:

function Shape() {
    console.log('Constructor called');
}

Shape.prototype.move = function () {
    console.log('Shape moved');
};

function Rectangle() {
    Rectangle.super_.call(this);
}

inherits(Rectangle, Shape);

Rectangle.prototype.move = function () {
    console.log('Rectangle moved');
    Rectangle.super_.prototype.move.call(this);
};

Ezek után, ha létrehozunk egy új Rectangle objektumot, és meghívjuk a move() metódusát, akkor az meg fogja hívni a szülő prototípusának move() metódusát is. Mivel ezzel eltávolítottuk a közvetlen függést a szülőtől szinte minden helyen, könnyebbé vált lecserélni a szülőt a jövőben például egy Polygon típusra, amennyiben ez szükséges, anélkül, hogy mindenhol át kellene írni a hivatkozást.

Remélem, sikerült felkeltenem az érdeklődést az objektumorientált JavaScript programozás témája iránt azokban is, akik nem igazán ismerték vagy használták korábban.