JavaScripti objektorienteeritud programmeerimine: klassipäriluse mustrite valdamine

Objektorienteeritud programmeerimine (OOP) on võimas paradigma, mis võimaldab arendajatel oma koodi struktureerida modulaarsel ja taaskasutataval viisil. Pärilus, OOP-i põhikontseptsioon, võimaldab meil luua uusi klasse olemasolevate põhjal, pärides nende omadused ja meetodid. See soodustab koodi taaskasutamist, vähendab liiasust ja parandab hooldatavust. JavaScriptis saavutatakse pärilus erinevate mustrite kaudu, millest igaühel on oma eelised ja puudused. See artikkel pakub põhjalikku ülevaadet nendest mustritest, alates traditsioonilisest prototüüpsest pärilusest kuni kaasaegsete ES6 klasside ja kaugemalegi.

Põhitõdede mõistmine: prototüübid ja prototüübiahel

Sügaval sisimas põhineb JavaScripti pärilusmudel prototüüpidel. Igal JavaScripti objektil on sellega seotud prototüüpobjekt. Kui proovite pääseda juurde objekti omadusele või meetodile, otsib JavaScript seda esmalt otse objektilt endalt. Kui seda ei leita, otsib see seejärel objekti prototüüpi. See protsess jätkub mööda prototüübiahelat, kuni omadus leitakse või ahela lõpuni jõutakse (mis on tavaliselt `null`).

See prototüüpne pärilus erineb klassikalisest pärilusest, mida leidub keeltes nagu Java või C++. Klassikalises päriluses pärivad klassid otse teistest klassidest. Prototüüpses päriluses pärivad objektid otse teistest objektidest (või täpsemalt, nende objektidega seotud prototüüpobjektidest).

`__proto__` omadus (iganenud, kuid mõistmiseks oluline)

Kuigi ametlikult iganenud, pakub `__proto__` omadus (topelt allkriips proto topelt allkriips) otsest viisi objekti prototüübile juurdepääsemiseks. Kuigi te ei tohiks seda tootmiskoodis kasutada, aitab selle mõistmine prototüübiahelat visualiseerida. Näiteks:

            const animal = {
  name: 'Generic Animal',
  makeSound: function() {
    console.log('Generic sound');
  }
};

const dog = {
  name: 'Dog',
  breed: 'Golden Retriever'
};

dog.__proto__ = animal; // Sets animal as the prototype of dog

console.log(dog.name);      // Output: Dog (dog has its own name property)
console.log(dog.breed);     // Output: Golden Retriever
console.log(dog.makeSound()); // Output: Generic sound (inherited from animal)

            

              
                Copy
              
            
          

Selles näites pärib `dog` meetodi `makeSound` objektilt `animal` prototüübiahela kaudu.

`Object.getPrototypeOf()` ja `Object.setPrototypeOf()` meetodid

Need on eelistatud meetodid vastavalt objekti prototüübi saamiseks ja seadistamiseks, pakkudes standardsemat ja usaldusväärsemat lähenemist võrreldes `__proto__`-ga. Kaaluge nende meetodite kasutamist prototüübi suhete haldamiseks.

            const animal = {
  name: 'Generic Animal',
  makeSound: function() {
    console.log('Generic sound');
  }
};

const dog = {
  name: 'Dog',
  breed: 'Golden Retriever'
};

Object.setPrototypeOf(dog, animal);

console.log(dog.name);      // Output: Dog
console.log(dog.breed);     // Output: Golden Retriever
console.log(dog.makeSound()); // Output: Generic sound

console.log(Object.getPrototypeOf(dog) === animal); // Output: true

            

              
                Copy
              
            
          

Klassikalise päriluse simulatsioon prototüüpidega

Kuigi JavaScriptis pole klassikalist pärilust samal viisil kui mõnes teises keeles, saame seda simuleerida konstruktorfunktsioonide ja prototüüpide abil. See lähenemine oli levinud enne ES6 klasside kasutuselevõttu.

Konstruktorfunktsioonid

