Objektorienterad programmering i Javascript (ES5 & ES6) förklaras.

OOP-objektorienterad programmering är i allmänhet mycket användbar. Det hjälper utvecklare att modellera verkliga saker som vi vill representera i vår kod, och / eller ge ett enkelt sätt att komma åt funktionalitet som annars skulle vara svårt eller omöjligt att använda sig av.att få en fullständig förståelse för hur OOP fungerar i javascript är lite svårt, särskilt i ES5-syntax, ES6-klassen gjorde det mycket lättare att använda objektkonstruktör men som utvecklare kommer vi att stöta på ES5-objektprototypkoder längs vår resa och om du inte vet, ES6-klass, fungerar som objektprototyper under huven.

denna artikel kommer att förklara javascript-objekt i ES5 och ES6 syntax. Håll ögonen öppna!

varför använda OBJECT CONSTRUCTOR NOTATION?

Du måste ha ifrågasatt behovet av att använda objektkonstruktör och inte hålla fast vid objektbokstäver. Tja, objektbokstäver är enkla och raka framåt för att förstå men låt oss tänka på ett scenario där vi vill skapa ett objekt från data som erhållits från ett inmatningsfält, till exempel; Vi har en webbplats och på vår webbplats ett formulärfält som begär namn, e-post, telefonnummer och adress för våra användare. Vi vill använda data från formulärfältet för att skapa ett objekt som ett sätt att hålla användardata tillsammans och sedan skapa en profil för varje användare och se till att varje användare ska ha samma egenskaper(i det här fallet namn, e-post, nummer och adress). Att använda objektbokstavlig notation kräver att vi skapar ett objekt varje gång för varje användare, till exempel från vår form fick vi dessa data från tre (3) användare:

// 1st userconst user1 = { name: 'Precious', email: '[email protected]', number: '+234-810-5025-740', address: 'Earth'}// 2nd Userconst user2 = { name: 'Frank', email: '[email protected]', number: '+234-800-5525-540', address: 'Jupiter'}// 3rd Userconst user3 = { name: 'Charles', email: '[email protected]', number: '+234-810-4985-376', address: 'Mars'}

koden är repetitiv och det är mot torr(upprepa inte dig själv) principen om programmering och vi vill inte ha det. Den perfekta lösningen på det är att använda object constructor notation, och sedan göra instanser av objektet. Låt oss nu skriva ovanstående kod med hjälp av object constructor notation och hur man gör instanser av ett objekt:-

// Object Constructor(ES5)function User(name, email, number, address){ this.name = name; this.email = email; this.number= number; this.address = address;}// Instances// 1st userconst user1 = new User('Precious', '[email protected]', '+234-810-5025-740', 'Earth');// 2nd userconst user2 = new User('Frank', '[email protected]', '+234-800-5525-540', 'Jupiter');// 3rd Userconst user3 = new User('Charles', '[email protected]', '+234-810-4985-376', 'Mars');

från ovanstående kod skapade vi just en konstruktörsfunktion som som namnet antyder är en funktion som konstruerar objektinstanser för att skapa objekt från de data som varje användare skickade i formuläret. Det är torrt och rent med konstruktörnotationen, och värden från objektet kan nås med samma syntax

// OBJECT LITERAL NOTATION// To get the name of the first user. console.log(user1.name) // Precious// OBJECT CONSTRUCTOR NOTATION(ES5)// To get the name of the first user. console.log(user1.name) // Precious

låt oss förklara några nyckelord som används i konstruktörnotationen.

  1. det här nyckelordet: Om du inte vet förut nu hänvisar detta nyckelord i konstruktörsfunktionen ovan till själva objektet, dvs användaren, vilket betyder att säga this.name = namn vi menar namnegenskapen för den användaren ska ställas in till värdet för parameternamnet. detta betyder faktiskt olika saker i olika sammanhang men inuti objektkonstruktören är det som anges ovan

  2. det nya nyckelordet används helt enkelt för att instantiera(skapa) ett nytt objekt från konstruktören.

OBJEKTKONSTRUKTÖR i ES5 och ES6

  • ES5 Syntax

    1. prototyp och prototyparv:vi har tittat på hur objektkonstruktör skrivs i ES5-syntax låt oss nu titta på vad en objektprototyp är. Syntax:
