JavaScript objektorientētā programmēšana: Klases mantošanas modeļu apgūšana

Objektorientētā programmēšana (OOP) ir spēcīga paradigma, kas ļauj izstrādātājiem strukturēt savu kodu modulārā un atkārtoti lietojamā veidā. Mantošana, kas ir OOP pamatkoncepcija, ļauj mums izveidot jaunas klases, pamatojoties uz esošajām, pārmantojot to īpašības un metodes. Tas veicina koda atkārtotu izmantošanu, samazina dublēšanos un uzlabo uzturēšanu. JavaScript valodā mantošana tiek panākta, izmantojot dažādus modeļus, katram no kuriem ir savas priekšrocības un trūkumi. Šajā rakstā tiek sniegts visaptverošs šo modeļu apskats, sākot no tradicionālās prototipu mantošanas līdz modernajām ES6 klasēm un tālāk.

Pamatu izpratne: Prototipi un prototipu ķēde

Savā būtībā JavaScript mantošanas modelis balstās uz prototipiem. Katram JavaScript objektam ir piesaistīts prototipa objekts. Kad mēģināt piekļūt objekta īpašībai vai metodei, JavaScript vispirms to meklē tieši pašā objektā. Ja to neizdodas atrast, tas meklē objekta prototipā. Šis process turpinās augšup pa prototipu ķēdi, līdz īpašība tiek atrasta vai tiek sasniegts ķēdes gals (kas parasti ir `null`).

Šī prototipu mantošana atšķiras no klasiskās mantošanas, kas sastopama tādās valodās kā Java vai C++. Klasiskajā mantošanā klases manto tieši no citām klasēm. Prototipu mantošanā objekti manto tieši no citiem objektiem (vai, precīzāk, no prototipu objektiem, kas saistīti ar šiem objektiem).

`__proto__` īpašība (novecojusi, bet svarīga izpratnei)

Lai gan oficiāli novecojusi, `__proto__` īpašība (divas apakšsvītras proto divas apakšsvītras) nodrošina tiešu veidu, kā piekļūt objekta prototipam. Lai gan to nevajadzētu izmantot produkcijas kodā, tās izpratne palīdz vizualizēt prototipu ķēdi. Piemēram:

            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
              
            
          

Šajā piemērā `dog` manto `makeSound` metodi no `animal` caur prototipu ķēdi.

`Object.getPrototypeOf()` un `Object.setPrototypeOf()` metodes

Šīs ir ieteicamās metodes, lai attiecīgi iegūtu un iestatītu objekta prototipu, piedāvājot standartizētāku un uzticamāku pieeju salīdzinājumā ar `__proto__`. Apsveriet šo metožu izmantošanu prototipu attiecību pārvaldīšanai.

            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
              
            
          

Klasiskās mantošanas simulācija ar prototipiem

Lai gan JavaScript nav klasiskās mantošanas tādā pašā veidā kā dažās citās valodās, mēs to varam simulēt, izmantojot konstruktora funkcijas un prototipus. Šī pieeja bija izplatīta pirms ES6 klašu ieviešanas.

Konstruktora funkcijas

Konstruktora funkcijas ir parastas JavaScript funkcijas, kuras tiek izsauktas, izmantojot `new` atslēgvārdu. Kad konstruktora funkcija tiek izsaukta ar `new`, tā izveido jaunu objektu, iestata `this`, lai tas atsauktos uz šo objektu, un netieši atgriež jauno objektu. Konstruktora funkcijas `prototype` īpašība tiek izmantota, lai definētu jaunā objekta prototipu.

            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
              
            
          

Paskaidrojums:

• `Animal.call(this, name)`: Šī rinda izsauc `Animal` konstruktoru `Dog` konstruktora ietvaros, iestatot `name` īpašību jaunajam `Dog` objektam. Tā mēs inicializējam vecākklasē definētās īpašības. `.call` metode ļauj mums izsaukt funkciju ar konkrētu `this` kontekstu.
• `Dog.prototype = Object.create(Animal.prototype)`: Šis ir mantošanas iestatīšanas kodols. `Object.create(Animal.prototype)` izveido jaunu objektu, kura prototips ir `Animal.prototype`. Pēc tam mēs piešķiram šo jauno objektu `Dog.prototype`. Tas izveido mantošanas attiecību: `Dog` instances mantos īpašības un metodes no `Animal` prototipa.
• `Dog.prototype.constructor = Dog`: Pēc prototipa iestatīšanas `constructor` īpašība `Dog.prototype` nepareizi norādīs uz `Animal`. Mums tas ir jāatiestata, lai tas norādītu uz pašu `Dog`. Tas ir svarīgi, lai pareizi identificētu `Dog` instanču konstruktoru.
• `instanceof`: `instanceof` operators pārbauda, vai objekts ir noteiktas konstruktora funkcijas (vai tās prototipu ķēdes) instance.

Kāpēc `Object.create`?

`Object.create(Animal.prototype)` izmantošana ir būtiska, jo tā izveido jaunu objektu, neizsaucot `Animal` konstruktoru. Ja mēs izmantotu `new Animal()`, mēs netīši izveidotu `Animal` instanci kā daļu no mantošanas iestatīšanas, kas nav tas, ko mēs vēlamies. `Object.create` nodrošina tīru veidu, kā izveidot prototipu saikni bez nevēlamiem blakusefektiem.

ES6 klases: Sintaktiskais cukurs prototipu mantošanai

ES6 (ECMAScript 2015) ieviesa `class` atslēgvārdu, nodrošinot pazīstamāku sintaksi klašu definēšanai un mantošanai. Tomēr ir svarīgi atcerēties, ka ES6 klases joprojām pamatā balstās uz prototipu mantošanu. Tās nodrošina ērtāku un lasāmāku veidu, kā strādāt ar prototipiem.

            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
              
            
          

Paskaidrojums:

• `class Animal { ... }`: Definē klasi ar nosaukumu `Animal`.
• `constructor(name) { ... }`: Definē `Animal` klases konstruktoru.
• `extends Animal`: Norāda, ka `Dog` klase manto no `Animal` klases.
• `super(name)`: Izsauc vecākklases (`Animal`) konstruktoru, lai inicializētu `name` īpašību. `super()` ir jāizsauc pirms piekļuves `this` atvasinātās klases konstruktorā.

ES6 klases nodrošina tīrāku un kodolīgāku sintaksi objektu izveidei un mantošanas attiecību pārvaldīšanai, padarot kodu vieglāk lasāmu un uzturamu. `extends` atslēgvārds vienkāršo apakšklašu izveides procesu, un `super()` atslēgvārds nodrošina vienkāršu veidu, kā izsaukt vecākklases konstruktoru un metodes.

Metodes pārrakstīšana

Gan klasiskā simulācija, gan ES6 klases ļauj pārrakstīt metodes, kas mantotas no vecākklases. Tas nozīmē, ka jūs varat nodrošināt specializētu metodes implementāciju bērnklasē.

            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
              
            
          

Šajā piemērā `Dog` klase pārraksta `makeSound` metodi, nodrošinot savu implementāciju, kas izvada "Woof!".

Ārpus klasiskās mantošanas: Alternatīvi modeļi

Lai gan klasiskā mantošana ir izplatīts modelis, tas ne vienmēr ir labākais risinājums. Dažos gadījumos alternatīvi modeļi, piemēram, miksīni un kompozīcija, piedāvā lielāku elastību un ļauj izvairīties no iespējamām mantošanas kļūmēm.

Miksīni

Miksīni ir veids, kā pievienot funkcionalitāti klasei, neizmantojot mantošanu. Miksīns ir klase vai objekts, kas nodrošina metožu kopu, ko var "iemaisīt" citās klasēs. Tas ļauj atkārtoti izmantot kodu vairākās klasēs, neveidojot sarežģītu mantošanas hierarhiju.

            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
              
            
          

Šajā piemērā `barkMixin` nodrošina `bark` metodi, kas tiek pievienota `Dog` klasei, izmantojot `Object.assign`. Līdzīgi `flyMixin` nodrošina `fly` metodi, kas tiek pievienota `Bird` klasei. Tas ļauj abām klasēm iegūt vēlamo funkcionalitāti, nebūdamas saistītas caur mantošanu.

Sarežģītākas miksīnu implementācijas varētu izmantot rūpnīcfunkcijas vai dekoratorus, lai nodrošinātu lielāku kontroli pār iemaisīšanas procesu.

Kompozīcija

Kompozīcija ir vēl viena alternatīva mantošanai. Tā vietā, lai mantotu funkcionalitāti no vecākklases, klase var saturēt citu klašu instances kā komponentus. Tas ļauj veidot sarežģītus objektus, kombinējot vienkāršākus objektus.

            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
              
            
          

