Создание объектов в JavaScript

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

Давайте создадим объект, отвечающий за человека. У этого объекта будут следующие свойства: имя, фамилия и возраст:

function MyPerson(firstname, lastname, age) {
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
}
var person = new MyPerson("Иван", "Иванов", 20);
document.write(person.firstname + "<br />");
document.write(person.lastname + "<br />");
document.write(person.age + "<br />");

В данном примере мы создаём объект MyPerson, который принимает в качестве параметров: firstname, lastname и age. Внутри этого конструктора мы присваиваем свойствам текущего объекта (this) значения из параметров конструктора. Далее мы создаём объект MyPerson и последовательно выводим все свойства этого объекта.

Давайте теперь добавим метод, который будет возвращать строку с фамилией, первой буквой имени и возрастом:

function MyPerson(firstname, lastname, age) {
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.display = display;
}

function display() {
return this.lastname + " " + this.firstname[0] + ". " + this.age;
}

var person = new MyPerson("Пётр", "Смирнов", 25);
document.write(person.display());

Как видите, всё достаточно прозрачно, однако, на всякий случай поясню. Здесь мы добавили новый метод display в объект MyPerson (this.display = display;). Эту функцию (метод) мы определяем отдельно. Где мы просто, в зависимости от свойств объекта, вызвавшего этот метод, формируем строку и возвращаем её.

И, наконец, поговорим о методе toString(), который занимается преобразованием объекта в строку. Я уже о нём когда-то упоминал, и пришла пора разобраться с ним уже окончательно на примере собственного объекта. Давайте реализуем этот метод в нашем классе MyPerson.

function MyPerson(firstname, lastname, age) {
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.toString = toStringMyPerson;
}

function toStringMyPerson() {
return "Фамилия = " + this.lastname + " Имя = " + this.firstname + " Возраст = " + this.age;
}

var person = new MyPerson("Пётр", "Смирнов", 25);
document.write(person);

Здесь мы переопределяем метод toString() (так как реализация этого метода уже приходит из объекта Object, от которого наследуются абсолютно все объекты в JavaScript, в том числе и Ваши). Создаём функцию toStringMyPerson() (разумеется, имя функции может быть другим), в которой возвращаем строковое представление объекта. Дальше мы создаём объект MyPerson и просто выводим данный объект с помощью метода write() объекта Document. Как видите, данный метод очень простой и в то же время очень и очень важный и часто используемый. То есть когда Вы передаёте объект в качестве строки, то тут же срабатывает метод toString() для данного объекта и возвращает строку, которая уже и передаётся дальше.

И напоследок хочется сказать, что это простейший вариант создания собственного объекта в JavaScript. Не забывайте, что свойствами могут быть не только тривиальные объекты (строки и числа), но и сложные объекты, такие как Array, Window, Document и даже Ваши собственные объекты.

PNG в IE6

Если Вы уже немного занимались созданием сайтов, то могли заметить, что PNG-изображения в браузере IE6 и ниже отображаются не корректно. Пример такого "кривого" отображения в PNG в IE6 можно наблюдать на изображении к статье (левое изображение). Удивительно, но многие Web-мастера просто забивают на это, оправдываясь тем, что IE6 использует не более 4% пользователей. Я считаю это непростительной глупостью, ведь решение этой проблемы настолько простое, и о нём я расскажу в этой статье. А результат этого решения Вы можете наблюдать вновь на изображении к статье (изображение справа).

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

Далее Вы сохраняете этот скрипт к себе на сайт, например, в папку js. И, наконец, на всех страницах сайта, где у Вас имеются изображения в PNG-формате, Вы вставляете следующие строки в голове документа (внутри тега head):

<!--[if lt IE 7]>
<script type = 'text/javascript' src = 'js/pnghack.js'></script>
<![endif]-->

Таким образом, все браузеры IE, младше 7-ой версии будут подключать этот скрипт, который исправит проблему отображения всех PNG-изображения на странице в IE6 и ниже.

Дата добавления: 2015-10-31