I objekt-orientert programmering, en klasse er et utvidbart program-kode-mal for å opprette objekter, og gir deg opprinnelige verdier for staten (medlem variabler) og implementeringer av atferd (medlem funksjoner eller metoder).

I praksis, har vi ofte behov for å opprette mange objekter av samme type, som brukere, eller varer, eller hva som helst.

Som vi allerede vet fra kapittel Konstruktør, operatør «nye», new function kan hjelpe til med det.,

Men i det moderne JavaScript, det er en mer avansert «klasse» konstruere, som introduserer nye funksjoner som er nyttig for objekt-orientert programmering.

«klasse» syntaks

Den grunnleggende syntaksen er:

– >

class MyClass { // class methods constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ...}

Deretter kan du bruke new MyClass() for å opprette et nytt objekt med alle de nevnte metoder.

constructor() metoden kalles automatisk av new, slik at vi kan initialisere objektet der.,

For eksempel slik:

– >

class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// Usage:let user = new User("John");user.sayHi();

Ved new User("John") kalles:

1. Et nytt objekt opprettes.
2. constructor går med det gitte argumentet og tilordner den til this.name.

…Så vi kan ringe objekt metoder, som for eksempel user.sayHi().

Hva er en klasse?

Så, hva er egentlig en class? Det er ikke et helt nytt språk-nivå enhet, som man kanskje tror.

La oss avsløre noen magi og se hva en klasse virkelig er. Som vil hjelpe i å forstå de mange komplekse aspekter.

I JavaScript, en klasse er en slags funksjon.,

Her, ta en titt:

– >

class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// proof: User is a functionalert(typeof User); // function

Hva class User {...} konstruere virkelig er:

1. Oppretter en funksjon som heter User, som blir resultatet av klasse-erklæringen. Funksjonen koden er hentet fra constructor metode (antatt tom hvis vi ikke skrive en slik metode).
2. Lagrer klasse metoder, som for eksempel sayHi i User.prototype.,

Etter new User objektet er opprettet, når vi kaller sin metode, det er hentet fra prototypen, akkurat som beskrevet i kapittel F. prototype. Så objektet har tilgang til klasse metoder.,av class User erklæring som:

Her er koden for å introspect det:

Ikke bare en syntaktisk sukker

noen Ganger folk sier at class er en «syntaktisk sukker» (syntaks som er designet for å gjøre ting lettere å lese, men ikke innføre noe nytt), fordi vi faktisk kunne erklære den samme uten class søkeord i det hele tatt:

resultatet av denne definisjonen er omtrent den samme., Så, det er faktisk grunner til at class kan betraktes som en syntaktisk sukker for å definere en konstruktør sammen med dens prototype metoder.

Likevel, det er viktige forskjeller.

1. Først, en funksjon som er opprettet av class er merket med en spesiell intern eiendel ]:"classConstructor". Så det er ikke helt det samme som å lage det manuelt.

   språk sjekker for at eiendel i en rekke steder., For eksempel, i motsetning til en vanlig funksjon, det må kalles med new:

   – >

   class User { constructor() {}}alert(typeof User); // functionUser(); // Error: Class constructor User cannot be invoked without 'new'

   Også, en streng representasjon av en klasse konstruktør i de fleste JavaScript motorene starter med «klasse…»

   – >

   class User { constructor() {}}alert(User); // class User { ... }

   Det er andre forskjeller, vil vi se dem snart.

2. Klasse metoder er ikke opplistet.,En klasse definisjon angir enumerable flagget til false for alle metoder i "prototype".

   Det er bra, fordi hvis vi for..in over et objekt, vi vanligvis ikke ønsker sin klasse metoder.

3. Klasser alltid use strict.All koden i klasse konstruere automatisk i streng modus.

i Tillegg, class syntaks bringer mange andre funksjoner som vi vil utforske senere.,

Klasse Uttrykk

Akkurat som funksjoner, klasser kan defineres inn i et annet uttrykk, som gikk rundt, tilbake, tildelt, etc.

Her er et eksempel på en klasse uttrykk:

– >

let User = class { sayHi() { alert("Hello"); }};

Lik Funksjon som Heter Uttrykk, klasse uttrykk kan ha et navn.,

Hvis en klasse uttrykk har et navn, det er synlig inne i klassen bare:

Vi kan selv gjøre klasser dynamisk «on-demand», som dette:

Getters/bidra

Akkurat som bokstavelig objekter, klasser kan omfatte getters/bidra, beregnet egenskaper etc.

Her er et eksempel for user.name implementert ved hjelp av get/set:

Teknisk, slik klasse erklæring fungerer ved å opprette getters og bidra i User.prototype.,

Beregnede navn

Her er et eksempel med en beregnet metode navn ved hjelp av braketter :

– >

class User { () { alert("Hello"); }}new User().sayHi();

Slike funksjoner er lett å huske, så de ligner som av ordrette objekter.

Klasse felt

Tidligere, våre klasser bare hadde metoder.

«Class felt» er en syntaks som gjør det mulig å legge til egenskaper.,

For eksempel, la oss legge til en name eiendom til class User:

– >

class User { name = "John"; sayHi() { alert(`Hello, ${this.name}!`); }}new User().sayHi(); // Hello, John!

Så, vi bare skrive » = » i erklæringen, og det er det.,

Den viktigste forskjellen klasse feltene er at de er satt på individuelle objekter, ikke User.prototype:

– >

class User { name = "John";}let user = new User();alert(user.name); // Johnalert(User.prototype.name); // undefined

Vi kan også tilordne verdier ved hjelp av mer komplekse uttrykk og funksjon samtaler:

– >

class User { name = prompt("Name, please?", "John");}let user = new User();alert(user.name); // John

Gjør bundet metoder med klasse felt

Som vist i kapittel Funksjon bindende funksjoner i JavaScript har en dynamisk this., Det kommer an på konteksten for samtalen.

Så hvis et objekt metoden er gått rundt og kalte i en annen sammenheng, this vil ikke være en referanse til objektet noe mer.

For eksempel, denne koden vil vise undefined:

problemet er kalt «å miste this«.

Det er to tilnærminger til å fikse det, som diskutert i kapittel Funksjon binding:

1. Passere en wrapper-funksjonen, som for eksempel setTimeout(() => button.click(), 1000).
2. Binde metode for å objektet, f.eks. i konstruktøren.,

Klasse feltene gir en annen, ganske elegant syntaks:

klassen feltet click = () => {...} er opprettet på en per-objekt, det er en egen funksjon for hver Button objekt, med this i det refererer til dette objektet. Vi kan passere button.click rundt hvor som helst, og verdien av this vil alltid være riktig.

Det er spesielt nyttig i nettleseren miljø, for hendelsen lyttere.,

Oppsummering

Den grunnleggende klassen syntaks ser ut som dette:

MyClass er teknisk sett en funksjon (den som gir vi som constructor), mens metoder, getters og bidra skrevet MyClass.prototype.

I de neste kapitlene vil vi lære mer om klasser, herunder arv og andre funksjoner.