Konstruktorfunktsioonid on tavalised JavaScripti funktsioonid, mida kutsutakse välja `new` märksõnaga. Kui konstruktorfunktsioon kutsutakse välja `new`-ga, loob see uue objekti, seab `this` viitama sellele objektile ja tagastab kaudselt uue objekti. Konstruktorfunktsiooni `prototype` omadust kasutatakse uue objekti prototüübi määratlemiseks.

            function Animal(name) {
  this.name = name;
}

Animal.prototype.makeSound = function() {
  console.log('Generic sound');
};

function Dog(name, breed) {
  Animal.call(this, name); // Call the Animal constructor to initialize the name property
  this.breed = breed;
}

// Set Dog's prototype to a new instance of Animal. This establishes the inheritance link.
Dog.prototype = Object.create(Animal.prototype);

// Correct the constructor property on Dog's prototype to point to Dog itself.
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('Woof!');
};

const myDog = new Dog('Buddy', 'Labrador');
console.log(myDog.name);      // Output: Buddy
console.log(myDog.breed);     // Output: Labrador
console.log(myDog.makeSound()); // Output: Generic sound (inherited from Animal)
console.log(myDog.bark());      // Output: Woof!
console.log(myDog instanceof Animal); // Output: true
console.log(myDog instanceof Dog);    // Output: true

            

              
                Copy
              
            
          

Selgitus:

• `Animal.call(this, name)`: See rida kutsub välja `Animal` konstruktori `Dog` konstruktori sees, seades `name` omaduse uuele `Dog` objektile. See on viis, kuidas me initsialiseerime vanemklassis määratletud omadusi. `.call` meetod võimaldab meil käivitada funktsiooni konkreetse `this` kontekstiga.
• `Dog.prototype = Object.create(Animal.prototype)`: See on päriluse seadistamise tuum. `Object.create(Animal.prototype)` loob uue objekti, mille prototüübiks on `Animal.prototype`. Seejärel omistame selle uue objekti `Dog.prototype`-le. See loob pärilussuhte: `Dog` isendid pärivad omadusi ja meetodeid `Animal`-i prototüübilt.
• `Dog.prototype.constructor = Dog`: Pärast prototüübi seadistamist viitab `Dog.prototype`-i `constructor` omadus ekslikult `Animal`-ile. Peame selle lähtestama, et see viitaks `Dog`-ile endale. See on oluline `Dog` isendite konstruktori õigeks tuvastamiseks.
• `instanceof`: Operaator `instanceof` kontrollib, kas objekt on konkreetse konstruktorfunktsiooni (või selle prototüübiahela) isend.

Miks `Object.create`?

`Object.create(Animal.prototype)` kasutamine on ülioluline, sest see loob uue objekti ilma `Animal` konstruktorit välja kutsumata. Kui me kasutaksime `new Animal()`, looksime tahtmatult `Animal` isendi päriluse seadistamise osana, mida me ei soovi. `Object.create` pakub puhast viisi prototüüpse sideme loomiseks ilma soovimatute kõrvalmõjudeta.

ES6 klassid: süntaktiline suhkur prototüüpsele pärilusele

ES6 (ECMAScript 2015) tõi sisse `class` märksõna, pakkudes tuttavamat süntaksit klasside ja päriluse määratlemiseks. Siiski on oluline meeles pidada, et ES6 klassid põhinevad endiselt kapoti all prototüüpsel pärilusel. Need pakuvad mugavamat ja loetavamat viisi prototüüpidega töötamiseks.

            class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log('Generic sound');
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Call the Animal constructor
    this.breed = breed;
  }

  bark() {
    console.log('Woof!');
  }
}

const myDog = new Dog('Buddy', 'Labrador');
console.log(myDog.name);      // Output: Buddy
console.log(myDog.breed);     // Output: Labrador
console.log(myDog.makeSound()); // Output: Generic sound
console.log(myDog.bark());      // Output: Woof!
console.log(myDog instanceof Animal); // Output: true
console.log(myDog instanceof Dog);    // Output: true

            

              
                Copy
              
            
          

Selgitus:

