Javascript Object: создание объектов и работа. Объекты в JavaScript. Создание объектов JavaScript. События страницы и объектов

Объект – это неупорядоченная коллекция свойств. Свойство – это часть объекта имитирующая переменную. Свойство состоит из имени и значения.

В JavaScript есть три категории объектов:

• Объекты базового типа – это объекты, определённые в спецификации ECMAScript. Например, объекты типа Array , Function , Date или RegExp являются объектами базового типа.
• Объекты среды выполнения – это объекты, определённые в среде выполнения (такой как браузер). Например, объекты типа HTMLElement , являются объектами среды выполнения.
• Пользовательские объекты – это любой объект, созданный в результате выполнения программного кода JavaScript.

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

Объект можно создать с помощью литерала объекта или оператора new с конструктором.

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

// Создание пустого объекта var o = {}; // Создание объекта с тремя свойствами var user = { name: "Homer", "age": 45, 1: true };

Создание объекта с помощью оператора new :

Var o = new Object();

Операции с объектом

Основные операции производимые с объектами – это добавление новых свойств, изменение уже существующих свойств, удаление свойств и обращение к свойствам.

Добавить новое свойство в объект можно присвоив свойству значение. Чтобы присвоить свойству значение, к нему нужно получить доступ. Для доступа к свойству используется один из операторов доступа: . (точка) или (квадратные скобки):

Обращение к свойству и изменение значения осуществляется точно так же (с помощью операторов доступа):

Var o = {x:5}; alert(o.x); // Обращение к свойству alert(o["x"]); // Обращение к свойству o.x = 10; // Изменяем значение

Удаление свойства осуществляется с помощью оператора delete :

Var o = {x:5}; alert("x" in o); // true delete o.x; alert("x" in o); // false

Для перебора свойств объекта используется цикл for-in :

Var obj = {x: 5, y: 10, str: "Hi!"}; for (var prop in obj) { alert(prop); }

Методы объекта

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

Var o = { sayHi: function() { alert("Hello!"); } }; o.sayHi(); // "Hello!"

Для доступа к свойствам объекта внутри метода используется ключевое слово this . Оно содержит ссылку на объект, с помощью которого был вызван метод:

Var o = { name: "Homer", sayName: function() { alert(this.name); } }; o.sayName(); // "Homer"

Вместо ключевого слова this можно использовать непосредственно имя объекта, но это не очень удобно, так как, если изменится имя объекта, в методах придётся также изменять имя:

Var o = { name: "Homer", sayName: function() { alert(o.name); } }; o.sayName(); // "Homer"

JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name (or key ) and a value. A property"s value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.

Objects overview

Objects in JavaScript, just as in many other programming languages, can be compared to objects in real life. The concept of objects in JavaScript can be understood with real life, tangible objects.

In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.

Objects and properties

A JavaScript object has properties associated with it. A property of an object can be explained as a variable that is attached to the object. Object properties are basically the same as ordinary JavaScript variables, except for the attachment to objects. The properties of an object define the characteristics of the object. You access the properties of an object with a simple dot-notation:

ObjectName.propertyName

Like all JavaScript variables, both the object name (which could be a normal variable) and property name are case sensitive. You can define a property by assigning it a value. For example, let"s create an object named myCar and give it properties named make , model , and year as follows:

Var myCar = new Object(); myCar.make = "Ford"; myCar.model = "Mustang"; myCar.year = 1969; myCar.color; // undefined

Properties of JavaScript objects can also be accessed or set using a bracket notation (for more details see property accessors). Objects are sometimes called associative arrays , since each property is associated with a string value that can be used to access it. So, for example, you could access the properties of the myCar object as follows:

MyCar["make"] = "Ford"; myCar["model"] = "Mustang"; myCar["year"] = 1969;

An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string. However, any property name that is not a valid JavaScript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation. This notation is also very useful when property names are to be dynamically determined (when the property name is not determined until runtime). Examples are as follows:

// four variables are created and assigned in a single go, // separated by commas var myObj = new Object(), str = "myString", rand = Math.random(), obj = new Object(); myObj.type = "Dot syntax"; myObj["date created"] = "String with space"; myObj = "String value"; myObj = "Random Number"; myObj = "Object"; myObj[""] = "Even an empty string"; console.log(myObj);

