Mindannyian ilyen vagy olyan módon foglalkozunk tárgyakkal, miközben programozási nyelven írunk kódot. A JavaScript-ben az objektumok lehetőséget nyújtanak adatok tárolására, kezelésére és küldésére a hálózaton keresztül.
Számos módon különbözhetnek a JavaScript objektumai a többi mainstream programozási nyelv, például a Java objektumaitól. Megpróbálom ezt egy másik témában feldolgozni. Itt csak arra a különféle módokra koncentráljunk, amelyek segítségével a JavaScript lehetővé teszi objektumok létrehozását.
A JavaScriptben gondolja az objektumokat a „kulcs: érték” párok gyűjteményeként. Ez hozza elénk az első és legnépszerűbb módszert az objektumok JavaScript-ben történő létrehozására.
Indítsuk el ezt.
1. Objektumok létrehozása objektum szó szerinti szintaxissal
Ez nagyon egyszerű. Csak annyit kell tennie, hogy a kulcsértékeket ':' -vel elválasztva bedobja egy göndör zárójel ({}) belsejébe, és az objektuma készen áll a kiszolgálásra (vagy elfogyasztásra), például az alábbiak szerint:
const person = { firstName: 'testFirstName', lastName: 'testLastName' };Ez a legegyszerűbb és legnépszerűbb mód az objektumok JavaScript-ben történő létrehozására.
2. Objektumok létrehozása az 'új' kulcsszóval
Az objektum létrehozásának ez a módszere hasonlít az objektumok osztályalapú nyelveken történő létrehozásának módjára, például a Java-ra. Egyébként az ES6-tól kezdve az osztályok a JavaScript-ben is őshonosak, és az objektumok létrehozását az osztályok definiálásával fogjuk megvizsgálni a cikk vége felé. Tehát egy objektum létrehozásához az „új” kulcsszó használatával rendelkeznie kell egy konstruktor funkcióval.
Íme 2 módszer az „új” kulcsszóminta használatára -
a) Az „új” kulcsszó beépített Object konstruktor funkcióval
Objektum létrehozásához használja az új kulcsszót a Object()konstruktorral, így:
const person = new Object();A tulajdonságok hozzáadásához ehhez az objektumhoz ilyesmit kell tennünk:
person.firstName = 'testFirstName'; person.lastName = 'testLastName';Lehet, hogy rájött, hogy ezt a módszert kicsit hosszabb beírni. Ez a gyakorlat szintén nem ajánlott, mivel van egy hatókör-felbontás, amely a kulisszák mögött történik annak megállapítására, hogy a konstruktor funkció beépített vagy felhasználó által definiált-e.
b) Az „új” használata a felhasználó által definiált konstruktor funkcióval
Az „Object” konstruktor függvény használatának másik problémája abból adódik, hogy minden objektum létrehozásakor manuálisan hozzá kell adnunk a tulajdonságokat a létrehozott objektumhoz.
Mi lenne, ha több száz objektumot kellene létrehoznunk? Most el tudja képzelni a fájdalmat. Tehát, hogy megszabaduljunk a tulajdonságok manuális hozzáadásától az objektumokhoz, egyedi (vagy felhasználó által definiált) függvényeket hozunk létre. Először létrehozunk egy konstruktor függvényt, majd az 'új' kulcsszót használjuk az objektumok megszerzéséhez:
function Person(fname, lname) { this.firstName = fname; this.lastName = lname; }Bármikor, amikor „Személy” objektumot szeretne, tegye ezt:
const personOne = new Person('testFirstNameOne', 'testLastNameOne'); const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');3. Az Object.create () segítségével új objektumokat hozhat létre
Ez a minta nagyon hasznos, ha arra kérnek minket, hogy más meglévő objektumokból hozzunk létre objektumokat, és ne közvetlenül használjuk az „új” kulcsszó szintaxist. Lássuk, hogyan kell használni ezt a mintát. Amint azt az MDN-en közölték:
AObject.create()módszer új objektumot hoz létre, egy meglévő objektumot használ az újonnan létrehozott objektum prototípusaként.
A Object.createmódszer megértéséhez ne feledje, hogy két paraméterre van szükség. Az első paraméter egy kötelező objektum, amely a létrehozandó új objektum prototípusaként szolgál. A második paraméter egy választható objektum, amely tartalmazza az új objektumhoz hozzáadandó tulajdonságokat.
Most nem fogunk elmélyülni a prototípusokban és az öröklési láncokban, hogy továbbra is a témára összpontosítsunk. Gyors kérdésként gondolhat a prototípusokra, mint olyan tárgyakra, amelyekből más objektumok kölcsönözhetnek tulajdonságokat / módszereket, amelyekre szükségük van.
Képzelje el, hogy van egy olyan szervezete, amelyet képvisel orgObject
const orgObject = { company: 'ABC Corp' };És ehhez a szervezethez szeretne alkalmazottakat létrehozni. Nyilvánvaló, hogy az összes alkalmazott objektumot szeretné.
const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } }); console.log(employee); // { company: "ABC Corp" } console.log(employee.name); // "EmployeeOne"4. Az Object.assign () használatával új objektumokat hozhat létre
Mi van, ha olyan objektumot akarunk létrehozni, amelynek több objektumról is rendelkeznie kell tulajdonságokkal? Object.assign()segítségünkre van.
Ahogy az MDN-en is elmondták:
A módszer arra szolgál, hogy az összes megszámlálható saját tulajdonság értékét átmásolja egy vagy több forrásobjektumból egy célobjektumba. Visszaadja a célobjektumot.Object.assign()Object.assignA metódus tetszőleges számú objektumot vehet fel paraméterként. Az első paraméter az az objektum, amelyet létrehozni és visszaadni fog. A hozzá továbbított objektumok többi részét felhasználják a tulajdonságok átmásolására az új objektumba. Értsük meg az előző példát kibővítve.
Tegyük fel, hogy két tárgya van az alábbiak szerint:
const orgObject = { company: 'ABC Corp' } const carObject = { carName: 'Ford' }Most azt akarja, hogy az „ABC Corp” alkalmazottja egy „Ford” autót vezessen. Ezt az alábbiak segítségével teheti meg Object.assign:
const employee = Object.assign({}, orgObject, carObject);
Most egy olyan employeeobjektumot kap, amelynek van companyés carNametulajdonosa.
console.log(employee); // { carName: "Ford", company: "ABC Corp" }5. ES6 osztályok használata objektumok létrehozásához
You will notice that this method is similar to using ‘new’ with user defined constructor function. The constructor functions are now replaced by classes as they are supported through ES6 specifications. Let’s see the code now.
class Person { constructor(fname, lname) { this.firstName = fname; this.lastName = lname; } } const person = new Person('testFirstName', 'testLastName'); console.log(person.firstName); // testFirstName console.log(person.lastName); // testLastName These are all the ways I know to create objects in JavaScript. I hope you enjoyed this post and now understand how to create objects.
Thanks for your time for reading this article. If you liked this post and it was helpful to you, please click the clap ? button to show your support. Keep learning more!