Обзор объектов JavaScript - с примером - httpdoc.ru

Обзор объектов JavaScript

Объекты JavaScript - JavaScript - это язык объектно-ориентированного программирования (ООП). Особенности объектно-ориентированного языка программирования:

  • Инкапсуляция: возможность хранить связанную информацию, будь то данные или методы, вместе в одном объекте (объекте).
  • Агрегация: Агрегация - это особая форма ассоциации. Это отношения между двумя классами, такие как ассоциация, однако это направленная ассоциация, что означает, что это строго односторонняя ассоциация. Он представляет собой отношения HAS-A.
  • Наследование: способность класса передавать или сохранять свойства другим классам и обратно.
  • Полиморфизм: возможность написать одну функцию или метод, которые работают по-разному, т. Е. Используя одну функцию разными способами.

Объекты состоят из атрибутов. Если объект содержит какую-либо функцию, то эта функция вызывается как метод объекта, в противном случае атрибут считается свойством.


Есть разные способы создания новых объектов:

  • Использование литерала объекта.
  • С ключевым словом new .
  • Определите конструктор объекта, а затем создайте объекты сконструированного типа.
Синтаксис
объект = {свойство1: значение1, свойство2: значение2. . . . .}

Литерал объекта JavaScript

При использовании литерала объекта как определение, так и создание объекта выполняется в одном операторе.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Objects </title> 
</head> 
<body> 

<p>Creating a JavaScript Object.</p>

<p id="demo"></p>

<script>
var person = {firstName:"John", lastName:"Snow", age:30, eyeColor:"brown"};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName +

 " is " + person.age + " years old" + " and " + person.eyeColor + " eye color.";
</script>

</body>
</html>

Выход

JavaScript Objects

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

Джону Сноу 30 лет, у него карие глаза.


Ключевое слово JavaScript новое

new Оператор используется для создания экземпляра объекта. Чтобы создать объект, за оператором new следует метод конструктора.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript New Keyword </title> 
</head> 

<body> 
<p id="demo"></p>
<script>
 var person = new Object();
 person.firstName = "John";
 person.lastName = "Snow";
 person.age = 50;
 person.eyeColor = "blue"; 

 document.getElementById("demo").innerHTML = person.firstName + person.lastName +" is " + person.age + 

 " years old" + " and his eye color is " + person.eyeColor + ".";
</script>

</body>
</html>

Выход

JavaScript New Keyword

ДжонуСноу 50 лет, и у него голубой цвет глаз.


Конструктор объектов JavaScript

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

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Object Constructor </title> 
</head> 
<body> 
<p id="demo"></p>
<script>
function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

var mybrother = new person("John", "Snow", 30, "blue");
var mysister = new person("Jennifer", "Winget", 25, "green");

document.getElementById("demo").innerHTML = "My brother is " + mybrother.age + 

". My sister is " + mysister.age; 

</script>
</body>
</html>

Выход

JavaScript Object Constructor

Моему брату 30. Моей сестре 25.


Объектный метод JavaScript

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Object Method </title> 

<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
  this.price = amount; 
}

function book(title, author){
  this.title = title; 
  this.author  = author;
  this.addPrice = addPrice; // Assign that method as property.
}

</script>
</head> 
<body> 
<script type="text/javascript">
 var myBook = new book("Everyone has a Story", "Savi Sharma");
 myBook.addPrice(200);
 document.write("Book Title is : " + myBook.title + "<br>");
 document.write("Book Author is : " + myBook.author + "<br>");
 document.write("Book Price is : " + myBook.price + "<br>");
</script>
</body>
</html>

Выход

JavaScript Object Method Название книги: У каждого есть своя
книга. Автор: Сави Шарма.
Цена книги: 200.

Удаление объекта JavaScript

delete Оператор используется , чтобы полностью удалить свойство объекта.

Установка для свойства значения undefined или null изменяет только значение свойства, но не удаляет свойство из delete объекта. Таким образом, только оператор может удалить объект.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Object Delete </title> 
</head> 
<body> 
 <script>
 var person = {
  name: "Kuldeep",
  age: 25,
  gender: "Male",
  displayName: function() {
  alert(this.name);
   }
    };
    
    // Deleting property
    delete person.age;
    document.write(person.age); 
    </script>
</body>
</html>

Выход

JavaScript Object Delete неопределенный

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