Class basic syntaxis

admin

in objectgeoriënteerd programmeren is een class een uitbreidbare programmacode-sjabloon voor het maken van objecten, die initiële waarden geeft voor status (member variabelen) en implementaties van gedrag (member functies of methoden).

in de praktijk moeten we vaak veel objecten van dezelfde soort maken, zoals gebruikers, goederen of wat dan ook.

zoals we al weten uit het hoofdstuk Constructor, operator “new”, kan new function hierbij helpen.,

maar in het moderne JavaScript is er een meer geavanceerde “class”-constructie, die geweldige nieuwe functies introduceert die nuttig zijn voor objectgeoriënteerd programmeren.

de “klasse” syntaxis

de basissyntaxis is:

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

gebruik dan new MyClass()om een nieuw object te maken met alle genoemde methoden.

de methode constructor() wordt automatisch aangeroepen door new, dus we kunnen het object daar initialiseren.,

bijvoorbeeld:

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

wanneer new User("John") wordt aangeroepen:

  1. Een nieuwe object is aangemaakt.
  2. de constructor draait met het gegeven argument en wijst het toe aan this.name.

… dan kunnen we object methoden aanroepen, zoals user.sayHi().

geen komma tussen klassemethoden

een veelvoorkomende valkuil voor beginnende ontwikkelaars is het plaatsen van een komma tussen klassemethoden, wat zou resulteren in een syntaxfout.,

de notatie hier mag niet worden verward met objectletters. Binnen de klasse zijn geen komma ‘ s vereist.

Wat is een klasse?

dus, wat is een class? Dat is geen geheel nieuwe entiteit op taalniveau, zoals je zou denken.

laten we elke magie onthullen en zien wat een klasse echt is. Dat zal helpen om veel complexe aspecten te begrijpen.

in JavaScript is een klasse een soort functie.,

kijk hier eens:

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

Wat class User {...}construct doet is:

  1. maakt een functie aan met de naam User, die het resultaat wordt van de klasse declaratie. De functiecode is afkomstig van de constructor methode (aangenomen leeg als we een dergelijke methode niet schrijven).
  2. slaat klassemethoden op, zoals sayHi, in User.prototype.,

Na new User object wordt gemaakt, wanneer we de methode noemen, is het afkomstig van het prototype, net zoals beschreven in het hoofdstuk F. prototype. Dus het object heeft toegang tot klassemethoden.,van class User verklaring:

Hier is de code om introspect het:

Niet alleen een syntactische suiker

Soms zeggen mensen dat class is een “syntactic sugar” (syntaxis die wordt ontworpen om het gemakkelijker te maken om te lezen, maar niet introduceren van iets nieuws), omdat we eigenlijk zou kunnen verklaren zonder een class sleutelwoord bij alle:

Het resultaat van deze definitie is het ongeveer hetzelfde., Er zijn dus inderdaad redenen waarom class kan worden beschouwd als een syntactische suiker om een constructor samen met zijn prototype methoden te definiëren.

toch zijn er belangrijke verschillen.

  1. eerst wordt een functie aangemaakt door class gelabeld met een speciale interne eigenschap ]:"classConstructor". Dus het is niet helemaal hetzelfde als het handmatig maken.

    De taalcontrole voor die eigenschap op verschillende plaatsen., Bijvoorbeeld, in tegenstelling tot een reguliere functie moet worden aangeroepen met new:

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

    verder een string representatie van een klasse constructor in de meeste JavaScript-engines wordt gestart met de “klasse…”

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

    Er zijn andere verschillen, we zullen ze binnenkort te zien.

  2. Klassenmethoden zijn niet-kwantificeerbaar.,Een klasse-definitie stelt enumerable vlag in op false voor alle methoden in de "prototype".

    dat is goed, want als we for..in over een object hebben, willen we meestal geen class methoden.

  3. klassen altijd use strict.Alle code binnen de class construct is automatisch in strikte modus.

bovendien brengt class syntaxis vele andere functies die we later zullen onderzoeken.,

Klassenuitdrukking

net als functies kunnen klassen worden gedefinieerd in een andere expressie, doorgegeven, geretourneerd, toegewezen, enz.

Hier is een voorbeeld van een klasse-expressie:

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

vergelijkbaar met benoemde functie-expressies, kunnen klassenuitdrukkingen een naam hebben.,

als een klasse-expressie een naam heeft, is deze alleen zichtbaar binnen de klasse:

We kunnen zelfs klassen dynamisch “on-demand” maken, zoals dit:

Getters/setters

net als letterlijke objecten, kunnen klassen getters / setters, berekende eigenschappen enz.bevatten.

Hier is een voorbeeld voor user.name geïmplementeerd met get/set:

technisch gezien werkt een dergelijke klasse declaratie door getters en setters aan te maken in User.prototype.,

berekende namen

Hier is een voorbeeld met een berekende methodenaam met haakjes :

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

dergelijke kenmerken zijn gemakkelijk te onthouden, omdat ze lijken op die van letterlijke objecten.

Klassevelden

oude browsers hebben mogelijk een polyfill

Klassevelden zijn een recente toevoeging aan de taal.

vroeger hadden onze klassen alleen methoden.

“Class fields” is een syntaxis die het mogelijk maakt om eigenschappen toe te voegen.,

bijvoorbeeld, laten we toevoegen name eigenschap class User:

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

Dus, we gewoon schrijven ” = ” in de verklaring, en dat is het.,

Het belangrijke verschil van klasse velden is dat ze zijn ingesteld op de individuele objecten, en niet User.prototype:

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

We kunnen ook waarden toekennen met behulp van meer complexe uitdrukkingen en functie-aanroepen:

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

het Maken van gebonden methoden met klasse velden

Zoals aangetoond in het hoofdstuk Functie bindende functies in JavaScript een dynamische this., Het hangt af van de context van het gesprek.

dus als een objectmethode wordt doorgegeven en aangeroepen in een andere context, zal this geen verwijzing meer zijn naar het object.

deze code toont bijvoorbeeld undefined:

het probleem wordt”losing this ” genoemd.

Er zijn twee benaderingen om het te repareren, zoals besproken in het hoofdstuk Functiebinding:

  1. Geef een wrapper-functie Door, zoals setTimeout(() => button.click(), 1000).
  2. Bind de methode aan object, bijvoorbeeld in de constructor.,

Class fields bieden een andere, vrij elegante syntaxis:

Het class field click = () => {...} wordt gemaakt op een per-object basis, Er is een aparte functie voor elk Button object, met this daarin refererend naar dat object. We kunnen button.click overal doorgeven, en de waarde van this zal altijd correct zijn.

dat is vooral handig in browseromgeving, voor gebeurtenisluisteraars.,

samenvatting

de syntaxis van de basisklasse ziet er als volgt uit:

MyClass is technisch een functie (degene die we leveren als constructor), terwijl methoden, getters en setters worden geschreven naar MyClass.prototype.

in de volgende hoofdstukken zullen we meer leren over klassen, inclusief overerving en andere functies.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *