Объекты JavaScript

Оглавление

    Показать оглавление

В JavaScript объекты — король. Если вы понимаете объекты, вы понимаете JavaScript.

В JavaScript почти «все» является объектом.

  • Логические значения могут быть объектами (если они определены с помощью ключевого слова new)

  • Числа могут быть объектами (если они определены с помощью ключевого слова new).

  • Строки могут быть объектами (если они определены с помощью ключевого слова new).

  • Даты всегда являются объектами

  • Математика - это всегда объекты

  • Регулярные выражения всегда являются объектами

  • Массивы всегда являются объектами

  • Функции всегда являются объектами

  • Объекты всегда являются объектами

Все значения JavaScript, за исключением примитивов, являются объектами.

Примитивы JavaScript

Примитивное значение - это значение, не имеющее свойств или методов.

3.14 — примитивное значение.

Примитивный тип данных — это данные, имеющие примитивное значение.

JavaScript определяет 7 типов примитивных типов данных:

Примеры

    

  • string
    • 

  • number
    • 

  • boolean
    • 

  • null
    • 

  • undefined
    • 

  • symbol
    • 

  • bigint
    •

Неизменный

Примитивные значения неизменяемы (они жестко запрограммированы и не могут быть изменены).

если x=3,14, вы можете изменить значение x, но не можете изменить значение 3,14.

ValueTypeComment
"Hello"string"Hello" is always "Hello"
3.14number3.14 is always 3.14
truebooleantrue is always true
falsebooleanfalse is always false
nullnull (object)null is always null
undefinedundefinedundefined is always undefined

Объекты являются переменными

Переменные JavaScript могут содержать отдельные значения:

Пример

let person = "John Doe";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

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

<script>
// Create and display a variable:
let person = "John Doe";
document.getElementById("demo").innerHTML = person;
</script>

</body>
</html>

Переменные JavaScript также могут содержать множество значений.

Объекты тоже являются переменными. Но объекты могут содержать множество ценности.

Значения объекта записываются в виде пар имя: значение (имя и значение, разделенные символом двоеточие).

Пример

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

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

<script>
let person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

Объект JavaScript - это коллекция именованных значений.

Общепринятой практикой является объявление объектов с помощью ключевого слова const.

Пример

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

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

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

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

Именованные значения в объектах JavaScript называются свойствами.

firstName

Джон

lastName

Доу

age

50

eyeColor

синий

Объекты, записанные как пары «имя-значение», аналогичны:

  • Ассоциативные массивы в PHP

  • Словари на Python

  • Хэш-таблицы в C

  • Хэш-карты в Java

  • Хэши в Ruby и Perl

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

Методы — это действия, которые можно выполнять над объектами.

Свойства объекта могут быть как примитивными значениями, так и другими объектами и функциями.

Метод объекта - это свойство объекта, содержащее функцию. определение.

firstName

Джон

lastName

Доу

age

50

eyeColor

синий

fullName

function() {return this.firstName + " " + this.lastName;}

Объекты JavaScript — это контейнеры для именованных значений, называемых свойствами и методами.

Вы узнаете больше о методах в следующих главах.

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

С помощью JavaScript вы можете определять и создавать свои собственные объекты.

Существуют различные способы создания новых объектов:

  • Создайте один объект, используя литерал объекта.

  • Создайте один объект с ключевым словом new.

  • Определите конструктор объекта, а затем создайте объекты сконструированного типа.

  • Создайте объект, используя Object.create().

Использование литерала объекта

Это самый простой способ создать объект JavaScript.

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

Литерал объекта — это список пар имя:значение (например, age:50) внутри фигурных скобок {}.

В следующем примере создается новый объект JavaScript с четырьмя свойствами:

Пример

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = {firstName:"John", lastName:"Doe", age:50,eyeColor:"blue"};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Пробелы и переносы строк не имеют значения. Определение объекта может занимать несколько строк:

Пример

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

В этом примере создается пустой объект JavaScript, а затем добавляет 4 свойства:

Пример

const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Использование ключевого слова JavaScript new

В следующем примере создается новый объект JavaScript. используя new Object(), а затем добавляет 4 свойства:

Пример

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Примеры выше делают то же самое.

Но нет необходимости использовать new Object().

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

Объекты JavaScript изменяемы

Объекты изменяемы: к ним обращаются по ссылке, а не по значению.

Если person является объектом, следующий оператор не создаст копию person:

const x = person;  // Will not create a copy of person.

Объект x не является копией человека. Это есть человек. И x, и person — один и тот же объект.

Любые изменения x также изменят person, поскольку x и person — один и тот же объект.

Пример

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}
 
const x = person;
x.age = 10;      // Will change both x.age and person.age

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JavaScript objects are mutable.</p>
<p>Any changes to a copy of an object will also change the original object:</p>

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

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age:50,
  eyeColor: "blue"
};

const x = person;
x.age = 10;

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>