Подробный анализ четырех способов создания объектов в JavaScript

Предисловие

Есть много способов создания объектов с использованием JavaScript. Теперь давайте перечислим четыре из них и перечислим преимущества и недостатки каждого метода, чтобы вы могли выбрать и использовать его. Давайте посмотрим.

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

 Функция CreatePerson (имя, возраст) {var obj = new Object (); obj.name = name; obj.age = возраст; вернуть OBJ; // Обязательно вернитесь, в противном случае неопределенным: неопределенным} var person1 = new Createperson ('Young', 18); console.log (person1.name + ':' + person1.age);

Преимущества: заводской шаблон может решить проблему создания нескольких похожих объектов

Недостатки: проблема распознавания объектов не была решена (как определить тип объекта)

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

 Функция человека (имя, возраст) {this.name = name; this.age = возраст; } var person1 = новый человек ('Young', 18); console.log (person1.name + ':' + person1.age);

Прежде чем говорить о ее плюсах и минусах, давайте сначала поговорим о ее собственной истории.

Используйте конструкторы в качестве функций

 Функция человека (имя, возраст) {this.name = name; this.age = возраст; this.sayname = function () {return this.name; }} // Использовать var person1 = новый человек ('Young', 18); Person1.sayname (); console.log (person1.name + ':' + person1.age); // звонит человека ('Wind', 18); console.log (window.sayname ()); // вызов var obj = new Object (); Человек.call (obj, 'Bird', 100); console.log (obj.sayname ());

Преимущества и недостатки конструкторов

Преимущества: его экземпляр может быть идентифицирован как конкретный тип

Недостатки: каждый метод должен быть воссоздан в каждом экземпляре. Конечно, вы можете изменить это так:

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

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

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

 function person () {} person.prototype.name = 'Young'; Person.prototype.age = 18; Person.prototype.sayname = function () {return this.name; } var person1 = new Person (); console.log (person1.sayname ()); var person2 = new Person (); console.log (person1.sayname ()); Alert (person1.sayname === Person2.sayname); // person1 и person2 доступ к одной и той же функции sayname () одной и той же группы атрибутов

Хотя значение, сохраняемое в прототипе

 function person () {} person.prototype.name = 'Young'; Person.prototype.age = 18; Person.prototype.sayname = function () {return this.name; } var person1 = new Person (); var person2 = new Person (); Person1.name = 'wind'; console.log (person1.sayname ()); // wind console.log (person2.sayname ()); // Young Alert (person1.sayname == person2.sayname); // true

Когда мы называем person1.sayName , мы будем выполнять два поиска подряд. Парсер сначала определяет, имеет ли экземпляр Person1 атрибут sayName . Если есть, мы будем называть наши собственные атрибуты. Если нет, мы будем искать атрибуты в прототипе.

 function person () {} person.prototype.name = 'Young'; Person.prototype.age = 18; Person.prototype.sayname = function () {return this.name; } var person1 = new Person (); var person2 = new Person (); Person1.name = 'wind'; console.log (person1.sayname ()); // wind console.log (person2.sayname ()); // Молодой Delete Person1.name; console.log (person1.sayname ()); // Young console.log (person2.sayname ()); // Young

Используйте метод hasOwnPropertyType , чтобы определить, существует ли свойство в прототипе или в экземпляре. Метод унаследован от объекта, верно в экземпляре и false в прототипе.

Используйте метод Object.keys() для перечисления свойств экземпляра на объектах

 function person () {} person.prototype.name = 'Young'; Person.prototype.age = 18; Person.prototype.sayname = function () {return this.name; } var keys = object.keys (person.prototype); console.log (keys); // ["name", "age", "sayname"]

Плюсы и минусы режима прототипа

Преимущества: нет необходимости повторять каждый метод в каждом экземпляре

Недостатки: очень немногие люди используют только режим прототипа. Полем Список вопросов подробно

 function person () {} person.prototype = {Constructor: Person, имя: 'Young', возраст: 18, друзья: ['big', 'pig'], sayname: function () {return this.name; }}; var p1 = новый человек (); var p2 = новый человек (); p1.friends.push ('mon'); console.log (p1.friends); // ["big", "pig", "mon"] console.log (p2.friends); // ["big", "pig", "mon"]

Это именно потому, что экземпляры обычно имеют свои собственные атрибуты, и мы размещаем их Person.prototype Прототип здесь, поэтому с модификацией P1, весь экземпляр и прототип изменены. Затем мы можем использовать комбинацию режима конструктора и режима прототипа.

Используйте режим конструктора и режим прототипа в комбинации

 Функция человека (имя, возраст) {this.name = name; this.age = возраст; this.Friends = ['Big', 'Pig']; } Person.prototype = {sayname: function () {return this.name; }}; var p1 = новый человек («молодой», 18); var p2 = новый человек ('wind', 78); p1.friends.push ('Raganya'); console.log (p1.friends); // ["big", "pig", "Raganya"] console.log (p2.friends); // ["big", "pig"] console.log (p1.friends == p2.friends); // ложная консоль.log (p1.sayname == p2.sayname);

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

Суммировать

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