olio-ohjelmointi, luokka on laajennettavissa ohjelma-koodi-malli luoda esineitä, jotka tarjoavat perus-arvot jäsenvaltio (member variables) ja toteutukset käyttäytyminen (jäsen toimintoja tai menetelmiä).

käytännössä, me usein tarve luoda monia esineitä samanlaista, kuten käyttäjät, tai tavaroiden tai mitä tahansa.

Kuten tiedämme jo luvussa Rakentaja, operaattori ”uusi”, new function voin auttaa siinä.,

Mutta moderni JavaScript, siellä on enemmän kehittynyt ”luokka” konstruktio, joka esittelee hienoja uusia ominaisuuksia, jotka ovat hyödyllisiä olio-ohjelmointi.

”luokka” syntax

perus syntaksi on:

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

Sitten käyttää new MyClass() jos haluat luoda uuden objektin, jossa kaikki luetellut menetelmät.

constructor() metodia kutsutaan automaattisesti new, niin voimme alustaa objektin siellä.,

esimerkiksi:

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

Kun new User("John") kutsutaan:

1. luodaan uusi olio.
2. constructor juoksee annettu argumentti ja määrittää sen this.name.

– voimme soittaa esine menetelmiä, kuten user.sayHi().

Mikä on luokka?

Niin, mitä tarkalleen on class? Se ei ole täysin uusi kielitason kokonaisuus, kuten voisi luulla.

paljastetaan mikä tahansa taika ja katsotaan mitä luokka oikeasti on. Se auttaa ymmärtämään monia monimutkaisia näkökohtia.

Javascriptissä luokka on eräänlainen funktio.,

katso:

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

class User {...} rakentaa todella on:

1. Luodaan funktio nimeltä User, joka on seurausta luokka ilmoitus. Funktiokoodi on otettu constructor – menetelmästä (oletettu tyhjäksi, jos emme kirjoita tällaista menetelmää).
2. Tallentaa luokan menetelmiä, kuten sayHi vuonna User.prototype.,

new User objekti syntyy, kun kutsumme sen menetelmää, se otetaan prototyypistä, kuten luvussa F. prototyyppi kuvataan. Esineellä on siis pääsy luokkamenetelmiin.,ja class User ilmoitus seuraavasti:

Tässä on koodi introspect se:

Ei vain syntaktista sokeria

Joskus ihmiset sanovat, että class on ”syntaktista sokeria” (syntaksi, joka on suunniteltu tekemään asioita helpompaa lukea, mutta ei esittele mitään uutta), koska emme voisi oikeastaan julistaa sama ilman class avainsana ollenkaan:

tämän seurauksena määritelmä on suunnilleen sama., Niin, on todellakin syytä, miksi class voidaan pitää syntaktinen sokeri määritellä rakentaja yhdessä sen prototyyppi menetelmiä.

Edelleen, on merkittäviä eroja.

1. Ensimmäinen, toiminto luoma class on merkitty erityinen sisäinen ominaisuus ]:"classConstructor". Joten se ei ole täysin sama kuin luoda sen manuaalisesti.

   kyseisen kiinteistön kielitarkistukset eri paikoissa., Esimerkiksi, toisin kuin säännöllinen funktio, sen täytyy olla nimeltään new:

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

   Myös, merkkijono edustus luokan rakentaja useimmissa JavaScript-moottorit alkaa ”class…”

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

   On olemassa muita eroja, näemme heidät pian.

2. – Luokan menetelmät ovat ei-numeroituvia.,Luokka määritelmä sarjaa enumerable lipun false kaikki menetelmät "prototype".

   Se on hyvä, koska jos me for..in yli objektin, me yleensä halua sen luokan menetelmiä.

3. Luokat aina use strict.Kaikki luokan Konstruktion sisällä oleva koodi on automaattisesti tiukassa tilassa.

Lisäksi class syntax tuo monia muita ominaisuuksia, jotka me tutkia myöhemmin.,

Luokan Ilmaus

Aivan kuten toiminnot, luokat voidaan määritellä sisällä toinen ilmaus, kulkivat ympäri, palauttaa, liittää, jne.

Tässä on esimerkki luokan ilmaus:

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

Samanlainen Nimetty Toiminto Ilmaisuja, luokan ilmaukset voivat olla nimi.,

Jos luokan ilme on nimi, se on näkyvissä luokan sisään vain:

– Emme voi edes tehdä dynaamisesti luokat ”on-demand”, kuten tämä:

Getters/setters

Aivan kuten kirjaimellinen esineitä, luokat voivat sisältää getters/setters, lasketaan ominaisuuksia jne.

Tässä on esimerkki user.name toteutettu get/set:

Teknisesti, kuten luokan-ilmoitus toimii luomalla getter-ja setter-in User.prototype.,

Laskettu nimet

Tässä on esimerkki, jossa on laskettu menetelmän nimi käyttäen suluissa :

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

Tällaisia ominaisuuksia ovat helppo muistaa, koska ne muistuttavat, että kirjaimellinen esineitä.

Luokan kentät

aiemmin luokissamme oli vain menetelmiä.

”Luokkakentät” on syntaksi, joka mahdollistaa minkä tahansa ominaisuuden lisäämisen.,

esimerkiksi, katsotaanpa lisätä name omaisuutta class User:

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

Joten me vain kirjoittaa ” = ” ilmoitus, ja se on siinä.,

merkittävä ero luokan kentät on, että ne ovat asetettu yksittäisiä esineitä, ei User.prototype:

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

Voimme myös määrittää arvoja käyttämällä enemmän monimutkaisia ilmaisuja ja funktiokutsut:

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

Tekee sidottu menetelmiä luokan kentille

Kuten on osoitettu luvussa Toiminto sitovia toimintoja JavaScript on dynaaminen this., Se riippuu puhelun asiayhteydestä.

Joten jos esine menetelmä on kulunut noin ja kutsutaan toisessa yhteydessä this ei olla viittaus sen kohde enää.

esimerkiksi, tämä koodi näyttää undefined:

ongelma on nimeltään ”losing this”.

On olemassa kaksi lähestymistapaa e, se, kuten edellä luvussa Toiminto sitova:

1. Pass kääre-toiminto, kuten setTimeout(() => button.click(), 1000).
2. sitoo menetelmän objektiksi esimerkiksi konstruktorissa.,

– Luokan kentät tarjoavat toinen, varsin elegantti syntaksi:

luokka-kenttään click = () => {...} luodaan per-objektin perusteella, ei erillinen toiminto jokaiselle Button objekti, jossa this sisällä se viittaa, että objekti. Voimme välittää button.click noin missä tahansa, ja arvo this tulee aina olla oikea.

se on erityisen hyödyllistä selainympäristössä, tapahtumakuuntelijoille.,

Tiivistelmä

basic class syntaksi näyttää tältä:

MyClass on teknisesti toiminto (yksi, että voimme tarjota niin constructor), kun taas menetelmät, getter-ja setter on kirjoitettu MyClass.prototype.

seuraavissa luvuissa opimme lisää luokista, kuten perinnöstä ja muista ominaisuuksista.