Šajā piemērā `Car` klase sastāv no `Engine` un `Wheels`. Tā vietā, lai mantotu no šīm klasēm, `Car` klase satur to instances un izmanto to metodes, lai īstenotu savu funkcionalitāti. Šī pieeja veicina vāju sasaisti un nodrošina lielāku elastību, kombinējot dažādus komponentus.

Labākās prakses JavaScript mantošanai

• Priekšroku dodiet kompozīcijai, nevis mantošanai: Kad vien iespējams, dodiet priekšroku kompozīcijai, nevis mantošanai. Kompozīcija piedāvā lielāku elastību un ļauj izvairīties no ciešās sasaistes, kas var rasties mantošanas hierarhijās.
• Izmantojiet ES6 klases: Izmantojiet ES6 klases tīrākai un lasāmākai sintaksei. Tās nodrošina modernāku un uzturamāku veidu, kā strādāt ar prototipu mantošanu.
• Izvairieties no dziļām mantošanas hierarhijām: Dziļas mantošanas hierarhijas var kļūt sarežģītas un grūti saprotamas. Uzturiet mantošanas hierarhijas seklas un fokusētas.
• Apsveriet miksīnus: Izmantojiet miksīnus, lai pievienotu funkcionalitāti klasēm, neveidojot sarežģītas mantošanas attiecības.
• Izprotiet prototipu ķēdi: Stabila prototipu ķēdes izpratne ir būtiska, lai efektīvi strādātu ar JavaScript mantošanu.
• Pareizi izmantojiet `Object.create`: Simulējot klasisko mantošanu, izmantojiet `Object.create(Parent.prototype)`, lai izveidotu prototipu attiecību, neizsaucot vecākklases konstruktoru.
• Koriģējiet konstruktora īpašību: Pēc prototipa iestatīšanas koriģējiet `constructor` īpašību bērnklases prototipā, lai tas norādītu uz bērnklases konstruktoru.

Globāli apsvērumi par koda stilu

Strādājot globālā komandā, ņemiet vērā šādus punktus:

• Konsekventas nosaukumu piešķiršanas konvencijas: Izmantojiet skaidras un konsekventas nosaukumu piešķiršanas konvencijas, kuras ir viegli saprotamas visiem komandas locekļiem, neatkarīgi no viņu dzimtās valodas.
• Koda komentāri: Rakstiet visaptverošus koda komentārus, lai izskaidrotu sava koda mērķi un funkcionalitāti. Tas ir īpaši svarīgi sarežģītām mantošanas attiecībām. Apsveriet iespēju izmantot dokumentācijas ģeneratoru, piemēram, JSDoc, lai izveidotu API dokumentāciju.
• Internacionalizācija (i18n) un lokalizācija (l10n): Ja jūsu lietojumprogrammai jāatbalsta vairākas valodas, apsveriet, kā mantošana varētu ietekmēt jūsu i18n un l10n stratēģijas. Piemēram, jums varētu nākties pārrakstīt metodes apakšklasēs, lai apstrādātu dažādas valodai specifiskas formatēšanas prasības.
• Testēšana: Rakstiet rūpīgus vienībtestus, lai nodrošinātu, ka jūsu mantošanas attiecības darbojas pareizi un ka visas pārrakstītās metodes darbojas kā paredzēts. Pievērsiet uzmanību robežgadījumu un iespējamo veiktspējas problēmu testēšanai.
• Koda pārskatīšana: Veiciet regulāras koda pārskatīšanas, lai nodrošinātu, ka visi komandas locekļi ievēro labākās prakses un ka kods ir labi dokumentēts un viegli saprotams.

Nobeigums

JavaScript mantošana ir spēcīgs rīks atkārtoti lietojama un uzturama koda veidošanai. Izprotot dažādus mantošanas modeļus un labākās prakses, jūs varat izveidot stabilas un mērogojamas lietojumprogrammas. Neatkarīgi no tā, vai izvēlaties izmantot klasisko simulāciju, ES6 klases, miksīnus vai kompozīciju, galvenais ir izvēlēties modeli, kas vislabāk atbilst jūsu vajadzībām, un rakstīt kodu, kas ir skaidrs, kodolīgs un viegli saprotams globālai auditorijai.