Гибкость Javascript позволяет создавать объекты множеством способов. Но как это нередко случается, разнообразие таит в себе множество подводных камней. Из этой статьи Вы узнаете о том, как разглядеть и обогнуть эти опасные рифы.
Объекты, созданные пользователем, можно изменить в любой точке выполнения скрипта. Многие свойства встроенных в язык объектов также изменяемы. То есть можно просто создать пустой объект и добавлять к нему свойства и методы по мере необходимости. Проще всего это сделать с помощью литеральной нотации
:
//создаем пустой объект
var cat = {};
//добавляем свойство:
cat.name = "Garfield";
//или метод:
cat.getName = function() {
return cat.name;
};
Другим способом создания объекта является использование функций-конструкторов:
// литеральная нотация:
var cat = {name: "Garfield"};
// конструктор-функция:
var cat = new Object();
cat.name = "Garfield";
Очевидно, что литеральная нотация короче конструктора. Есть и философская причина предпочитать литеральную нотацию конструкторам: она подчеркивает, что объект - это всего лишь изменяемый хэш, а не нечто, создаваемое по шаблону, заданному классом.
Кроме того, использование конструктора Object вынуждает интерпретатор проверять, не переопределена ли эта функция в локальном контексте.
Мораль очевидна: не используйте конструктор Object .
Для простых объектов, вроде создаваемого в примере, мы можем вообще обойтись без дополнительных переменных, используя литеральную нотацию:
function Cat() {
return {
name: "Garfield"
};
}
Такой конструктор будет всегда возвращать объект, независимо от того, как его вызывать:
var first = new Cat(),
second = Cat();
first.name; // "Garfield"
second.name; // "Garfield"
У этого способа есть серьезный недостаток: объект не наследует прототип конструктора, то есть методы и свойства, добавленные непосредственно к Cat , будут недоступны создаваемым с его помощью объектам.
JavaScript предоставляет разработчикам возможность создавать объекты и работать с ними. Для этого существуют следующие приёмы:
Это, наверное, самый легкий способ создания объекта. Вы просто создаете имя объекта и приравниваете его к новому объекту 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 - содержание записи }
По материалу подготовлена небольшая схема.
Вы можете её посмотреть в форматах.
Сразу после того, как мы создали функцию, у нее есть свойство prototype , куда записан некоторый объект:
Var Foo = function() {} alert(Foo.prototype) //
Правда, это свойство как тот суслик, который есть несмотря на то, что его не видишь:
Var Foo = function() {} Foo.prop = "ololo"; for (var i in Foo) { alert("Foo."+i + " = " + Foo[i]) } // выведет "Foo.prop = ololo" // и НЕ выведет никакого Foo.prototype
Если попытаться изучить, как устроен объект, который сидит в этом свойстве, может показаться, что он - пустой:
Var Foo = function() {} for (var i in Foo.prototype) { alert("Foo.prototype."+i + " = " + Foo.prototype[i]) } alert("КОНЕЦ!") // покажет только "КОНЕЦ!"
На самом деле в нем тоже сидит невидимый суслик, в виде свойства Foo.prototype.constructor, куда записана ссылка на саму функцию:
Function Foo() {} alert(Foo.prototype.constructor === Foo) // true
Когда же может пригодиться свойство Foo.prototype? Тогда, когда Foo используется в качестве конструктора, то есть с оператором new. Конструктор создает объекты, все это знают. В JavaScript это тоже так, но логика создания слегка запутанная. Вот перед нами простой с виду код:
Var Foo = function() {} var a = new Foo; alert(a)
Любой пыхарь с уверенностью скажет "Мы создали объект а, являющийся экземпляром класса Foo". На самом деле в 7 символах "new Foo " заключена следующая магия:
"Прототип" из пункта 2 - это такой объект, где будут искаться свойства созданного объекта a , которые он сам в явном виде не содержит. Код ниже иллюстрирует все это более развернуто:
Var Foo = function() { alert("я - фу!") this.prop = "lol" } // добавляем свойство к Foo.prototype Foo.prototype.bar = "trololo" var a = new Foo // исполняется Foo, видим алерт "я - фу" // в переменную a записывается созданный объект // когда Foo исполнялась, this указывало на него alert(a.prop) // например, через this-ссылку мы добавили свойство prop alert(a.bar) // а свойство bar берется из прототипа
ОК, вроде разобрались, что такое "прототип объекта", откуда он берется и зачем нужен. А как его посмотреть? В идеальном мире мы могли бы обратиться к obj.prototype и получить прототип объекта. Но увы, как мы видели выше, свойство с таким названием используется иначе - хранит то, что функция-конструктор сделает прототипом объекта. Напрашивается вывод, что можно получить прототип через .prototype конструктора. Попробуем:
Var Foo = function() {} Foo.prototype.prop = "ololo" var a = new Foo() alert(a.prop); // берем из прототипа неявно alert(a.constructor.prototype.prop); // а теперь - явно!
Вроде бы работает. Но что, если мы пытались изобразить наследование, расширив Foo другим "классом"?
Function Foo() {} function Bar() { this.prop = "ololo" } Foo.prototype = new Bar // типа наследуемся var a = new Foo alert(a.prop) // работает alert(a.constructor.prototype.prop) // undefined - ой:(// а кстати, что у нас в a.constructor? alert(a.constructor) // Bar!
Самое время задуматься, куда, собственно, указывает a.constructor. А, собственно, никуда не указывает, потому что у a нету такого свойства, оно берется из цепочки прототипов. В примере выше "прототип a" - это экземпляр Bar (потому что в Foo.prototype результат выполнения new Bar). У экземпляра Bar тоже нету свойства constructor. Зато оно есть у прототипа экземпляра Bar - потому что Bar.prototype (прототип экземпляра Bar) имеет свойство.constructor, указывающее на Bar ("свойство-суслик", о котором я писал в самом начале).
Если подумать, факап в этом примере случился из-за того, что мы "расширили" "класс" "экземпляром" (да, все - в кавычках!). Логичнее "расширять" "класс" "классом", но сути это не меняет - на obj.constructor.prototype в поисках прототипа мы полагаться не можем. Потому что obj.constructor - это не "функция, создавшая obj", а в лучшем случае - "функция, создавшая прототип obj" (так сформулировано в ). В лучшем случае - потому что, вообще-то, там может быть что угодно:
// "Класс", создающий компанию с ключевыми сотрудниками function Company (team) { for (var profession in team) { this = team } } var AvtoVAZ = new Company({ president:"Игорь Комаров", constructor:"Сергей Кудрюк " // главный конструктор АвтоВАЗа }) alert(AvtoVAZ.constructor) // упаси Бог пытаться создать новую компанию так: // var KAMAZ = new AvtoVAZ.constructor()
В общем, догадаться самостоятельно не получается, надо лезть в доки, маны и прочую матчасть. Там мы обнаруживаем совершенно курьезную ситуацию: JavaScript, прототипно-ориентированный язык, обзавелся нормальным способом получения прототипа только на 14-м году своей жизни, в версии 1.8.1! Этот способ называется Object.getPrototypeOf() и не поддерживается IE младше 9.
Function Foo() {} function Bar() { this.prop = "boo" } var b = new Bar Foo.prototype = b var a = new Foo // получаем прототип var aproto = Object.getPrototypeOf(a) alert(aproto.prop) // boo из экземпляра Bar // меняем в прототипе aproto.prop = "woo" alert(a.prop) // woo - "меняется" и в экземпляре // меняем в прототипе неявно b.prop = "zoo" alert(a.prop) // zoo - работает! // потому что Foo.prototype, aproto и b - все указывают на один и тот же объект
До появления этой штуки у разработчиков было только свойство.__proto__, которое работает только в Mozilla-образных браузерах.
Function Foo() {} var proto = {prop:"woo"} Foo.prototype = proto var a = new Foo alert(a.__proto__.prop) // свойство есть в прототипе proto.prop = "zoo" alert(a.__proto__.prop) // поменяли прототип, отразилось на экземпляре a.__proto__.prop = "boo" alert(proto.prop) // и в обратную сторону работает
Настало время для типа-саммари.
Что такое "прототип объекта obj"?
Это объект, к которому JS обращается за свойствами, которых нету у самого obj.
Что такое obj.prototype?
Если obj - это функция, то obj.prototype - то, что станет прототипом объекта при вызове new obj().
Что такое obj.constructor?
Если очень повезет - ссылка на функцию, создавшую obj, или прототип obj. А так вообще - что угодно:)
Что такое obj.__proto__?
Это прототип объекта obj, если у вас мозилла
Что такое Object.getPrototypeOf(obj)
Это способ получить ссылку на прототип объекта obj, который станет кроссбраузерным после смерти IE8 (ну FF до 3.5)
Зачем мне все это знать? о_0
Если создание сайтов - ваша работа, то... вам это все знать нафиг не нужно:) Если только для общей образованности, ну и чтоб голову поломать на досуге.
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");
В 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 есть встроенные конструкторы для собственных объектов:
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. Однако нет никаких причин создавать для этих типов комплексные объекты. Примитивные значения работают быстрее.
Таким образом:
The constructor method is a special method for creating and initializing an object created within a class .
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
There can be only one special method with the name "constructor" in a class. Having more than one occurrence of a constructor method in a class will throw a SyntaxError error.
Class Square extends Polygon { constructor(length) { // Here, it calls the parent class" constructor with lengths // provided for the Polygon"s width and height super(length, length); // Note: In derived classes, super() must be called before you // can use "this". Leaving this out will cause a reference error. this.name = "Square"; } get area() { return this.height * this.width; } set area(value) { this.area = value; } }
Take a look at this code snippet
Class Polygon { constructor() { this.name = "Polygon"; } } class Square extends Polygon { constructor() { super(); } } class Rectangle {} Object.setPrototypeOf(Square.prototype, Rectangle.prototype); console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true let newInstance = new Square(); console.log(newInstance.name); //Polygon
Here the prototype of Square class is changed but still the constructor of the previous base class Polygon is called when a new instance of a square is being created.
As stated, if you do not specify a constructor method a default constructor is used. For base classes the default constructor is:
Constructor() {}
For derived classes, the default constructor is:
Constructor(...args) { super(...args); }
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) |
Standard | Initial definition. |
ECMAScript Latest Draft (ECMA-262) The definition of "Constructor Method" in that specification. |
Draft |
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | Node.js | |
constructor | Chrome
Full support
49 Notes Full support 49Notes Notes | Edge Full support 13 | Firefox Full support 45 | IE No support No | Opera Full support 36 | Safari Full support 9 | WebView Android
Full support
49 Notes Full support 49Notes Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript". | Chrome Android Full support Yes | Firefox Android Full support 45 | Opera Android ? | Safari iOS Full support 9 | Samsung Internet Android Full support Yes | nodejs Full support 6.0.0 Full support 6.0.0 Full support 4.0.0 |