• `class Animal { ... }`: Määratleb klassi nimega `Animal`.
• `constructor(name) { ... }`: Määratleb `Animal` klassi konstruktori.
• `extends Animal`: Näitab, et `Dog` klass pärib `Animal` klassist.
• `super(name)`: Kutsub välja vanemklassi (`Animal`) konstruktori, et initsialiseerida `name` omadus. `super()` tuleb välja kutsuda enne `this` kasutamist tuletatud klassi konstruktoris.

ES6 klassid pakuvad puhtamat ja lühemat süntaksit objektide loomiseks ja pärilussuhete haldamiseks, muutes koodi lihtsamini loetavaks ja hooldatavaks. `extends` märksõna lihtsustab alamklasside loomise protsessi ja `super()` märksõna pakub otsekohest viisi vanemklassi konstruktori ja meetodite väljakutsumiseks.

Meetodi üledefineerimine

Nii klassikaline simulatsioon kui ka ES6 klassid võimaldavad teil üle defineerida vanemklassist päritud meetodeid. See tähendab, et saate pakkuda meetodi spetsialiseeritud implementatsiooni alamklassis.

            class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log('Generic sound');
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  makeSound() {
    console.log('Woof!'); // Overriding the makeSound method
  }

  bark() {
    console.log('Woof!');
  }
}

const myDog = new Dog('Buddy', 'Labrador');
myDog.makeSound(); // Output: Woof! (Dog's implementation)

            

              
                Copy
              
            
          

Selles näites defineerib `Dog` klass üle `makeSound` meetodi, pakkudes oma implementatsiooni, mis väljastab "Woof!".

Klassikalisest pärilusest kaugemale: alternatiivsed mustrid

Kuigi klassikaline pärilus on levinud muster, ei ole see alati parim lähenemine. Mõnel juhul pakuvad alternatiivsed mustrid nagu mixinid ja kompositsioon rohkem paindlikkust ja väldivad päriluse potentsiaalseid lõkse.

Mixinid

Mixinid on viis funktsionaalsuse lisamiseks klassile ilma pärilust kasutamata. Mixin on klass või objekt, mis pakub meetodite kogumit, mida saab teistesse klassidesse "sisse segada". See võimaldab teil koodi taaskasutada mitme klassi vahel ilma keerulist pärilushierarhiat loomata.

            const barkMixin = {
  bark() {
    console.log('Woof!');
  }
};

const flyMixin = {
  fly() {
    console.log('Flying!');
  }
};

class Dog {
  constructor(name) {
    this.name = name;
  }
}

class Bird {
  constructor(name) {
    this.name = name;
  }
}

// Apply the mixins (using Object.assign for simplicity)
Object.assign(Dog.prototype, barkMixin);
Object.assign(Bird.prototype, flyMixin);

const myDog = new Dog('Buddy');
myDog.bark(); // Output: Woof!

const myBird = new Bird('Tweety');
myBird.fly(); // Output: Flying!

            

              
                Copy
              
            
          

Selles näites pakub `barkMixin` meetodit `bark`, mis lisatakse `Dog` klassile, kasutades `Object.assign`. Sarnaselt pakub `flyMixin` meetodit `fly`, mis lisatakse `Bird` klassile. See võimaldab mõlemal klassil omada soovitud funktsionaalsust, ilma et nad oleksid päriluse kaudu seotud.

Keerukamad mixin'ite implementatsioonid võivad kasutada tehasefunktsioone või dekoraatoreid, et pakkuda rohkem kontrolli segamisprotsessi üle.

Kompositsioon

Kompositsioon on veel üks alternatiiv pärilusele. Selle asemel, et pärida funktsionaalsust vanemklassist, võib klass sisaldada teiste klasside isendeid komponentidena. See võimaldab teil ehitada keerulisi objekte, kombineerides lihtsamaid objekte.

            class Engine {
  start() {
    console.log('Engine started');
  }
}

class Wheels {
  rotate() {
    console.log('Wheels rotating');
  }
}

class Car {
  constructor() {
    this.engine = new Engine();
    this.wheels = new Wheels();
  }

  drive() {
    this.engine.start();
    this.wheels.rotate();
    console.log('Car driving');
  }
}

const myCar = new Car();
myCar.drive();
// Output:
// Engine started
// Wheels rotating
// Car driving

            

              
                Copy
              
            
          

