В этом примере мы научимся создавать объект в JavaScript с помощью примеров. Объект в JavaScript — это шаблон, по которому мы можем создать экземпляр.
JavaScript — это язык программирования, основанный на шаблонах, а не на классах. Поэтому нам не нужно создавать класс в JavaScript, чтобы получить объект, как в Java.
В чисто объектно-ориентированном языке, таком как Java, объект — это экземпляр, созданный из класса. Нам нужно создать класс, прежде чем создавать его объект. Поскольку JavaScript основан на шаблонах, а не на классах, мы можем создавать объекты в JavaScript напрямую.
В основном существует три способа создания объектов для управления огромными задачами и наборами данных в приложении. Они следующие:
- По объектному литералу
- Создав экземпляр объекта напрямую (используя ключевое слово new)
- Использование функции-конструктора (с использованием ключевого слова new)
Давайте разберем каждый способ создания объекта в JavaScript по отдельности с примерами.
Создание объекта с использованием объектного литерала в JavaScript
Самый простой и популярный способ создания собственных объектов в JavaScript — использовать литерал объекта. Общий синтаксис для создания литерала объекта следующий:
var objectName = {
propertyName1: value1,
propertyName2: value2,
propertyName3: value3,
.
.
propertyNameN: valueN,
functionName1: function() {
// code for function
},
functionName2: function() {
// code for function
}
};
Это простой синтаксис создания объекта с использованием формата литерала объекта в JavaScript. В этом синтаксисе мы создали объект с именем objectName с фигурными скобками, где свойства и значения разделены двоеточием (:).
Давайте разберемся с этим на примере. В этом примере мы создадим объект с некоторыми свойствами, используя литерал объекта. Посмотрите на следующий фрагмент кода.
var person = {
// Declaration of properties of an object person.
firstName: "Bob",
lastName: "Ricky",
age: 20,
skinColor: "White"
};
В предыдущем примере кода создается объект с именем person, который содержит четыре свойства: firstName, lastName, age и skinColor.
Значения, содержащиеся в каждом свойстве, — это «Боб», «Рикки», 20 и «Белый» соответственно. Мы могли бы получить доступ к свойству firstName объекта person, используя точечную нотацию, например:
console.log(person.firstName);
Вы также можете писать свойства с одинарными кавычками вместо двойных. Для доступа к свойству объекта, за именем объекта должна следовать точка и имя свойства, к которому вы хотите получить доступ.
Примеры программ на основе объектного литерала
Давайте создадим простую программу JavaScript, в которой мы создадим объект с именем person, получим доступ к его различным свойствам и отобразим их в консоли браузера.
Пример 1:
<script>
// Create an object named person with four properties.
var person = {
firstName: 'Ivaan',
lastName: 'Sagar',
age: 18,
skinColor: "White"
};
// Accessing properties of person object.
console.log("First name: " +person.firstName);
console.log("Last name: " +person.lastName);
console.log("Age: " +person.age);
console.log("Skin color: " +person.skinColor);
</script>
Вывод:
Имя: Иван
Фамилия: Сагар
Возраст: 18
Цвет кожи: Белый
Давайте создадим еще одну программу JavaScript, в которой мы создадим объект с именем student и получим доступ к различным свойствам student и отобразим их в консоли браузера. Посмотрите на систематический фрагмент кода, чтобы лучше понять.
<script>
// Create an object named student with five properties and one function.
var student = {
firstName: "John",
lastName: "Herry",
schoolName: "RSVM",
rollNo: 02,
city: "Dhanbad",
myfunction: function() {
display(); // calling function.
}
};
// Creating a user-defined function named display.
function display() {
// Accessing properties of student object.
console.log("First name: " +student.firstName);
console.log("Last name: " +student.lastName);
console.log("School name: " +student.schoolName);
console.log("Roll no: " +student.rollNo);
console.log("City: " +student.city);
}
student.myfunction(); // Calling function using student object reference.
</script>
Вывод:
Имя: Джон
Фамилия: Херри
Название школы: RSVM
Рулон №: 2
Город: Дханбад
Давайте создадим программу на JavaScript, в которой будем выполнять сложение, вычитание, умножение и деление двух чисел и выводить полученные результаты в консоль браузера.
Пример 3:
<script>
var nums = {
x: 20,
y: 10,
addition: function() {
sum = nums.x+nums.y;
console.log("Addition: " +sum);
},
subtraction: function() {
sub = nums.x - nums.y;
console.log("Subtraction: " +sub);
},
multiplication: function() {
multiply = nums.x * nums.y;
console.log("Multiplication: " +multiply);
},
division: function() {
div = nums.x/nums.y;
console.log("Division: " +div);
}
};
function display() {
nums.addition();
nums.subtraction();
nums.multiplication();
nums.division();
}
display(); // Calling function.
</script>
Вывод:
Добавление: 30
Вычитание: 10
Умножение: 200
Подразделение: 2
Создавая экземпляр объекта
Мы можем создать объект в JavaScript напрямую, используя комбинацию ключевого слова new и функции конструктора Object(). Ключевое слово new и конструктор объекта создают пустой объект, в который мы затем можем добавить свойства и методы к объекту, используя точечную нотацию.
Каждое выражение, которое добавляет свойство и функцию к любому объекту, должно заканчиваться точкой с запятой. Общий синтаксис для создания объекта в JavaScript с использованием ключевого слова new и конструктора Object() выглядит следующим образом:
var objectName = new Object(); // blank object
objectName.propertyName1 = "Value1";
objectName.propertyName2 = "Value2";
objectName.propertyName3 = "Value3";
......
objectName.functionName1 = function()
{
// function code;
};
objectName.functionName2 = function()
{
// function code;
};
Рассмотрим следующий пример кода.
var school = new Object();
// Adding properties to object person.
school.scName = "RSVM";
school.city = "Dhanbad";
// Adding method to object school.
school.display = function()
{
// function code;
};
Давайте создадим очень простую программу JavaScript, в которой мы создадим экземпляр объекта, используя ключевое слово new и функцию-конструктор.
Пример 4:
<script>
// Creating an instance of Object.
var hotel = new Object();
// Adding properties to the object hotel.
hotel.name = "Park AV";
hotel.rooms = 200;
hotel.booked = 100;
// Adding functions to the object hotel.
hotel.checkAvailability = function()
{
return this.rooms - this.booked;
};
hotel.display = function()
{
let hotelName = hotel.name; // Accessing name of hotel.
console.log("Name of hotel: " +hotelName);
let availableRooms = hotel.checkAvailability(); // Accessing function.
console.log("Rooms left in hotel: " +availableRooms);
};
hotel.display();
</script>Вывод:
Название отеля: Park AV
Осталось номеров в отеле: 100
В этом примере мы использовали это ключевое слово, которое ссылается на текущий объект. Мы можем задать значения свойств объекта с помощью этого ключевого слова.
Создание множества объектов в JavaScript с использованием нотации конструктора
Иногда нам нужно создать много объектов для представления похожих вещей. В этой ситуации мы можем использовать функцию конструктора для создания нескольких объектов в JavaScript.
Для этого нам нужно создать функцию как шаблон с параметрами. Передаваемые значения аргументов мы можем назначить параметрам внутри текущего объекта, используя это ключевое слово.
Другими словами, мы можем задать свойства внутри объекта с помощью этого ключевого слова. Ключевое слово this относится к текущему объекту. Мы обычно использовали это ключевое слово внутри функций и объектов.
Например, рассмотрим объект «человек» со свойствами, такими как имя, возраст, пол:
function person(name, age, gender)
{
// Setting properties inside the object using this keyword.
this.name = name;
this.age = age;
this.gender = gender;
}
В этом примере мы создали функцию с именем person, которая представляет объект. Но мы использовали это ключевое слово со свойствами, которые создают конструктор.
Мы можем использовать это ключевое слово для назначения значений свойствам объекта на основе значений, переданных в функцию. Чтобы создать объект person с данными, мы должны создать переменную объекта, используя новое ключевое слово, например:
var per = new person("Micheal", 27, "Male");
Вышеуказанный оператор создает per и присваивает указанное значение его свойствам. Теперь значение per.name — это строка «Micheal», per.age — это целое число 27 и т. д.
Вы также можете создать много объектов-персон с помощью ключевого слова new. Например,
var per1 = new person("Tripti", 23, "Female");
var per2 = new person("Deep", 30, "Male");
var per3 = new person("Ivaan", 20, "Male");
Давайте создадим программу JavaScript, в которой мы будем отображать данные студента объекта student.
Пример 5:
// Code for creating an object in JavaScript with Constructor functions.
<script>
function Student()
{
// Assigning values of properties of object student using this keyword.
this.name = "Rashmi";
this.cName = "SSLNT";
this.rollNo = 05;
this.city = "Dhanbad";
}
let st = new Student();
console.log(st.name+ " " +st.cName+ " " +st.rollNo+ " " +st.city);
</script>
Выход:
Рашми SSLNT 5 Дханбад
В предыдущем примере мы создали функцию-конструктор для типа объекта Student. Мы присвоили значения свойствам объекта Student с помощью этого ключевого слова. После этого мы создали объект student с помощью ключевого слова new.
Давайте создадим программу JavaScript, в которой мы будем присваивать значения свойствам объекта, передавая значения в функцию. Мы создадим много объектов, используя функции-конструкторы, и передадим различные значения.
Пример 6:
<script>
function employee(name, cName, age, salary)
{
// Properties of employee.
this.name = name;
this.cName = cName;
this.age = age;
this.salary = salary;
}
// Creating three objects of employee type.
var emp = new employee("Ruchi", "IBM", 25, 80000);
console.log(emp.name+ " " +emp.cName+ " " +emp.age+ " " +emp.salary);
var emp = new employee("Tripti", "TCS", 23, 75000);
console.log(emp.name+ " " +emp.cName+ " " +emp.age+ " " +emp.salary);
var emp = new employee("Priya", "Infosys", 24, 58000);
console.log(emp.name+ " " +emp.cName+ " " +emp.age+ " " +emp.salary);
</script>
Вывод:
Ручи IBM 25 80000
Трипти TCS 23 75000
Прия Инфосис 24 58000
Изменение объекта-прототипа в JavaScript
JavaScript предоставляет расширенный прототип объекта-функции, который позволяет нам добавлять свойство ко всем экземплярам определенного объекта. Давайте рассмотрим пример программы, в которой мы добавим еще несколько свойств с помощью свойства-прототипа.
Пример 7:
// JavaScript example code for modifying prototype Object.
<script>
function Employee(name, age, salary)
{
this.name = name;
this.age = age;
this.salary = salary;
}
let emp = new Employee("John", 20, 90000);
console.log("Employee's name: " +emp.name+ ", " +"Age: "+emp.age, "Salary: " +emp.salary);
// Adding some more properties using prototype property.
Employee.prototype.id = 12345;
Employee.prototype.hike = 5500;
console.log("Employee's id: " +emp.id+ ", "+"Salary hike: " +emp.hike);
</script>
Вывод:
Имя сотрудника: Джон, Возраст: 20 Зарплата: 90000
Код сотрудника: 12345, Повышение зарплаты: 5500
Примечание:
Мы можем использовать метод конструктора объектов для создания объектов в JavaScript. Но мы считаем его худшим способом создания объектов по следующим причинам.
1. В этом методе нам требуется больше ввода данных, чем в методе объектного литерала.
2. Метод конструктора объектов работает не так хорошо в некоторых веб-браузерах.
3. Его сложнее читать и понимать, чем метод объектного литерала.
В этом уроке вы узнали, как создать объект в JavaScript с примером. Надеюсь, вы поняли все различные способы создания объектов в JavaScript.
Спасибо за чтение!!!
