JavaScript Конструкторы объектов. JavaScript
Пример
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Считается хорошей практикой называть функции конструктора с первой буквой верхнего регистра.
Типы объектов (чертежи) (классы)
Примеры из предыдущих глав ограничены. Они только создают одиночные объекты.
Иногда мы нуждаемся в "план " для создания многих объектов одного и того же "типа".
Способ создания "типа объекта", заключается в использовании функции конструктора объектов .
В приведенном выше примере функция Person () является функцией конструктора объектов.
Объекты одного типа создаются путем вызова функции конструктора с помощью ключевого слова New :
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
Ключевое слово this
В JavaScript, вещь называется это объект, который "владеет" код.
Значение this , при использовании в объекте, является сам объект.
В функции конструктора это значение не имеет. Он заменяет новый объект. Значение этого параметра станет новым объектом при создании нового объекта.
Добавление свойства к объекту
Добавить новое свойство к существующему объекту очень просто:
Пример
myFather.nationality = "English";
Свойство будет добавлено в моего отца. Не моя мать. (не для других объектов Person).
Добавление метода к объекту
Добавить новый метод к существующему объекту очень просто:
Пример
myFather.name = function () {
return this.firstName + " " + this.lastName;
};
Метод будет добавлен в моего отца. Не моя мать. (не для других объектов Person).
Добавление свойства в конструктор
Нельзя добавить новое свойство в конструктор объектов так же, как добавляется новое свойство к существующему объекту:
Пример
Person.nationality = "English";
Чтобы добавить новое свойство в конструктор, необходимо добавить его в функцию конструктора:
Пример
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
Таким образом, свойства объекта могут иметь значения по умолчанию.
Добавление метода в конструктор
Функция конструктора также может определять методы:
Пример
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.name = function() {return this.firstName + " " + this.lastName;};
}
Нельзя добавить новый метод в конструктор объектов так же, как добавить новый метод к существующему объекту.
Добавление методов к объекту должно выполняться внутри функции конструктора:
Пример
function Person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}
Функция чанженаме () присваивает значение Name свойству "Фамилия" пользователя.
Объект Math () отсутствует в списке. Математика является глобальным объектом. Ключевое слово New не может использоваться в математике.
Ты знала?
Как вы можете видеть выше, JavaScript имеет версии объектов примитивных типов данных String, number и Boolean. Но нет причин создавать сложные объекты. Примитивные значения намного быстрее.
Используйте литералы объекта {} вместо нового объекта ().
Используйте строковые литералы "" вместо новой строки ().
Используйте числовые литералы 12345 вместо нового числа ().
Используйте логические литералы true/false вместо New Boolean ().
Используйте литералы массива вместо нового массива ().
Используйте шаблонные литералы /()/ вместо нового регулярного выражения ().
Используйте выражения функции () {} вместо новой функции ().
Пример
var x1 = {}; // new object
var x2 = ""; // new primitive string
var x3 = 0; // new primitive number
var x4 = false; // new primitive boolean
var x5 = ; // new array object
var x6 = /()/ // new regexp object
var x7 = function(){}; // new function object
Function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; }
Считается хорошей практикой программирования, чтобы название функции конструкторов начиналось с большой буквы.
Объектные типы (Шаблоны) (Классы)
Примеры из предыдущих глав значительно ограничены. В них создается только одиночные объекты.
Тем не менее, иногда требуется иметь некий "шаблон", по которому можно было бы создавать множество объектов одного и того же "типа".
Для создания "объектного типа" и используется функция конструктора объекта .
В приведенном в начале этой главы примере функция Person() является функцией конструктора объекта.
Объекты одного и того же типа создаются при помощи вызова функции конструктора с ключевым словом new :
Var myFather = new Person("John", "Doe", 50, "blue"); var myMother = new Person("Sally", "Rally", 48, "green");
Ключевое слово this
В JavaScript ключевое слово this обозначает объект, которому "принадлежит" данный код.
Значением ключевого слова this , когда оно используется в объекте, является сам объект.
В функции конструктора у ключевого слова this нет значения. Это "подстановка" для нового объекта. Когда будет создан новый объект, тогда значением ключевого слова this и станет этот новый объект.
Обратите внимание, что this это не переменная, а ключевое слово. Вы не можете изменять его значение.
Добавление свойства к объекту
Добавить новое свойство к существующему объекту очень просто:
MyFather.nationality = "English";
Свойство будет добавлено к объекту myFather, но не к объекту myMother. (Или какому-либо другому объекту типа person).
Добавление метода к объекту
Добавить новый метод к существующему объекту очень просто:
MyFather.name = function () { return this.firstName + " " + this.lastName; };
Метод будет добавлен к объекту myFather, но не к объекту myMother. (Или какому-либо другому объекту типа person).
Добавление свойства к конструктору объекта
Нельзя добавлять новое свойство к конструктору объекта тем же способом, как это делается в случае с существующим объектом.
Чтобы добавить новое свойство к конструктору, вы должны добавить его в функцию конструктора:
Function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; this.nationality = "English"; }
При этом свойствам объекта можно устанавливать значения по умолчанию.
Добавление метода к конструктору объекта
Функция конструктора также может определять методы:
Function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; this.name = function() {return this.firstName + " " + this.lastName;}; }
Нельзя добавлять новые методы к конструктору объекта тем же способом, как это делается в случае с существующим объектом. Добавление методов к объекту должно происходить внутри функции конструктора:
Function Person(firstName, lastName, age, eyeColor) { this.firstName = firstName; this.lastName = lastName; this.age = age; this.eyeColor = eyeColor; this.changeName = function (name) { this.lastName = name; }; }
Функция changeName() присваивает значение параметра name свойству lastName объекта person:
MyMother.changeName("Doe");
JavaScript знает, о каком объекте идет речь, "подставляя" в ключевое слово this объект myMother .
Встроенные конструкторы JavaScript
В JavaScript есть встроенные конструкторы для собственных объектов:
Var x1 = new Object(); // Новый объект Object var x2 = new String(); // Новый объект String var x3 = new Number(); // Новый объект Number var x4 = new Boolean(); // Новый объект Boolean var x5 = new Array(); // Новый объект Array var x6 = new RegExp(); // Новый объект RegExp var x7 = new Function(); // Новый объект Function var x8 = new Date(); // Новый объект Date
В этом списке нет объекта Math(), так как это глобальный объект. Ключевое слово new нельзя использовать с объектом Math.
А вы знали?
Как видно из приведенного выше кода, в JavaScript есть объектные версии примитивных типов данных String, Number и Boolean. Однако нет никаких причин создавать для этих типов комплексные объекты. Примитивные значения работают быстрее.
Таким образом:
- используйте объектные литералы { } вместо new Object().
- используйте строковые литералы "" вместо new String().
- используйте числовые литералы 12345 вместо new Number().
- используйте логические литералы true / false вместо new Boolean().
- используйте литералы-массивы вместо new Array().
- используйте литералы-шаблоны /()/ вместо new RexExp().
- используйте выражения функций () {} вместо new Function().
JavaScript предоставляет разработчикам возможность создавать объекты и работать с ними. Для этого существуют следующие приёмы:
- Оператор new
- Литеральная нотация
- Конструкторы объектов
- Ассоциативные массивы
Используем оператор new
Это, наверное, самый легкий способ создания объекта. Вы просто создаете имя объекта и приравниваете его к новому объекту Javascript.
//Создаем наш объект var MyObject = new Object(); //Переменные MyObject.id = 5; //Число MyObject.name = "Sample"; //Строка //Функции MyObject.getName = function() { return this.name; }
Минус данного способа заключается в том, что вы можете работать только с одним вновь созданным объектом.
//Используем наш объект alert(MyObject.getName());
Литеральная нотация
Литеральная нотация является несколько непривычным способом определения новых объектов, но достаточно легким для понимания. Литеральная нотация работает с версии Javascript 1.3.
//Создаем наш объект с использованием литеральной нотации MyObject = { id: 1, name: "Sample", boolval: true, getName: function() { return this.name; } }
Как видите, это довольно просто.
Объект = { идентификатор: значение, ... }
И пример использования:
Alert(MyObject.getName());
Конструкторы объектов
Конструкторы объектов - это мощное средство для создания объектов, которые можно использовать неоднократно. Конструктор объекта - это, по сути, обычная функция Javascript, которой так же можно передавать различные параметры.
Function MyObject(id, name) { }
Только что мы написали конструтор. С помощью него мы и будем создавать наш объект.
Var MyFirstObjectInstance = new MyObject(5,"Sample"); var MySecondObjectInstace = new MyObject(12,"Othe Sample");
Таким образом мы создали различные экземпляры объекта. Теперь мы можем работать отдельно с каждым экземпляром объекта MyObject, не боясь того, что, изменяя свойства одного экземпляра, мы затронем свойства другого экземпляра.
Как и в ООП, у MyObject могут быть методы и различные свойства. Свойствам можно присвоить значения по умолчанию, либо значения, переданные пользователем в конструкторе объекта.
Function MyObject(id, name) { //Значения переданные пользователем this._id = id; this._name = name; //Значение по умолчанию this.defaultvalue = "MyDefaultValue"; }
Аналогичным образом мы можем создавать и функции.
Function MyObject(id,name) { this._id = id; this._name = name; this.defaultvalue = "MyDefaultValue"; //Получение текущего значения this.getDefaultValue = function() { return this.defaultvalue; } //Установка нового значения this.setDefaultValue = function(newvalue) { this.defaultvalue = newvalue; } //Произвольная функция this.sum = function(a, b) { return (a+b); } }
Ассоциативные массивы
Подобный метод будет полезен упорядочивания большого числа однотипных объектов.
Var MyObject = new Number(); MyObject["id"] = 5; MyObject["name"] = "SampleName";
Для обхода таких объектов можно использовать такой цикл:
For (MyElement in MyObject) { //Код обхода //В MyElement - идентификатор записи //В MyObject - содержание записи }
По материалу подготовлена небольшая схема.
Вы можете её посмотреть в форматах.
Всем привет. В сегодняшней статье мы разберём, что такое Объекты, конструкторы и прототипы в JavaScript . JavaScript очень отличается от других объектно-ориентированных языков программирования, как, например, C++, Java, PHP и т.д. В этих языках используются классы , на основе которых потом создаются объекты . В JavaScript же классов нет, но есть объекты . Всё кроме null, undefined, string, number, boolean в JavaScript является объектом , поэтому очень важно знать, как они работают. Что же, давайте начнём.
Объект - это набор свойств и методов . Рассмотрим пример:
Var person = {};
var person = new Object();
Здесь мы создали пустой объект. 1 и 2 случай идентичны, но первый короче и поэтому используется чаще. Давайте заполним наш объект какими-то свойствами
Var person = {
name: "Alex",
age: 27
};
Слева указывается название свойства, а через двоеточие его значение. Свойства отделяются друг от друга запятой. Теперь мы можем узнать значение свойства, изменить его или добавить новое.
Console.log(person.name); // выводит в консоль имя
console.log(person["name"]); // аналогично первому случаю
person.age = 30; // изменили свойство age с 27 на 30
person.gender = "male"; // добавили новое свойство gender со значением male
Здесь всё понятно, но поясню второй способ обращения к свойству. Он используется обычно, когда нужно обратиться к свойству, имя которого записано в переменной. Такое бывает, например, в циклах. Там мы не можем обратиться к свойству через точку, будет ошибка, поэтому мы используем квадратные скобки.
Var k = "name";
console.log(person.k); // Ошибка!
console.log(person[k]); // выведет значение
Если мы попытаемся обратиться к несуществующему свойству, то получим undefined.
Console.log(person.height); // Такого свойства нет - undefined
Теперь разберём, что же такое методы.
Методы
- это просто функции в объекте.
Var person = {
name: "Alex",
greet: function() {
console.log("Hello! My name is " + this.name);
}
};
В объекте person мы создали метод greet , который выводит в консоль приветствие. This в коде означает текущий объект, т.е. мы могли бы написать person.name и это также прекрасно работало бы, но что если нам нужно, например, поменять имя объекта? Тогда нам пришлось везде бы менять person на новое имя. С использованием this таких проблем нет.
Что такое объект разобрались. Давайте теперь поговорим, что же такое конструктор
?
Конструктор
- это просто функция, вызывая которую с ключевым словом new
, мы получим новый объект
. Рассмотрим пример:
Var Person = function(name, age) {
this.name = name;
this.age = age;
};
var human = new Person("Alex", 27);
Интепретатор JavaScript видит ключевое слово new и запускает функцию, которая создаёт пустой объект, на который ссылается this . Дальше функция просто присваивает свойствам name и age переданные значения, а затем отдаёт новый объект, на который и передаётся ссылка в переменную human. Да-да! Я не случайно написал ссылка. Дело в том, что все объекты хранятся где-то в памяти, а в переменную попадает лишь ссылка на него, но не он сам.
Var a = 5;
var b = 7;
a = b;
console.log(a, b);
В данном примере мы переменной a присваиваем значение переменной b, поэтому в консоль выведется "7 7". Теперь давайте попробуем сделать так же и с объектами
Var a = {
name: "Alex"
};
Var b = {
name: "Bob"
};
B.name = "John";
console.log(a.name);
Если вы запустите данный пример, то увидите John, т.к. переменная a и b ссылаются на один и тот же объект.
Теперь давайте поговорим о прототипах . Практически любой объект в JavaScript имеет другой, связанный с ним объект, который и называется прототипом . Объект наследует свойства своего прототипа, или проще говоря, все свойства и методы, которые есть у прототипа будут доступны через наш дочерний объект. Создать их очень просто
Var person = {
name: "Alex"
};
var object = Object.create(person);
console.log(object.name);
В данном примере мы создаём новый объект object, который наследует все свойства от его прототипа person с помощью функции create.
Теперь поговорим о том, зачем нам всё это нужно? Допустим, в вашей программе вам нужно создавать много однотипных объектов
Var person = {
name: "Alex",
age: 27,
greet: function() {
}
};
Var person2 = {
name: "John",
age: 17,
greet: function() {
console.log("My name is " + this.name);
}
};
Var person3 = {
name: "Jessica",
age: 37,
greet: function() {
console.log("My name is " + this.name);
}
};
Прописывать все свойства и одинаковые методы в данном случае глупо. Это очень сильно усложнит ваш код и понизит его производительность. Рассмотрим, как сделать правильно
Var Person = {
constructor: function(name, age) {
this.name = name;
this.age = age;
return this;
},
Greet: function() {
console.log("My name is " + this.name);
}
};
Var person, person2, person3;
Person = Object.create(Person).constructor("Alex", 27);
person2 = Object.create(Person).constructor("John", 17);
person3 = Object.create(Person).constructor("Jessica", 37);
Наш код стал короче и более производительным. Давайте теперь разберёмся, что же мы сделали. Для начала мы вынесли общий для всех объектов метод greet в прототип Person. Теперь у нас не 3 функции, а только одна, что хорошо скажется на производительности. Значения name и age у нас для всех объектов разные, поэтому мы создали метод constructor , в котором просто написали функцию, которая инициализирует новый объект и возвращает его. Дальше мы создаём новый объект при помощи Object.create() и сразу вызываем его метод constructor , куда передаём данные. Так мы можем создавать сколько угодно новых объектов, обращаться к их свойствам и вызывать их методы.
Console.log(person.name); // Alex
console.log(person2.age); // 17
console.log(person3.name); // Jessica
Person.greet(); // My name is Alex
person2.greet(); // My name is John
person3.greet(); // My name is Jessica
Класс в языке JavaScript это чисто условное понятие и под классом понимают всего лишь множество всех объектов, которые наследуют свои свойства от одного прототипа. Т.е. в нашем случае эти 3 объекта(person, person2, person3) имеют один класс, потому что они наследуют свойства от одного прототипа.
Для того, чтобы определить является ли объект прототипом другого объекта, есть метод isPrototypeOf
Person.isPrototypeOf(person); // true
Итак, сегодня вы узнали такие основные вещи, как объекты, конструкторы и прототипы . Надеюсь, вы всё поняли, но если всё-таки остались вопросы - оставляйте их в комментариях. До скорого!
контент переехал из сниппетов в статьи
При помощи оператора new можно создать объект (объект Function).
За оператором new необходимо указать имя функции-конструктора; данная функция-конструктор выполняет инициализацию свойств объекта.
В функцию-конструктор передается ключевое слово this , которое ссылается на только что созданный объект.
Существуют встроенные конструкторы javascript, например: Array() , Date() , RegExp() . Стоит отметить: конструктор Object() создает пустой объект, что равнозначно использованию литерала объекта {} .
Прототип – это значение свойства prototype функции конструктора. Каждая функция имеет свойство prototype , данное свойство ссылается на предопределенный объект-прототип. Этот объект работает только в том случае, если функция используется как конструктор, то есть совместно с оператором new.
Каждый объект имеет свойство constructor ; это свойство ссылается на функцию-конструктор, которая, как говорилось выше, выполняет инициализацию свойств объекта.
Как видите, свойство r_method всегда ссылается на неизменяемую (в отличие от свойств, которые уникальны для каждого объекта) функцию. Поэтому рациональнее добавить ее к прототипу. Мы можем сделать простой вывод: объект-прототип подходящее место для констант и методов. Так как любой объект наследует свойства своего прототипа, то наша функция (r_method) автоматически добавится всем объектам, инициализированным конструктором (example_constr).
Классы javascript
Javascript не поддерживает классы как таковые. Однако вы можете создавать псевдоклассы, используя функции-конструкторы и прототипы объектов. Конструктор – это класс.
Назначение конструктора - создать новый объект, установить и возвратить его в качестве значения конструктора.
Имя конструктора обычно является существительным, пишется с прописной буквы и описывает конструируемый объект. Конструкторы, как правило, используют для создания объектов, соответствующих одному шаблону.
Пример создания объекта,
определение конструктора,
и установка свойства для прототипа:
// объект var opa = {}; var opa_ = {x:0, y:"yes"} var D = new Date(); // текущая дата /* Свойство constructor */ document.write(D.constructor); // function Date() { } D.constructor == Date // true // определяем конструктор: function example_constr(r,t) { this.ad = r; this.ak = t; // метод, но лучше определить как св-во прототипа /* this.r_method = function () { this.qu = this.ad - this.ak; }*/ // метод, но внутри метода не используем свойства объекта this.a_method = function (x,y) { alert(x+y); } } // объявляем метод (r_method) в прототипе // это предпочтительнее, чем использовать r_method в ф-и конструкторе // по причине того, что ф-я r_method не имеет уникальных св-в, в отличие // от вышеприведенных свойств (ad,ak) example_constr.prototype.r_method = function () { this.qu = this.ad - this.ak; } // вызываем конструктор и создаем объект example_constr (krot) var krot = new example_constr(14,15); // что равнозначно krot = {ad:14,ak:15} krot.r_method(); // выведет: //alert(krot.qu); // -1 //krot.a_method(11,11); // выведет: // 22
Дополнение:
Чтобы создать собственный конструктор, достаточно описать функцию, в которой ключевое слово this будет ссылаться на объекты (которые создаются посредством функции конструктора). Смотрите выше на примере example_constr .
console.dir
js
console.dir(obj); // выведет все свойства объекта в консолиОбъекты в javascript позволяют воссоздать концепцию объектно-ориентированного программирования
Для того чтобы создавать объекты одного типа используют функции-конструкторы. Отличие конструктора от обычной функции в том, что конструктор вызывается через специальный оператор new .
При использовании new в функции-конструкторе return может вернуть только объект, причем этот объект заменит возвращаемый по умолчанию объект this .
Приватные переменные и функции
У функции-конструктора могут быть как приватные данные (такие данные внешний код может получить, но изменить не может), так и публичные.
javascript
// определяем конструктор: function example_constr(r,t,name) { // this = {} создается автоматически this.ad = r; this.ak = t; this.a_method = function (x,y) { alert(x+y); } // функция-конструктор и без всякого return // возвращает объект this // приватная переменная (то есть из внешнего кода ее можно получить, // но нельзя изменить): this.getName = function(){ return name; } // также можно использовать обычные переменные, // которые будут доступны в лишь пределах функции-конструктора: var page, password; var ogo = function(){ //................ }; } var newObj = new example_constr(1,2,"Вася"); console.dir(newObj); console.log(newObj.getName()); //знать
- ОБЪЕКТЫ javascript работают только со строковыми свойствами, то есть, если свойство не указано как строка, то оно все равно станет строкой.