Please note that all keys in the square bracket notation are converted to string unless they"re Symbols, since JavaScript object property names (keys) can only be strings or Symbols (at some point, private names will also be added as the class fields proposal progresses, but you won"t use them with form). For example, in the above code, when the key obj is added to the myObj , JavaScript will call the obj.toString() method, and use this result string as the new key.

You can also access properties by using a string value that is stored in a variable:

Var propertyName = "make"; myCar = "Ford"; propertyName = "model"; myCar = "Mustang";

Using a constructor function

Alternatively, you can create an object with these two steps:

Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.

Create an instance of the object with new .

To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called Car , and you want it to have properties for make, model, and year. To do this, you would write the following function:

Function Car(make, model, year) { this.make = make; this.model = model; this.year = year; }

Notice the use of this to assign values to the object"s properties based on the values passed to the function.

Now you can create an object called mycar as follows:

Var mycar = new Car("Eagle", "Talon TSi", 1993);

This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.

You can create any number of Car objects by calls to new . For example,

Var kenscar = new Car("Nissan", "300ZX", 1992); var vpgscar = new Car("Mazda", "Miata", 1990);

An object can have a property that is itself another object. For example, suppose you define an object called person as follows:

Function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; }

and then instantiate two new person objects as follows:

Var rand = new Person("Rand McKinnon", 33, "M"); var ken = new Person("Ken Jones", 39, "M");

Then, you can rewrite the definition of Car to include an owner property that takes a person object, as follows:

Function Car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; }

To instantiate the new objects, you then use the following:

Var car1 = new Car("Eagle", "Talon TSi", 1993, rand); var car2 = new Car("Nissan", "300ZX", 1992, ken);

Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects rand and ken as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:

Car2.owner.name

Note that you can always add a property to a previously defined object. For example, the statement

Car1.color = "black";

adds a property color to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the Car object type.

Using the Object.create method See also

• To dive deeper, read about the details of javaScript"s objects model .
• To learn about ECMAScript 2015 classes (a new way to create objects), read the JavaScript classes chapter.

Условие задачи :

1. Есть три объекта (три автомобиля) : first_Car , second_Car и third_Car .

2. Каждый из объектов (автомобилей) имеет набор свойств и соответствующих им значений (характеристики автомобиля ).

3. Рассмотрим один из объектов:

var first_Car = {
make: "VAZ" , /* производитель */
model: 2106 , /* модель */
year: 1980 , /* год выпуска */
color: "beige" , /* цвет */
passengers: 5 , /* число пассажиров */
convertible: false, /* откидной верх */
mileage: 80000 /* пробег */
}

Свойства make и color имеют строковые значения;

Свойства model , year , passengers и mileage - числовые значения;

Свойство convertible принимает булево значение.

Нужно сделать следующее :

Написать функцию, которая проверяет автомобиль по двум параметрам (год выпуска и пробег) и возвращает булево значение true или false .

Подробности :

1. Функция имеет один параметр car , в качестве которого получает один из 3-х объектов. Например, выше рассмотренный автомобиль first_Car .

2. Функция должна работать с любым подобным объектом.

Функция для проверки объекта - true или false

/* 1-ый объект */
var first_Car = {
make: "VAZ",
model: 2106,
year: 1980 ,
color: "beige",
passengers: 5,
convertible: false,
mileage: 80000
}

/* 2-ой объект */
var second_Car = {
make: "VW",
model: "Passat b3",
year: 1990 ,
color: "neptune",
passengers: 5,
convertible: false,
mileage: 160000
}

/* 3-ий объект */
var third_Car = {
make: "Hyundai",
model: "Solaris",
year: 2012 ,
color: "wet asphalt",
passengers: 5,
convertible: false,
mileage: 15000
}

function good_Car(car) {
if (car. year < 2000 ){
return false;
}
else if (car. mileage > 50000 ){
return false;
}
else{
return true;
}
}

/* Вызов функции и Вывод результата */
var result = good_Car ( third_Car );

document . write ( result );

Комментарии к решению:

• Итак, мы имеем три объекта (три автомобиля) , каждый из которых можно проанализировать при помощи функции good_Car .
• Функция good_Car имеет один параметр car , в качестве которого может выступать любой из объектов (автомобилей) : first_Car , second_Car или third_Car : function good_Car(car) .
• В теле Функции good_Car составлено условие, согласно которому:

  Если значение свойства year объекта car меньше 2000 (другими словами : если год выпуска автомобиля меньше 2 000) , то функция возвращает false;

  Иначе, если значение свойства mileage объекта car больше 50000 (если пробег автомобиля больше 50 000) , то функция возвращает false;

  Иначе функция возвращает true .

