Схема резюме создания объектов в JavaScript

Автор：Eve Cole Время обновления：2025-08-03 05:00:03

** JavaScript создает шаблон объекта:

Объект буквального

Заводская модель

Режим конструктора

Прототип режим

Объединение конструктора и схемы прототипа

Динамический режим прототипа

Большинство объектно-ориентированных языков имеют концепцию класса, посредством которой могут быть созданы несколько объектов с одинаковыми методами и атрибутами. Хотя технически, JavaScript является объектно-ориентированным языком, JavaScript не имеет концепции классов, все является объектом. Любой объект является экземпляром определенного эталонного типа и создается с помощью существующих ссылочных типов; Справочный тип может быть собственным или настроенным.

1. объект буквального

 var person = {name: 'nicholas'; Возраст: 22 '; JOW: «Инженер программного обеспечения» говорит, что name: function () {alter (this.name); }}

В примере создается объект с именем и три атрибута (имя, возраст, работа) и метод (sayname ()) добавляются к нему. Метод sayname () используется для отображения значения этого.

Литералы объектов могут использоваться для создания одного объекта, но этот метод имеет очевидный недостаток: создание многих объектов с использованием одного и того же интерфейса будет создавать много дублированного кода.

2. Заводская модель

Заводской шаблон является хорошо известной шаблоном проектирования в области разработки программного обеспечения. Заводская шаблона абстрагирует процесс создания конкретных объектов и использует функции для инкапсуляции деталей создания объектов с конкретными интерфейсами.

 Функция CreatePerson (имя, возраст, job) {var o = new Object {}; o.name = name; o.age = возраст; o.job = job; o.sayname = function () {alert (this.name); }; return o;} var person1 = createperson ("nicholas", 22, "Инженер -программист"); var person2 = createperson («greg», 24, «студент»);

Функция CreatePerson {} может создать объект человека, содержащий всю необходимую информацию, основанную на принятых параметрах. Эту функцию можно назвать бесчисленное количество раз, и каждый раз, когда она возвращает объект, содержащий три свойства и один метод.

Хотя заводская модель решает проблему создания нескольких подобных объектов, она не решает проблему распознавания объектов (то есть как узнать тип объекта).

3. Режим конструктора

 Функция человека (имя, возраст, задание) {this.name = name; this.age = возраст; this.job = job; this.sayname = function () {alert (this.name); }} // Создание экземпляра человека через нового оператора var person1 = new Person ("nicholas", 22, "Инженер -программист"); var person2 = new Person ("greg", 24, "Student"); Person1.sayname (); //Nicholasperson2.sayname (); // Грег

Разница от заводской модели - это

Создать объект, не отображаемый

Назначьте атрибуты и методы непосредственно этому объекту

Нет оператора возврата

Чтобы создать новый экземпляр человека, вы должны использовать нового оператора. 4 шага, чтобы вызвать конструктор:

Создать новый объект

Назначьте сферу конструктора новому объекту (это указывает на этот новый объект)

Выполнить код в конструкторе

Вернуть новый объект

Все объекты, созданные в этом примере, являются экземплярами экземпляров объекта и человека. Это может быть подтверждено экземпляром оператора.

 Alert (Person1 ExtanceOf Object); // TRUE

У шаблона конструктора также есть свои проблемы. На самом деле, метод SayName будет воссоздан один раз в каждом экземпляре. Следует отметить, что методы, созданные экземпляром, не равны. Следующий код может доказать, что

 Alert (person1.sayname == Person2.sayname); // false

Эта проблема может быть решена путем перемещения метода вне конструктора в качестве глобальной функции.

 Функция человека (имя, возраст, задание) {this.name = name; this.age = возраст; this.job = job; } function showername () {alert (this.name); }

Глобальные функции, созданные в глобальном мире, фактически могут быть вызваны случаями, созданными человеком, что немного нереально; Если объект должен определить очень правильный метод, то необходимо определить многие глобальные функции, которые не имеют инкапсуляции.

4. Прототип режим

Каждая функция, созданная в JavaScript, имеет свойство прототипа, которое является указателем на объект, содержащий свойства и методы, которые могут быть переданы всеми экземплярами определенного типа (пусть все экземпляры объекта имеют свои свойства и методы)

 function person () {} person.prototype.name = "nicholas"; Person.prototype.age = 22; Person.prototype.job = "Инженер программного обеспечения"; Person.prototype.sayname () {alert (this.name); }; var person1 = new Person (); Person1.sayname (); //Nicholasalert(person1.sayname == person2.sayname); // true

Приведенный выше код делает эти вещи:

Определите конструктора. Человек автоматически получает свойство прототипа. Это свойство содержит только свойство конструктора, указывающее на человека по умолчанию.

Добавить три свойства и один метод через Person.prototype

Создайте экземпляр человека, а затем вызовите метод sayname () в экземпляре

Использование конструктора человека и человека. Прототип для создания экземпляра в качестве примера, чтобы показать взаимосвязь между объектами

На рисунке показана взаимосвязь между конструктором человека, свойствами прототипа человека и двумя случаями человека. Person.prototype указывает на объект прототипа, Person.prototype.constructor указывает на человека. В дополнение к содержанию атрибута конструктора, объект прототипа также содержит другие свойства и методы, добавленные позже. Оба человека в двух экземплярах Person1 и Person2 содержат внутреннее свойство, которое указывает только на человека. Прототип.

Процесс вызова метода sayname ():

В поисках метода logname () на экземпляре Person1 я обнаружил, что такого метода не было, поэтому я отсоединялся до прототипа Person1

Ищите метод Sayame () на прототипе Person1. Есть этот метод, поэтому метод называется

Основываясь на таком процессе поиска, мы можем помешать экземпляру получить доступ к одному атрибуту имени на прототипе, определив тот же атрибут имени в прототипе на экземпляре. Следует отметить, что это не удалит тот же наименимый атрибут на прототипе, но будет только предотвратить доступ к экземпляру.

 function person () {} person.prototype.name = "nicholas"; Person.prototype.age = 22; Person.prototype.job = "Инженер программного обеспечения"; Person.prototype.sayname () {alert (this.name); }; var person1 = new Person (); var person2 = new Person (); Person1.name = "greg" Alert (person1.name) // Грег происходит от Asment Alert (person2.name) // Николас происходит из прототипа

Используйте оператор Delete, чтобы полностью удалить свойства экземпляра

 Delete Person1.name; Alert (Person1.name) // Николас из прототипа

Используйте метод hasownproperty (), чтобы определить, существует ли свойство в экземпляре или прототипе

 function person () {} person.prototype.name = "nicholas"; Person.prototype.age = 22; Person.prototype.job = "Инженер программного обеспечения"; Person.prototype.sayname () {alert (this.name); }; var person1 = new Person (); var person2 = new Person (); alert (person1, hasownproperty ("name")); // false person1.name = "greg" alert (person1.name) // greg из Amtance Alert (Person1, Hasownproperty ("name")); // trueAlert (person2.name) // nicholas из прототипа Alert (Person2, FalsOnproperty ("wame); Person1.name; Alert (Person1.name) // Николас из прототипа оповещения (Person1, HasownProperty ("name")); // ложь

На следующем рисунке показано взаимосвязь между экземплярами и прототипами в разных ситуациях

Простой синтаксис прототипа

 function person () {} person.prototype = {name: "nicholas", возраст: 22, задание: "инженер -программист", sayname: function () {alert (this.name); }};

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

 function person () {} person.prototype = {Constructor: Person, имя: "nicholas", возраст: 22, задание: "инженер программного обеспечения", sayname: function () {alert (this.name); }};

Сброс свойства конструктора приведет к тому, что его свойство [[перечисляется]] в True. По умолчанию нативное свойство конструктора не подлежит перечислению. Вы можете использовать метод object.defineproperty () для его изменения.

 Object.DefineProperty (Person.prototype, "Constructor", {перечисляется: false, value: person});

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

 var friend = new Person (); person.prototype.sayhi = function () {alert ("hi);} friend, sayhi (); //" hi "(без проблем)

Экземпляр человека создается перед добавлением нового метода, но все еще имеет доступ к новому добавленному методу из -за свободного соединения между экземпляром и прототипом

Ситуация после переписывания объекта прототипа

 function person () {} var froty = new Person (); Person.prototype = {name: «nicholas», возраст: 22, задание: «инженер -программист», sayname: function () {alert (this.name); }}; Друг.sayname (); // Ошибка

Причина ошибки при вызове друга.sayname () заключается в том, что прототип, на который указал друзья, не содержит атрибутов, названных в честь этого поля, как показано на рисунке ниже.

Прототип проблемы объекта

Объект прототипа пропускает процесс передачи параметров инициализации для конструктора, и все силы получают одинаковое значение атрибута по умолчанию. Самая большая проблема с прототипами моделей заключается в том, что они имеют общий характер. Когда модель прототипа содержит атрибуты эталонного типа, проблема является более серьезной. Давайте посмотрим на следующий пример.

 function person () {} person.prototype = {Constructor: Person, имя: «Николас», возраст: 22, задание: «инженер -программист», друзья: ["shelby", "court"], sayname: function () {alert (this.name); }}; var person1 = new Person (); var person2 = new Person (); person1.friend.push ("van"); Alert (Person1.Friends); // "Шелби, суд, ван" Alert (Person2.friends); // "Шелби, суд, ван" Alert (Person1.Friends == Person2.friends); // True

5. Объединение режима конструктора и прототипа режима

В сочетании режима конструктора и режима прототипа конструкторы используются для определения свойств экземпляра, а модели прототипа используются для определения методов и общих свойств. Таким образом, каждый экземпляр будет иметь свою собственную копию атрибутов экземпляра, а также может поделиться ссылками на методы, сохранение памяти в максимальной степени.

 Функция человека (имя, возраст, задание) {this.name = name; this.age = возраст; this.job = job; this.friends = ["shelby", "court"];} person.prototype = {Constructor: Person, SayName: function () {alert (this.name); }} var person1 = new Person ("nicholas", 22, "Инженер -программист"); var person2 = new Person ("greg", 24, "Студент"); Person1.friend.push ("van"); ALERT (Person1.Friends); // «Шелби, суд, ван" Alert (Person2.friends); // "Shelby, Court" Alert (Person1.friends == Person2.friends); // ложное предупреждение (Person1.sayname == Person2.sayname); // true

6. Динамический режим прототипа

Динамический режим прототипа инкапсулирует всю необходимую информацию в конструктор, и использует оператор IF, чтобы определить, существует ли определенное свойство в прототипе. Если его не существует (когда конструктор вызывает впервые), выполните код инициализации прототипа внутри оператора IF.

 Функция человека (имя, возраст) {this.name = name; this.age = возраст; this.job = job; // method if (typeof this.sayname! = 'function') {person.prototype.sayname = function () {alert (this.name); }; }} var row = new Person ('nicholas', '22', 'инженер -программист'); // Конструктор был вызван впервые, и прототип был изменен в это время var person2 = новый человек ('amy', '21'); // метод Sayname () уже существует и прототип снова не будет модифицирован.

Рекомендуемое чтение:

Несколько общих способов создания объектов в объектно-ориентированном JS (режим заводского режима, режим конструктора, режим прототипа)

Выше приведено шаблон создания объектов в JavaScript, представленном вам редактором. Я надеюсь, что это будет полезно для всех!