Selles näites koosneb `Car` klass objektidest `Engine` ja `Wheels`. Selle asemel, et nendest klassidest pärida, sisaldab `Car` klass nende isendeid ja kasutab nende meetodeid oma funktsionaalsuse implementeerimiseks. See lähenemine soodustab lõdva sidususe põhimõtet ja võimaldab suuremat paindlikkust erinevate komponentide kombineerimisel.

JavaScripti päriluse parimad praktikad

• Eelista kompositsiooni pärilusele: Võimaluse korral eelista alati kompositsiooni pärilusele. Kompositsioon pakub rohkem paindlikkust ja väldib tihedat sidusust, mis võib pärilushierarhiatest tuleneda.
• Kasuta ES6 klasse: Kasuta ES6 klasse puhtama ja loetavama süntaksi saavutamiseks. Need pakuvad kaasaegsemat ja hooldatavamat viisi prototüüpse pärilusega töötamiseks.
• Väldi sügavaid pärilushierarhiaid: Sügavad pärilushierarhiad võivad muutuda keeruliseks ja raskesti mõistetavaks. Hoia pärilushierarhiad madalad ja fokusseeritud.
• Kaalu mixin'ite kasutamist: Kasuta mixin'eid funktsionaalsuse lisamiseks klassidele ilma keerulisi pärilussuhteid loomata.
• Mõista prototüübiahelat: Prototüübiahela põhjalik mõistmine on JavaScripti pärilusega tõhusaks töötamiseks hädavajalik.
• Kasuta `Object.create` õigesti: Klassikalise päriluse simuleerimisel kasuta `Object.create(Parent.prototype)`, et luua prototüübi suhe ilma vanema konstruktorit välja kutsumata.
• Paranda konstruktori omadus: Pärast prototüübi seadistamist paranda `constructor` omadus alamklassi prototüübil, et see viitaks alamklassi konstruktorile.

Globaalsed kaalutlused koodistiili osas

Globaalses meeskonnas töötades arvesta järgmiste punktidega:

• Järjepidevad nimekonventsioonid: Kasuta selgeid ja järjepidevaid nimekonventsioone, mis on kõigile meeskonnaliikmetele kergesti arusaadavad, olenemata nende emakeelest.
• Koodikommentaarid: Kirjuta põhjalikke koodikommentaare, et selgitada oma koodi eesmärki ja funktsionaalsust. See on eriti oluline keeruliste pärilussuhete puhul. Kaalu dokumentatsiooni generaatori nagu JSDoc kasutamist API dokumentatsiooni loomiseks.
• Rahvusvahelistamine (i18n) ja lokaliseerimine (l10n): Kui sinu rakendus peab toetama mitut keelt, mõtle, kuidas pärilus võib mõjutada sinu i18n ja l10n strateegiaid. Näiteks võib olla vajalik meetodeid alamklassides üle defineerida, et käsitleda erinevaid keelespetsiifilisi vormindamisnõudeid.
• Testimine: Kirjuta põhjalikke ühikteste, et tagada sinu pärilussuhete korrektne toimimine ja et kõik üledefineeritud meetodid käituksid ootuspäraselt. Pööra tähelepanu äärmusjuhtumite testimisele ja potentsiaalsetele jõudlusprobleemidele.
• Koodiülevaatused: Vii läbi regulaarseid koodiülevaatusi, et tagada kõigi meeskonnaliikmete parimate praktikate järgimine ning et kood oleks hästi dokumenteeritud ja kergesti mõistetav.

Kokkuvõte

JavaScripti pärilus on võimas tööriist taaskasutatava ja hooldatava koodi loomiseks. Mõistes erinevaid pärilusmustreid ja parimaid praktikaid, saad luua vastupidavaid ja skaleeritavaid rakendusi. Ükskõik, kas valid klassikalise simulatsiooni, ES6 klassid, mixinid või kompositsiooni, on võtmetähtsusega valida muster, mis sobib kõige paremini sinu vajadustega, ja kirjutada koodi, mis on selge, lühike ja globaalsele publikule kergesti mõistetav.