• Далее мы вызываем функцию и в качестве параметра указываем объект third_Car (третий автомобиль) , который успешно проходит проверку. Результат работы функции заносится в переменную result :
  var result = good_Car(third_Car); .
• Переменная result выводится на экран;
• Два других объекта (автомобиля) не будут соответствовать требованиям условия.

Оптимизация кода

Продолжим работать с объектами в javascript .

Итак, рассмотренная выше функция при проверке объектов (автомобилей) выдает в результате true или false (истину или ложь) .

Можно немного улучшить качество восприятия решения рассмотренной задачи, то есть вместо true или false выводить какой-либо текст. Для этого составим условие для анализа результата.

/* 1-ый объект */
var first_Car = {
make: "VAZ",
model: 2106,
year: 1980 ,
color: "beige",
passengers: 5,
convertible: false,
mileage: 80000
}

/* 2-ой объект */
var second_Car = {
make: "VW",
model: "Passat b3",
year: 1990 ,
color: "neptune",
passengers: 5,
convertible: false,
mileage: 160000
}

/* 3-ий объект */
var third_Car = {
make: "Hyundai",
model: "Solaris",
year: 2012 ,
color: "wet asphalt",
passengers: 5,
convertible: false,
mileage: 15000
}

/* Функция для проверки объекта */
function good_Car(car) {
if (car. year < 2000 ){
return false;
}
else if (car. mileage > 50000 ){
return false;
}
else{
return true;
}
}

var result = good_Car ( third_Car );

if(result) {
document . write ("У Вас неплохой автомобиль: " + third_Car . year + " год выпуска, с пробегом " + third_Car .mileage + " км." );
}
else{
document . write ("Не будем говорить о Вашем автомобиле...." );
}

Решение с условием для результата - Результат...

Условие для анализа результата составлено следующим образом.

• Выражение if(result) является сокращенной формой записи выражения
  if(result == true) .
• Если результат работы функции good_Car является истинным true , то мы выводим на экран фразу: «У Вас неплохой автомобиль: 2012 год выпуска, с пробегом 15000 км.», где

  2012 и 15000 - это значения свойств year и mileage объекта third_Car .

• Если же условие для проверки результата выдаст ложное значение false , то мы увидим: «Не будем говорить о Вашем автомобиле....». То есть рассматриваемый объект (автомобиль) не прошел проверку.

Оптимизация кода - Идем дальше - Добавляем функцию

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

/* Вызов функции и Анализ результата */
var result = good_Car( third_Car );

if(result) {
document.write("У Вас неплохой автомобиль: " + third_Car .year + " год выпуска, с пробегом " + third_Car .mileage + " км.");
}
else{
document.write("Не будем говорить о Вашем автомобиле....");
}

Здесь объект third_Car (третий автомобиль) указывается трижды:

• Первый раз при вызове функции good_Car он указан в качестве ее параметра: good_Car(third_Car) .
• И далее он фигурирует еще дважды, когда мы к нему обращаемся для указания его свойств: third_Car.year и third_Car.mileage .

Мне это не понравилось, так как при анализе другого объекта (автомобиля) нам придется его имя также указывать трижды !!!

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

/* 1-ый объект */
var first_Car = {
make: "VAZ",
model: 2106,
year: 1980 ,
color: "beige",
passengers: 5,
convertible: false,
mileage: 80000
}

/* 2-ой объект */
var second_Car = {
make: "VW",
model: "Passat b3",
year: 1990 ,
color: "neptune",
passengers: 5,
convertible: false,
mileage: 160000
}

/* 3-ий объект */
var third_Car = {
make: "Hyundai",
model: "Solaris",
year: 2012 ,
color: "wet asphalt",
passengers: 5,
convertible: false,
mileage: 15000
}

/* Функция для проверки объекта */
function good_Car(car ) {
if (car .year < 2000){
return false;
}
else if (car .mileage > 50000){
return false;
}
else{
return true;
}
}

/* Заносим результат работы функции good_Car и Анализ результата в еще одну функцию */
function itog(car ){
var result = good_Car(car );

If(result ) {
document.write("У Вас неплохой автомобиль: " + car .year + " год выпуска, с пробегом " + car .mileage + " км.");
}
else{
document.write("Не будем говорить о Вашем автомобиле....");
}
}

itog( third_Car );

Решение с использованием еще одной функции - Результат...

