az objektumorientált programozásban az osztály kiterjeszthető programkód-sablon objektumok létrehozásához, amely kezdeti értékeket biztosít az állam (tagváltozók) és a viselkedés (tagfunkciók vagy módszerek) megvalósításához.
a gyakorlatban gyakran sok azonos típusú objektumot kell létrehoznunk, mint például a felhasználók, vagy áruk vagy bármi más.
amint azt a fejezet Konstruktorából már tudjuk, az “új” operátor,
new functionsegíthet ebben.,de a modern JavaScript-ben van egy fejlettebb “osztály” konstrukció, amely nagyszerű új funkciókat vezet be, amelyek hasznosak az objektumorientált programozáshoz.
az” osztály ” szintaxisa
az alapvető szintaxis:
class MyClass { // class methods constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ...}
Class basic syntax (Magyar)
akkor használja a new MyClass() új objektum létrehozásához az összes felsorolt módszerrel.
aconstructor() módszert automatikusan anew hívja, így inicializálhatjuk az objektumot.,
például:
class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// Usage:let user = new User("John");user.sayHi(); amikor new User("John")
- új objektum jön létre.
- a
constructorfut az adott argumentummal, és hozzárendeli athis.name– hoz.
… akkor objektummódszereket hívhatunk, például user.sayHi().
nincs vessző az osztálymódszerek között
A kezdő fejlesztők számára gyakori hiba, hogy vesszőt helyeznek az osztálymódszerek közé, ami szintaktikai hibát eredményezne.,
a jelölés itt nem tévesztendő össze az objektum literálokkal. Az osztályon belül nincs szükség vesszőre.
mi az az osztály?
tehát mi is pontosan az a class? Ez nem egy teljesen új nyelvi szintű entitás, ahogy gondolhatnánk.
mutassunk be minden varázslatot, és lássuk, mi is valójában egy osztály. Ez sok összetett szempont megértésében segít.
A JavaScriptben az osztály egyfajta függvény.,
itt nézze meg:
class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// proof: User is a functionalert(typeof User); // function mi class User {...}
- létrehoz egy
Usernevű függvényt, amely az osztály deklaráció eredményévé válik. A függvénykód aconstructormetódusból származik (üres, ha nem írunk ilyen módszert). - tárolja osztály módszerek, mint például a
sayHi, aUser.prototype.,
után new User objektum jön létre, amikor hívjuk a módszer, ez venni a prototípus, ahogy az a fejezetben leírt F. prototípus. Tehát az objektum hozzáférhet az osztály módszereihez.,a class User nyilatkozatot az alábbiak:
Itt a kód, hogy introspect ez:
Nem csak egy szintaktikus cukor
Néha az emberek azt mondják, hogy a class a “szintaktikus cukor” (szintaxis, amely célja, hogy könnyebb legyen olvasni, de nem vezet semmi új), mert mi is kijelentem, ugyanaz, anélkül, hogy a class kulcsszó egyáltalán:
Az eredmény ez a meghatározás körülbelül ugyanaz., Tehát valóban vannak olyan okok, amelyek miatt aclass szintaktikai cukornak tekinthető a konstruktor meghatározására a prototípus módszereivel együtt.
mégis fontos különbségek vannak.
-
először a
classáltal létrehozott függvényt egy speciális belső tulajdonság]:"classConstructor"jelöli. Tehát nem teljesen ugyanaz, mint manuálisan létrehozni.a nyelv ellenőrzi, hogy a tulajdonság a különböző helyeken., Például, ellentétben a rendszeres funkció, kell, hogy legyen neve a
new:class User { constructor() {}}alert(typeof User); // functionUser(); // Error: Class constructor User cannot be invoked without 'new'Is, egy string képviselet az osztály kivitelező a legtöbb JavaScript motorok kezdődik a “osztály…”
class User { constructor() {}}alert(User); // class User { ... }vannak egyéb különbségek, hamarosan látjuk őket.
-
Class methods are non-enumerable.,A class definition sets
enumerableflag tofalsea"prototype"összes metódusára.Ez jó, mert ha egy objektum felett
for..in, akkor általában nem akarjuk az osztály módszereit. -
osztályok mindig
use strict.Az osztálykonstrukción belüli összes kód automatikusan szigorú módban van.
mellett, class szintaxis hoz sok más funkciók, hogy mi lesz felfedezni később.,
Class Expression
csakúgy, mint a függvények, az osztályok egy másik kifejezésen belül definiálhatók, körbejárhatók, visszaadhatók, hozzárendelhetők stb.
íme egy példa egy osztály kifejezésre:
let User = class { sayHi() { alert("Hello"); }};hasonló a megnevezett Függvénykifejezésekhez, az osztálykifejezéseknek lehet neve.,
Ha egy osztály kifejezés van neve, ez látható be, hogy az osztály csak:
Úgy is, hogy órák dinamikusan “on-demand”, így:
, akik véghez viszik/alkotóinak
mint a szó szerinti objektumok, osztályok lehetnek, akik véghez viszik/alkotóinak, számított tulajdonságok stb.
Itt egy példa a user.name megvalósítva, hogy a get/set:
Gyakorlatilag ilyen osztály nyilatkozat működik, azáltal, akik véghez viszik, s alkotóinak a User.prototype.,
Számított nevek
Itt egy példa egy számított a módszer nevét használja zárójelben :
class User { () { alert("Hello"); }}new User().sayHi();az Ilyen funkciók könnyű megjegyezni, mert hasonlítanak, hogy a szó szerinti tárgyakat.
Class fields
régi böngészők szükség lehet egy polyfill
class fields egy újabb mellett a nyelvet.
korábban osztályainknak csak módszerei voltak.
“Class fields” egy szintaxis, amely lehetővé teszi, hogy adjunk olyan tulajdonságokat.,
például, tegyük hozzá, name ingatlan itt: class User:
class User { name = "John"; sayHi() { alert(`Hello, ${this.name}!`); }}new User().sayHi(); // Hello, John!Szóval, csak írni ” = ” a nyilatkozatot, de ez van.,
A fontos különbség az osztály mezők, hogy vannak beállítva, egyes tárgyak, nem a User.prototype:
class User { name = "John";}let user = new User();alert(user.name); // Johnalert(User.prototype.name); // undefinedMi is rendelhet értékek segítségével összetettebb kifejezéseket funkció hívások:
class User { name = prompt("Name, please?", "John");}let user = new User();alert(user.name); // JohnÍgy kötött módszerek osztály mezők
Amint azt a fejezet Funkció kötelező funkciók JavaScript dinamikus this., Ez a hívás kontextusától függ.
tehát, ha egy objektum metódus átkerül, és egy másik kontextusban hívódik meg, akkor a this nem lesz többé hivatkozás az objektumra.
például ez a kód undefined:
a probléma az úgynevezett “vesztes this“.
a rögzítéshez két megközelítés létezik, amint azt a fejezetfüggvény-kötés tárgyalja:
- adjon át egy wrapper-függvényt, például
setTimeout(() => button.click(), 1000). - a metódust objektumhoz köti, például a konstruktorban.,
az Osztálymezők egy másik, meglehetősen elegáns szintaxist biztosítanak:
az osztály mező click = () => {...} objektumonkénti alapon jön létre, minden Button objektum, a this benne az objektum hivatkozása. A button.click bárhol áthaladhatunk, és a this értéke mindig helyes lesz.
Ez különösen hasznos böngészőkörnyezetben, eseményhallgatók számára.,
összefoglaló
az alaposztály szintaxisa így néz ki:
MyClass technikailag egy függvény (az, amitconstructor), míg a metódusok, getterek és szetterek MyClass.prototype.
a következő fejezetekben többet megtudhatunk az osztályokról, beleértve az öröklést és egyéb funkciókat.