i objektorienteret programmering er en klasse en udvidelig programkode-skabelon til oprettelse af objekter, der giver indledende værdier for tilstand (medlemsvariabler) og implementeringer af adfærd (medlemsfunktioner eller-metoder).

i praksis er vi ofte nødt til at oprette mange objekter af samme art, som brugere eller varer eller hvad som helst.

som vi allerede ved fra kapitelkonstruktøren, kan operatøren “ny”, new function hjælpe med det.,

men i det moderne JavaScript er der en mere avanceret “klasse”-konstruktion, der introducerer fantastiske nye funktioner, der er nyttige til objektorienteret programmering.

Den “klasse” syntaks

Den grundlæggende syntaks er:

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

Derefter bruge new MyClass() for at oprette et nyt objekt med alle de nævnte metoder.

constructor() – metoden kaldes automatisk afnew, så vi kan initialisere objektet der.,

For eksempel:

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

Når new User("John") kaldes:

1. Et nyt objekt er oprettet.
2. constructor kører med det givne argument og tildeler det tilthis.name.

…så kan vi kalde objektmetoder, såsom user.sayHi().

Hvad er en klasse?

Så hvad er en class? Det er ikke en helt ny enhed på sprogniveau, som man måske tror.

lad os afsløre enhver magi og se, hvad en klasse virkelig er. Det vil hjælpe med at forstå mange komplekse aspekter.i JavaScript er en klasse en slags funktion.,

Her, tag et kig:

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

Hvad class User {...} konstruere virkelig gør, er at:

1. Opretter en funktion med navnet User, der bliver resultatet af klassen erklæring. Funktionskoden er taget fra constructor – metoden (antages tom, hvis vi ikke skriver en sådan metode).
2. gemmer klassemetoder, såsom sayHi, i User.prototype.,

efternew User objektet oprettes, når vi kalder dets metode, er det taget fra prototypen, ligesom beskrevet i kapitel F. prototype. Så objektet har adgang til klassemetoder.,af class User erklæring som:

Her er koden til at introspect det:

Ikke bare en syntaktisk sukker

nogle gange folk sige, at class er et “syntaktisk sukker” (syntaks, der er designet til at gøre det lettere at læse, men ikke indføre noget nyt), fordi vi faktisk kunne erklære det samme uden class søgeord på alle:

resultatet af denne definition, er, om det samme., Så der er faktisk grunde til, at class kan betragtes som et syntaktisk sukker til at definere en konstruktør sammen med dets prototypemetoder.

Der er stadig vigtige forskelle.

1. først er en funktion oprettet af classmærket med en særlig intern egenskab ]:"classConstructor". Så det er ikke helt det samme som at oprette det manuelt.

   sproget kontrollerer for den pågældende ejendom på forskellige steder., For eksempel, i modsætning til en regelmæssig funktion, der skal kaldes med new:

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

   en string repræsentation af en klasse konstruktør i de fleste JavaScript-motorer starter med “klasse…”

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

   Der er andre forskelle, vi vil se dem snart.

2. klassemetoder er ikke-enumerable.,En klasse-definition sæt enumerable flag til false for alle metoder i "prototype".

   det er godt, for hvis vi for..in over et objekt, ønsker vi normalt ikke dets klassemetoder.

3. Klasser altid use strict.Alle kode inde i klassen konstruere er automatisk i streng tilstand.

desuden class syntaks bringer mange andre funktioner, som vi vil udforske senere.,

Klasseudtryk

ligesom funktioner kan klasser defineres i et andet udtryk, sendes rundt, returneres, tildeles osv.

Her er et eksempel på en klasse udtryk:

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

der Ligner Opkaldt Funktion Udtryk, klasse udtryk kan have et navn.,

Hvis en klasse udtryk har et navn, er det synlige inde i klassen kun:

Vi kan selv gøre klasser dynamisk “on-demand”, som dette:

Getters/setters

ligesom bogstavelig objekter, klasser kan omfatte getters/setters, beregnede egenskaber osv.

Her er et eksempel for user.name gennemføres ved hjælp af get/set:

Teknisk set sådan klasse erklæring virker ved at skabe getters og setters i User.prototype.,

Beregnede navne

Her er et eksempel med en beregnet metode navn ved hjælp af parenteser :

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

Disse elementer er let at huske, som ligner de, der bogstavelig objekter.

klassefelter

tidligere havde vores klasser kun metoder.

“Class fields” er en syntaks, der gør det muligt at tilføje nogen egenskaber.,

For eksempel, lad os tilføje name ejendom til class User:

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

Så, vi blot skrive ” = ” i erklæringen, og det er det.,

Den vigtigste forskel på klassens felter er, at de er indstillet på de enkelte objekter, ikke User.prototype:

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

Vi kan også tildele værdier ved hjælp af mere komplekse udtryk og funktion opkald:

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

Gør bundet metoder med klassens felter

Som påvist i kapitel Funktion bindende funktioner i JavaScript har en dynamisk this., Det afhænger af konteksten af opkaldet.

så hvis en objektmetode sendes rundt og kaldes i en anden sammenhæng, vil this ikke være en henvisning til dens objekt mere.

For eksempel, denne kode vil vise undefined:

problemet kaldes “at miste this“.

Der er to metoder til fastsættelse af det, som diskuteret i kapitelfunktionsbindingen:

1. Pass en wrarapper-funktion, såsom setTimeout(() => button.click(), 1000).
2. Bind metoden til objekt, f.eks. i konstruktøren.,

Klasse felter give en anden, ganske elegant syntax:

feltet klasse click = () => {...} er skabt på en per-objekt grundlag, der er en separat funktion for hvert Button objekt, med this inde i det refererer til objektet. Vi kan passere button.click overalt, og værdien af this vil altid være korrekt.

det er især nyttigt i Bro .ser miljø, for event lyttere.,

Oversigt

Den grundlæggende klasse syntaks der ligner dette:

MyClass teknisk set er en funktion (den vi giver som constructor), mens metoder, getters og setters er skrevet til MyClass.prototype.

i de næste kapitler lærer vi mere om klasser, herunder arv og andre funktioner.