У Вас неплохой автомобиль: 2012 год выпуска, с пробегом 15000 км.

Последнее обновление: 08.04.2018

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

Объекты

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

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

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

Есть несколько способов создания нового объекта.

Первый способ заключается в использовании конструктора Object:

Var user = new Object();

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

Выражение new Object() представляет вызов конструктора - функции, создающей новый объект. Для вызова конструктора применяется оператор new . Вызов конструктора фактически напоминает вызов обычной функции.

Второй способ создания объекта представляет использование фигурных скобок:

Var user = {};

На сегодняшний день более распространенным является второй способ.

Свойства объекта

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

Var user = {}; user.name = "Tom"; user.age = 26;

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

Console.log(user.name); console.log(user.age);

Также можно определить свойства при определении объекта:

Var user = { name: "Tom", age: 26 };

В этом случае для присвоения значения свойству используется символ двоеточия, а после определения свойства ставится запятая (а не точка с запятой).

Кроме того, доступен сокращенный способ определения свойств:

Var name = "Tom"; var age = 34; var user = {name, age}; console.log(user.name); // Tom console.log(user.age); // 34

В данном случае названия переменных также являются и названиями свойств объекта. И таким образом можно создавать более сложные конструкции:

Var name = "Tom"; var age = 34; var user = {name, age}; var teacher = {user, course: "JavaScript"}; console.log(teacher.user); // {name: "Tom", age: 34} console.log(teacher.course); // JavaScript

Методы объекта

Методы объекта определяют его поведение или действия, которые он производит. Методы представляют собой функции. Например, определим метод, который бы выводил имя и возраст человека:

Var user = {}; user.name = "Tom"; user.age = 26; user.display = function(){ console.log(user.name); console.log(user.age); }; // вызов метода user.display();

Как и в случае с функциями методы сначала определяются, а потом уже вызываются.

Также методы могут определяться непосредственно при определении объекта:

Var user = { name: "Tom", age: 26, display: function(){ console.log(this.name); console.log(this.age); } };

Как и в случае со свойствами, методу присваивается ссылка на функцию с помощью знака двоеточия.

Чтобы обратиться к свойствам или методам объекта внутри этого объекта, используется ключевое слово this . Оно означает ссылку на текущий объект.

Также можно использовать сокращенный способ определения методов, когда двоеточие и слово function опускаются:

Var user = { name: "Tom", age: 26, display(){ console.log(this.name, this.age); }, move(place){ console.log(this.name, "goes to", place); } }; user.display(); // Tom 26 user.move("the shop"); // Tom goes to the shop

Синтаксис массивов

Существует также альтернативный способ определения свойств и методов с помощью синтаксиса массивов:

Var user = {}; user["name"] = "Tom"; user["age"] = 26; user["display"] = function(){ console.log(user.name); console.log(user.age); }; // вызов метода user["display"]();

Название каждого свойства или метода заключается в кавычки и в квадратные скобки, затем им также присваивается значение. Например, user["age"] = 26 .

При обращении к этим свойствам и методам можно использовать либо нотацию точки (user.name), либо обращаться так: user["name"]

Строки в качестве свойств и методов

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

Var user = { "name": "Tom", "age": 26, "display": function(){ console.log(user.name); console.log(user.age); } }; // вызов метода user.display();

С одной стороны, разницы никакой нет между двумя определениями. С другой стороны, бывают случаи, где заключение названия в строку могут помочь. Например, если название свойства состоит из двух слов, разделенных пробелом:

Var user = { name: "Tom", age: 26, "full name": "Tom Johns", "display info": function(){ console.log(user.name); console.log(user.age); } }; console.log(user["full name"]); user["display info"]();

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

Удаление свойств

Выше мы посмотрели, как можно динамически добавлять новые свойства к объекту. Однако также мы можем удалять свойства и методы с помощью оператора delete . И как и в случае с добавлением мы можем удалять свойства двумя способами. Певый способ - использование нотации точки:

Delete объект.свойство

Либо использовать синтаксис массивов:

Delete объект["свойство"]

Например, удалим свойство:

Var user = {}; user.name = "Tom"; user.age = 26; user.display = function(){ console.log(user.name); console.log(user.age); }; console.log(user.name); // Tom delete user.name; // удаляем свойство // альтернативный вариант // delete user["name"]; console.log(user.name); // undefined

После удаления свойство будет не определено, поэтому при попытке обращения к нему, программа вернет значение undefined.