Как да създавам обекти в JavaScript

Всички ние се справяме с обекти по един или друг начин, докато пишем код на език за програмиране. В JavaScript обектите ни предоставят начин да съхраняваме, манипулираме и изпращаме данни по мрежата.

Има много начини, по които обектите в JavaScript се различават от обектите в други основни езици за програмиране, като Java. Ще се опитам да разгледам това в друга тема. Тук нека се съсредоточим само върху различните начини, по които JavaScript ни позволява да създаваме обекти.

В JavaScript мислете за обектите като колекция от двойки „ключ: стойност“. Това ни носи първия и най-популярен начин за създаване на обекти в JavaScript.

Нека да започнем това.

1. Създаване на обекти с помощта на синтаксис на обектния литерал

Това е наистина просто. Всичко, което трябва да направите, е да хвърлите двойките си ключови стойности, разделени с ':', в набор от фигурни скоби ({}) и вашият обект е готов за обслужване (или консумиране), както по-долу:

const person = { firstName: 'testFirstName', lastName: 'testLastName' };

Това е най-простият и популярен начин за създаване на обекти в JavaScript.

2. Създаване на обекти с помощта на ключовата дума 'new'

Този метод на създаване на обекти наподобява начина, по който обектите се създават в езици, базирани на класове, като Java. Между другото, като се започне с ES6, класовете са родни и на JavaScript и ще разгледаме създаването на обекти чрез дефиниране на класове в края на тази статия. Така че, за да създадете обект, използвайки ключовата дума 'new', трябва да имате конструкторска функция.

Ето 2 начина, по които можете да използвате модела на ключовата дума „нов“ -

а) Използване на ключовата дума 'new' с 'вградена функция конструктор на обекти

За да създадете обект, използвайте новата ключова дума с Object()конструктор, по следния начин:

const person = new Object();

Сега, за да добавим свойства към този обект, трябва да направим нещо подобно:

person.firstName = 'testFirstName'; person.lastName = 'testLastName';

Може би сте разбрали, че този метод е малко по-дълъг за въвеждане. Също така тази практика не се препоръчва, тъй като има разделителна способност, която се случва зад кулисите, за да се установи дали функцията конструктор е вградена или дефинирана от потребителя.

б) Използване на „ново“ с дефинирана от потребителя функция конструктор

Другият проблем с подхода за използване на функцията конструктор 'Object' е резултат от факта, че всеки път, когато създаваме обект, трябва ръчно да добавяме свойствата към създадения обект.

Ами ако трябваше да създадем стотици обекти на човек? Сега можете да си представите болката. Така че, за да се отървем от ръчното добавяне на свойства към обектите, ние създаваме потребителски (или дефинирани от потребителя) функции. Първо създаваме конструкторска функция и след това използваме ключовата дума 'new', за да получим обекти:

function Person(fname, lname) { this.firstName = fname; this.lastName = lname; }

Сега, когато искате обект „Person“, просто направете това:

const personOne = new Person('testFirstNameOne', 'testLastNameOne'); const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');

3. Използване на Object.create () за създаване на нови обекти

Този модел е много полезен, когато се иска да създаваме обекти от други съществуващи обекти, а не директно с помощта на синтаксиса на ключовата дума „new“. Нека да видим как да използваме този модел. Както е посочено в MDN:

В Object.create()метода се създава нов обект, като се използва съществуващ обект като прототип на новосъздадения обект.

За да разберете Object.createметода, просто не забравяйте, че са необходими два параметъра. Първият параметър е задължителен обект, който служи като прототип на новия обект, който трябва да бъде създаден. Вторият параметър е незадължителен обект, който съдържа свойствата, които трябва да бъдат добавени към новия обект.

Сега няма да се задълбочаваме в прототипи и вериги за наследяване, за да запазим фокуса си върху темата. Но като бърза точка, можете да мислите за прототипи като обекти, от които други обекти могат да заемат свойства / методи, от които се нуждаят.

Представете си, че имате организация, представена от orgObject

const orgObject = { company: 'ABC Corp' };

И вие искате да създадете служители за тази организация. Ясно е, че искате всички обекти на служителите.

const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } }); console.log(employee); // { company: "ABC Corp" } console.log(employee.name); // "EmployeeOne"

4. Използване на Object.assign () за създаване на нови обекти

Ами ако искаме да създадем обект, който трябва да има свойства от повече от един обект? Object.assign()идва на наша помощ.

Както е посочено в MDN:

В Методът се използва за копиране на стойностите на всички enumerable собствени свойства от един или повече източници на обекти за целевия обект. Той ще върне целевия обект.Object.assign()

Object.assignметод може да приема произволен брой обекти като параметри. Първият параметър е обектът, който ще създаде и върне. Останалите обекти, предадени към него, ще бъдат използвани за копиране на свойствата в новия обект. Нека го разберем, като разширим предишния пример, който видяхме.

Да приемем, че имате два обекта, както е показано по-долу:

const orgObject = { company: 'ABC Corp' } const carObject = { carName: 'Ford' }

Сега искате обект на служител на „ABC Corp“, който управлява автомобил „Ford“. Можете да направите това с помощта на Object.assignпосоченото по-долу:

const employee = Object.assign({}, orgObject, carObject);

Сега получавате employeeобект, който има companyи carNameкато негово свойство.

console.log(employee); // { carName: "Ford", company: "ABC Corp" }

5. Използване на класове ES6 за създаване на обекти

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!