Объекты JavaScript

Оглавление

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

Реальные объекты, свойства и методы

В реальной жизни автомобиль — это объект.

У автомобиля есть свойства, такие как вес и цвет, а также методы, такие как запуск и остановка:

Object Properties Methods

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white
car.start()

car.drive()

car.brake()

car.stop()

Все автомобили имеют одинаковые свойства, но значения свойств различаются от автомобиля к автомобилю.

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

Объекты JavaScript

Вы уже узнали, что переменные JavaScript контейнеры для значений данных.

Этот код присваивает простое значение (Fiat) переменная с именем car:

let car = "Fiat";

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

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

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

</body>
</html>

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

Этот код присваивает множество значений (Fiat, 500, белый) переменная названный автомобиль:

const car = {type:"Fiat", model:"500", color:"white"};

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

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

<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>

</body>
</html>

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

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

Узнайте больше об использовании const с объектами в главе: JS Const.

Определение объекта

Вы определяете (и создаете) объект JavaScript с помощью литерала объекта:

Пример

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

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

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

// Display some data from the object:
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 id="demo"></p>

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

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

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

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

firstName

Джон

lastName

Доу

age

50

eyeColor

синий

Доступ к свойствам объекта

Доступ к свойствам объекта можно получить двумя способами:

objectName.propertyName

или

objectName["propertyName"]

Пример1

person.lastName;

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>

Пример2

person["lastName"];

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>

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

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

Объекты также могут иметь методы.

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

Методы хранятся в свойствах как функция. определения.

firstName

Джон

lastName

Доу

age

50

eyeColor

синий

fullName

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

Метод — это функция, хранящаяся как свойство.

Пример

const person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

В приведенном выше примере this относится к объекту person.

И.Э. this.firstName означает свойство firstName объекта this.

И.Э. this.firstName означает свойство firstName объекта person.

Что это это?

В JavaScript ключевое слово this относится к объекту.

Какой объект зависит от того, как этот вызывается (используется или вызывается).

Ключевое слово this относится к разным объектам в зависимости от того, как оно используется:

  • В объектном методе this относится к объекту.

  • Само по себе это относится к глобальному объекту.

  • В функции this относится к глобальному объекту.

  • В функции в строгом режиме это имеет значение не определено.

  • В событии this относится к элементу, получившему событие.

  • Такие методы, как call(), apply() и bind() может ссылаться на this на любой объект.

Примечание

это не является переменной. Это ключевое слово. Вы не можете изменить значение this.

Смотрите также:

это руководство по JavaScript

Ключевое слово this

В определении функции this относится к «владельцу» функции.

В приведенном выше примере это является объектом person, который "владеет" полное имя.

Другими словами, this.firstName означает свойство firstName этого объекта.

Узнайте больше о этом в этом руководстве по JavaScript.

Доступ к методам объекта

Доступ к методу объекта осуществляется с помощью следующего синтаксиса:

objectName.methodName()

Пример

name = person.fullName();

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Если вы получаете доступ к методу без круглых скобок(), он вернет определение функции:

Пример

name = person.fullName;

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>

Не объявляйте строки, числа и логические значения объектами!

Когда переменная JavaScript объявлена с ключевым словом «new», эта переменная создан как объект:

x = new String();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

Избегайте объектов String, Number и Boolean. . Они усложняют ваш код и замедляют работу скорость выполнения.

Вы узнаете больше об объектах позже в этом уроке.