JavaScript обекти в примерите

12.03.2019

Обектите са крайъгълният камък на javascript. Много вградени типове данни са представени като обекти. За да бъдете успешен разработчик на JavaScript, трябва да имате ясна представа как работят. Сградите на обекта се наричат ​​негови полета или свойства на обекта на JavaScript. Те се използват за описване на всеки аспект на даден обект. Имотът може да опише дължината на списъка, цвета на небето или датата на раждане на лицето. Създаването на обекти е лесен процес. Езикът осигурява синтаксис, известен като обектни литерали, които се обозначават с фигурни скоби.

Достъп до имоти

Езикът осигурява два записа за достъп до свойства. Първото и най-често се нарича точкова нотация. В пунктираната нотация достъпът до ресурс може да се получи чрез посочване на името на хост обекта, последвано от периода и името на имота. Например, когато object.foo първоначално е присвоен стойността на един, тогава неговата стойност ще стане 2 след изпълнението на JavaScript оператора на обектите.

Алтернативният синтаксис за достъп е известен като скоби. В нотацията името на обекта е последвано от набор от квадратни скоби. В тях името на свойството е посочено като низ:

object ["foo"] = обект ["foo"] + 1.

Той е по-изразен от нотация на точки, защото позволява на променлива да посочи цялото или част от името на дадено свойство. Това е възможно, защото интерпретаторът на JavaScript обекти автоматично конвертира този израз в низ и след това получава съответното свойство. Имената на свойствата се създават в движение чрез конкатенация на съдържанието на променливата f с низ "oo":

var f = "f";

обект [f + "oo"] = "лента".

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

object ["! @ # $% & * ()."] = true.

Достъпът до свойствата на вложени JavaScript обекти може да се получи чрез свързване на точки и / или скоби. Например, следният обект съдържа вграден обект с име baz, съдържащ друг обект с име foo, който има свойство bar, съдържащо стойността пет:

var object = {baz: {foo: {bar: 5}}}.

Следните изрази имат достъп до прикрепеното свойство на лентата. Първият израз използва точкова нотация, докато вторият израз използва квадратна нотация. Третият израз комбинира двата елемента, за да постигне същия резултат:

  • object.baz.foo.bar;
  • обект ["baz"] ["foo"] ["bar"];
  • обект ["baz"]. foo ["bar"].

Изрази като тези, показани в предишния пример, могат да доведат до лоша производителност, когато се използват неправилно и деактивират JavaScript обекта. Оценяването на всяка точка или израз в скоби изисква време. Ако същото свойство се използва няколко пъти, тогава има смисъл да се осъществи достъп до имота веднъж и след това да се съхрани стойността в локална променлива за всички бъдещи цели.

Функция като метод

Когато дадена функция се използва като свойство на обект, тя се нарича метод. Подобно на свойствата, те се посочват в нотацията на обекта. Например:

var object = {сума: функция (foo, bar) {return foo + bar; }}.

JavaScript обектните методи могат да бъдат извикани с помощта на етикети и скоби. Следният пример извиква метода sum () от предишния пример, използвайки и двата записа:

  • object.sum (1, 2);
  • обект ["сума"] (1, 2).

Наименуването на обект литерал е полезно за създаване на нови обекти, но не може да добавя свойства или методи към съществуващи такива. За щастие добавянето на нови данни е толкова лесно, колкото и създаването на оператор за присвояване. Създава се празен обект. След това, като се използват оператори на присвояване, се добавят две свойства, foo и bar, също методът baz:

  • var object = {};
  • object.foo = 1;
  • object.bar = null;
  • object.baz = function () {return "hello from baz ()"; }.

Инкапсулиране на програмата

Основната идея на обектно-ориентираното програмиране е да раздели програмата на по-малки части и да направи всеки един от тях отговорен за управлението на собствената си държава. По този начин, някои познания за това как една част от програмата работи може да бъде локална за тази част. Някой, който работи по останалата част от програмата, не трябва да помни или дори да знае за него. Когато се променят тези локални данни, трябва да се актуализира само кодът, който е непосредствено около него.

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

Много езици осигуряват възможност за разграничаване на публични и частни свойства и не позволяват външен код за достъп до частни. JavaScript, отново като минималистичен подход, все още не е достигнат. В момента се работи по добавянето на този език. Ето защо, JavaScript програмистите успешно ще използват тази идея. По принцип достъпният интерфейс е описан в документацията или коментарите. Също така е обичайно да се поставя долна черта (_) в началото на имената на свойствата, за да покаже, че тези свойства са частни. Разделянето на интерфейса от изпълнението е чудесна идея. Обикновено се нарича капсулиране.