function Dog(name, age){ // Properties this.name = name; this.age = age; // Method this.canBark = function(){ if(this.age => '180 days'){ return 'YES'; } else{ return 'NO'; } }}

metoden i konstruktörsfunktionen kan bättre skrivas i javascript genom att skriva den som en prototyp så här:

function Dog(name, age){ // Properties this.name = name; this.age = age;}// Object Prototype Dog.prototype.canBark = function(){ if(this.age => '180 days'){ return 'YES'; } else{ return 'NO'; } }

Nu, Vad är en Objektprototyp? En objektprototyp är ett objekt som är associerat med varje instans av ett objekt som standard i JavaScript. Prototyper gör att du enkelt kan definiera metoder för alla instanser av ett visst objekt. Detta är mycket användbart genom att metoden tillämpas på prototypen, så den lagras bara i minnet en gång, men varje instans av objektet har tillgång till det.
vi kan också lägga till en egenskap till objektet med hjälp av en prototyp som inte är möjligt normalt efter att förklara en konstruktör funktion, men det bör endast användas för egenskaper som vi vill att alla instanser att dela:

Dog.prototype.breed = 'German shepherd'

vad händer om vi har ett annat objekt som vi vill ha alla egenskaper och metoder för det första objektet och deras egna speciella egenskaper och/eller metoder, vad håller vi torrt i åtanke?
svaret på det tillhandahålls av prototyper arv som helt enkelt betyder ett objekt som ärver egenskaper och metoder för en annan. till exempel vill vi att en annan grupp hund ska ärva vissa egenskaper hos den första gruppen plus sina egna speciella egenskaper (hundvikt):

// Group 1function Group1(dogName, dogAge){ // Properties this.dogName = dogName; this.dogAge = dogAge;}// Object Prototype Group1.prototype.canBark = function(){ if(this.dogAge => '180 days'){ return 'YES'; } else{ return 'NO'; } }// Group 2function Group2(dogName, dogAge, dogWeight){ Group1.call(this, dogName, dogAge); this.dogWeight = dogWeight;}

För att ärva egenskaperna från den första gruppen använde vi call () – metoden som används för att ringa entreprenören vi vill ärva dess egenskaper, och det tar in detta som den första parametern och sedan parametrarna som ska ärvas från den konstruktören(i detta fall: – dogName och dogAge). Därefter ställer vi in objektets speciella egenskap(i detta fall: dogWeight);
Detta ärver bara egenskaperna och inte prototyperna. För att ärva prototyperna kommer vi att säga:

Group2.prototype = object.create(Group1.prototype);

med detta har vi gjort den 2: A gruppen av hundar har alla egenskaper och objekt i 1: A gruppen.

  • ES6 Syntax

    klasser i ES6 är samma som Object constructor-funktionen i ES5 under huven som betyder att båda fungerar på samma sätt bara att ES6 har en mycket bättre syntax som en av mina favorithandledare(Brad Traversy) kallar ”syntaktiskt socker” och även metoder görs direkt prototyper(görs tillgängliga för alla instanser av klassen). Låt oss nu dyka i ES6-klasser.

  1. förklara en ES6-klass & konstruktör:
class Person{ constructor(firstName, lastName, age){ this.firstName = firstName; this.lastName = lastName; // PROPERTIES this.age = age; } getAge(){ return `${this.firstName} ${this.lastName}; // METHOD } }

nyckelord förklaring:
A. Klass – används helt enkelt för att deklarera en klass(ES6-objekt) det följs av objektets namn.
B. konstruktör-precis som vi använde funktion i ES5 syntax. konstruktören används konstruera objektet.

OBS: värdet på objekt i ES^ kan nås på samma sätt som i ES5 och även instantiation har samma syntax.

så enkelt som det ser ut har vi just skrivit vårt första objekt med ES6-klass.

  1. arv:Arv i ES6 klass har en annan syntax och I innebär att använda 2 nya sökord sträcker sig och Super, låt oss ta en titt på det. om vi vill att ett kundobjekt ska ärva från personobjektet:
class Person{ constructor(firstName, lastName, age){ this.firstName = firstName; this.lastName = lastName; this.age = age; } getAge(){ return `${this.firstName} ${this.lastName}; } }class Customer extends Person{ constructor(firstName, lastName, age, memberShip){ Super(firstName, lastName, age) this.memberShip = memberShip; } }

nyckelord förklaring:
A. förlänger: anger att Kundobjektet ärver egenskaperna och metoderna för Personobjektet.
B. super: precis som i call () i ES5-objekt anger super egenskaperna ärvda men här behöver vi inte använda det här sökordet.

OBS: i ES6 behöver vi inte skriva en särskild kodrad för att ärva prototyper. som vi redan vet är prototyper tillgängliga för alla instanser av klassobjektet och så ärvda av den utvidgade klassen.

  1. slutligen, låt oss prata om en speciell metod som finns i ES6( statiska metoder):statiska metoder är praktiska när vi har metoder som inte använder argument som skickas in i instantiate(skapa en instans) en kopia av ett objekt och vi vill att alla instanser av objektet ska ha det. om vi till exempel vill att alla instanser av Personobjektet ska ha en tagg av”mänsklig”kommer vi att skriva:
class Person{ constructor(firstName, lastName, age){ this.firstName = firstName; this.lastName = lastName; this.age = age; } getAge(){ return `${this.firstName} ${this.lastName}; } static isHuman(){ return 'Is a Human' }}

lika enkelt som det. Men kom ihåg att statiska metoder definieras på själva klassen och inte på prototypen.

det betyder att du inte kan ringa en statisk metod med instansen men med klassen själv, t.ex.att ringa den statiska metoden i vår klass ovan kommer att vara

Person.isHuman(); 

slutsats:

Jag vet att den här artikeln var lång, men jag tror att du har förståelse för objekt i ES5 och ES6 syntax; vad objektprototyp betyder, hur man ärver från objekt i ES5 och ES6 ES6, liksom ES6 klassfunktioner och syntax.

Tack för att du läste, skål!!!.

Posted on

Lämna ett svar

Din e-postadress kommer inte publiceras.