свойства

Свойства на обекта

Обект с скоби {...} се нарича обектен литерал. Можете веднага да поставите някои свойства в такива скоби {...}. Например двойки „ключ: стойност и т.н.“:

let user = {// име на обект: "John", // по ключ "name" съхранява стойността "John" възраст: 30 // по ключ "възраст" съхранява стойност 30}.

Свойството има ключ (известен също като "име" или "идентификатор") преди двоеточие ":" и стойността отдясно. Има два свойства в потребителски обект. Полученият потребителски JavaScript обект с два подписани файла с думите "име" и "възраст". Можете да добавяте, изтривате и четете файлове от него по всяко време. Стойностите на свойствата са достъпни с помощта на точкова нотация. Тя може да бъде от всякакъв вид. Можете да добавите булева стойност. За да изтриете свойство, използвайте delete в случай на грешка JavaScript обект.

Всички обекти на грешка в JavaScript са потомци на обекта за грешка или наследен обект:

  1. Обектът за грешка в синтаксиса се наследява от обекта Error.
  2. JSON Анализ на грешка на определен тип обект на грешка в синтаксиса.

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

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

  1. Лош контролен символ в литерала на низ.
  2. Лош символ в литерала на низ.
  3. Bad Unicode изход.
  4. Лош бягство характер.
  5. Непрекъснат низ.
  6. Неочакван не-цифров код.
  7. Липсват цифри след десетичната точка.
  8. Непрекъснат дробен номер.
  9. Няма номера след индикатора за степен.
  10. Липсват цифри след знака за експоната.
  11. Експоненциалната част няма номер.
  12. Неочакван край на данните.
  13. Неочаквана ключова дума.
  14. Неочакван характер.
  15. Край на данните при четене на съдържанието на обект.
  16. Очаквано име на собственост или '}'.

Изчислителни свойства

Можете да използвате квадратни скоби в обекта литерал. Това се нарича изчислени свойства. По-долу е даден пример.

Стойността на изчислима собственост е проста: [плод] означава, че името на имота трябва да бъде взето от плодове. Така че, ако посетителят влезе в "ябълка", чантата ще стане {apple: 5}. Можете да използвате по-сложни изрази в квадратни скоби:

нека плод = 'ябълка';

нека чанта = {

[fruit + 'Computers']: 5 // bag.appleComputers = 5

};

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

Резервиране на думи

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

Резервиране на думи

По принцип всяко име е позволено, но има и специално: „__proto__“ получава специално обжалване по исторически причини. Например, не можете да го зададете за стойност, различна от обект:

let obj = {};

obj .__ proto__ = 5;

сигнал (obj .__ proto__); // [object Object], не работи по предназначение

Както може да се види от кода, присвояването на примитив 5 се игнорира. Това може да бъде източник на грешки и дори уязвимости, ако операторът възнамерява да съхранява произволни двойки ключ-стойност в обекта и да позволи на посетителя да определи ключовете. В този случай посетителят може да избере „proto“ като ключ и да добави JavaScript към обекта. Има начин да се направи обект, обработен от __proto__ като редовно свойство. Има и друга карта на структурата на данните, която поддържа произволни ключове.

Целочислени свойства

Терминът "цяло числово свойство" тук означава низ, който може да бъде преобразуван от едно цяло без промяна. Така например, "49" е име на цяло число, защото когато се преобразува в цяло число и обратно, то все още е същото. Но "+49" и "1.2" не са. От друга страна, ако ключовете не са цяло число, те са изброени в реда на създаване. Пример по-долу.

Целочислени свойства

За да коригирате проблема с помощта на телефонни кодове, можете да “измамите” като направите кодовете нецели. Добавянето на "+" (знак плюс) преди всеки код е достатъчно. Сега ще работи по предназначение.

Разликата между обекти и примитиви е, че те се съхраняват и копират „чрез препратка“. Примитивните стойности се присвояват и копират „като цяло число“. Променливата съхранява „адреса в паметта“, а не самия обект или „връзката“ към него. Можете да използвате всяка променлива за достъп и промяна на съдържанието му.

Използвайте променлива

Примерът по-горе показва, че има само един обект и администратор, които да го въведат. След това, ако по-късно се използва друг ключ (потребител), потребителят ще открие промените.

Операторите на равенство == и стриктното равенство === работят за обекти по същия начин. Два обекта са равни само ако те са един и същ обект. За сравнения като obj1> obj2 или за сравнение с примитив obj == 5, обектите се преобразуват в примитиви. Честно казано, подобни сравнения са много рядко необходими и обикновено са резултат от грешка в кодирането.

Проверка на JavaScript обект

Обектите имат достъп до всяко свойство. Но ако изобщо не съществува, това няма да бъде грешка. Единствено достъпът до несъществуващ имот се връща неопределен. Той предоставя много често срещан начин да тествате свойство и да го сравните с неопределен. По-долу е даден пример.

Проверка на JavaScript обект

Използвайте „in“ за свойства, които се съхраняват неопределено. Обикновено строгата "=== undefined" проверка за сравнение работи добре. Има специален случай, когато той се провали и "в" работи правилно. Това е, когато собственост на обект съществува, но запазва неопределен.

собственост на obj.test

В горния код собствеността на obj.test технически съществува. Следователно операторът в операцията работи правилно. Такива ситуации се случват много рядко, тъй като обикновено не се определят неопределени. Използват се предимно нулеви "неизвестни" или "празни" стойности. По този начин, в изявлението е, всъщност, гост в кода.

Цикъл "За .. през"

За да навигирате през всички ключове от обект към обект, има специална форма на цикъла: за ..in. Това е съвсем различно нещо от конструкцията за (;;).

По-долу е даден пример.

Цикъл "За .. през"

Трябва да се отбележи, че всички за конструкторите позволяват декларирането на цикълни променливи в цикъла като ключ за изчакване. Като алтернатива можете да използвате друго име на ключова променлива.

Например, за (нека prop в obj) също е широко използван.

Има алтернативна „квадратна скоба“, която работи с всеки низ.

Квадратна скоба

В този случай, точката изисква ключовете на JavaScript обекта да са валиден идентификатор на променлива, т.е. да няма интервали и други ограничения. Трябва да се внимава правилно да се цитира струната вътре в скобите. Скобите също така осигуряват начин да се получи името на дадено свойство в резултат на който и да е израз, за ​​разлика от буквален низ от променлива:

нека ключ = "обича птици";

// същото като потребител ["likes birds"] = true;

user [ключ] = true.

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

JavaScript на груба сила

Const обект

Обявеният const обект може да бъде модифициран. По-долу е даден пример.

Const обект

Може да изглежда, че JavaScript обектът в низ (*) ще предизвика грешка, но това не е така. Това е така, защото const улавя стойността на самия потребител. И тук потребителят поддържа връзка към един и същ обект през цялото време. Линията (*) влиза вътре в обекта, не се пренасочва към потребителя. Const ще даде грешка, ако се опитате да инсталирате потребител и нещо друго. Клониране и сливане, Object.assign създава друга връзка към същия обект, ако искате да я дублирате. Това е изпълним, но малко по-сложно, защото JavaScript няма вграден метод. Всъщност това рядко е необходимо. В повечето случаи се използва копиране чрез препратка. Но ако наистина се нуждаете от него, тогава трябва да създадете JavaScript обект и да репликирате структурата на съществуващ, като копирате неговите свойства на примитивно ниво. По-долу е даден пример.

Повторна структура

Можете също да използвате метода Object.assign за това. Аргументи dest и src1, ..., srcN са обекти. Копира свойствата на всички src1, ..., srcNINTO dest. С други думи, свойствата на всички аргументи, започвайки от второто, се копират в 1-ви. След това се връща към dest. Например, можете да го използвате, за да комбинирате няколко обекта в едно.

Комбиниране на няколко обекта в едно

Можете също да използвате Object.assign, за да замените обикновената клонираща линия. Той копира всички потребителски свойства на празен обект и го връща, точно като цикъл, но накратко. Досега се предполагаше, че всички потребителски свойства са примитивни. Но свойствата могат да бъдат препратки към други обекти.

За да поправите това, трябва да използвате клониращ цикъл, който проверява всяка стойност на потребителя [key] и, ако е обект, репликира структурата му. Това се нарича "дълбоко клониране".

Съществува стандартен алгоритъм за дълбоко клониране, който обработва горепосочения случай и по-сложни случаи, наречени Структуриран клониращ алгоритъм. За да не изобретявате колелото, можете да използвате работната реализация от библиотеката на lodash JavaScript, метод, наречен _.cloneDeep (obj).

Разширени методи

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

Разширените обектни методи се занимават с понятия, които рядко се използват в JavaScript. Това се дължи на факта, че при нормални сценарии тези мощни функции не са необходими. Някои от тези методи може да не работят в по-стари браузъри, като например ранните версии на Netscape 4.

Използването на прототип може да се приложи за създаване на JavaScript обекти и всички методи на mycircle, а не само на нови. Това дава смесен работен товар. Не е необходимо те да съхраняват отделни копия на методи за всеки обект, така че може да отнеме по-малко памет за работа, но браузърът трябва да търси текущи и родителски области, за да ги открие. Това може да доведе до максимално забавяне. Обикновено, потребителят трябва да използва това, което е подходящо за кода, и да не базира това решение върху изпълнението, освен ако не се занимава с много специфична контролирана среда.

Ограничаване на забавянето

Връщане на вярно

В някои случаи може да е необходимо свойството на обекта да бъде свързано със самия обект или някъде в веригата на прототипа. В JavaScript всички обекти използват метода hasOwnProperty, който връща true, ако това свойство е свързано с отделен обект. В този случай е възможно да се провери дали конструкторът на обекта има същото свойство със същата стойност като самото обектно копие. Това може да даде неправилен резултат, ако има отделни свойства на JavaScript обект със същата стойност както за инстанцията на обекта, така и за веригата прототип. Методът hasOwnProperty приема един параметър - името на свойството като низ.

Метод HasOwnProperty

По същия начин можете да създавате частни методи. Това е просто функция, която се създава в конструкторна функция. За някои може да изглежда объркващо, но така работи. Частна функция може да бъде извикана само от конструктора или от методи, които са дефинирани в низ. Те могат да бъдат използвани като публични методи, ако са присвоени на публичен конструктор и са достъпни чрез публичните методи на Javascript обекти.

функция myob () {функция cantBeSeen () {alert (secretValue);

} var secretValue = '';

this.method1 = function () {secretValue = 'няма изненади';

cantBeSeen ();

};

this.method2 = cantBeSeen;

} var oneOb = new myob ();

oneOb.method1 ();

// сигнали "няма изненади" oneOb.method2 ();

// предупреждава „няма изненади“.

Команден шаблон

Командните обекти позволяват свободно свързани системи, като разделят онези, които правят заявки от обекти, и всъщност обработват заявката. Тези заявки се наричат ​​събития, а кодът, който обработва заявките, се нарича обработващи събития.

Да предположим, че са създадени приложения, които поддържат действията на клипборда Изрежи, Копирай и Вмъкни. Тези действия могат да бъдат стартирани по различен начин в цялото приложение: системата от менюта, контекстното меню, например, чрез щракване с десен бутон върху текстовото поле или с помощта на пряк път. Командните обекти ви позволяват да централизирате обработката на тези действия, по една за всяка операция, когато имате нужда само от една команда за обработка на всички заявки за изрязване, една за всички заявки за копиране и една за всички заявки за поставяне.

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

За да научите как да направите това, можете да използвате JavaScript + jQuery шаблони. Този уникален пакет включва оптимизиран JavaScript за всички GoF шаблони, използвайки по-усъвършенствани функции като пространства от имена, прототипи, модули, функционални обекти, затваряния, анонимни функции и др. Ако потребителите се нуждаят от най-новите инструменти и методи за шаблоните на JavaScript, шаблоните jQuery и архитектурите на шаблоните, това е най-добрият случай за използване. Този пакет съдържа ценна, актуална информация за разработчиците на JavaScript. Ето какво включва:

  1. Оптимизираните от JavaScript шаблони на GoF.
  2. Модерен JavaScript дизайн.
  3. Моделни модели на проектиране.
  4. Шаблони за дизайн на JQuery.
  5. Архитектурни шаблони JavaScript идиоми.
  6. Примери за приложение (MVC, SPA и др.)

Предложените основи на синтаксиса на JavaScript обектите са много важни за начинаещите програмисти. Първо трябва да разберете обектите, след това ще има познания за обектно-ориентирано програмиране. Изключително важно е да имаме дълбоко разбиране на този материал, тъй като това служи като основа за останалата част от езика на JavaScript.