Объекты JavaScript. Часть 8 Курс JavaScript от начального до продвинутого в 10 сообщениях в блоге

Это восьмая часть серии сообщений в блоге о JavaScript, которая проведет вас от новичка до продвинутого уровня. Если вы не читали предыдущую запись в блоге о функциях JavaScript, вы можете проверить ее здесь. К концу этой серии вы будете знать все основы, которые вам нужно знать, чтобы начать программировать на JavaScript. Без дальнейших церемоний, давайте начнем с восьмого урока.

Объекты JavaScript – оглавление:

1. Объекты JavaScript
2. Функции конструктора объектов

Объекты JavaScript

Объекты JavaScript играют важную роль. Хотя это относительно большая тема, также может быть относительно легко развить их понимание. Один из наиболее распространенных способов понимания объектов — представить их так, будто вы воссоздаете автомобиль в коде. Когда мы будем иметь дело с объектами, у нас будет два основных понятия. У них будут свойства и методы. Свойства — это то, что есть у объектов javascript, а методы — это то, что объекты могут выполнять. Давайте посмотрим, что на некоторых примерах.

// let's define multiple objects to have a better understanding
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "Plane starts taking off..."},
    land: function(){return "Plane starts landing..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "The car moves forward..."},
    smartSummon: function(){return "The car starts driving itself to you..."}
}

// we can access and console log the properties they have:
console.log("The properties for the plane:");
console.log("Can fly: " + plane.canFly);
console.log("Total number of wings: " + plane.numberOfWings);
// we can also make the plane perform actions
console.log(plane.takeOff());
console.log(plane.land());
// if you take a closer look, you can see that 
// we do not directly console.log the actions inside the methods
// instead we return them from the functions
// and in this case we are console logging them
// this way if we want we can also give the user an alert
// that tells the plane is taking off
alert(plane.takeOff());
// we can also learn about the properties the car has 
// and console log them as well for additional practice
console.log("Is it an electric car? " + car.isElectric);
console.log("What is the brand of the car: " + car.brand);
console.log("How many doors does it have? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

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

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

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

// when we retrieve a property we do not use brackets at the end
console.log("Can fly: " + plane.canFly);
// when we retrieve methods, 
// we also run them by adding brackets after them
// methods here are essentially functions that 
// belong to a specific object
console.log(plane.takeOff());

Важно, чтобы мы добавили круглые скобки после методов, как мы это делали с обычными функциями. В противном случае у нас будет просто сама функция, а не выполнение функции.

// in order to execute the object method we should
// add the parenthesis right after the method name
// otherwise we will get the method definition 
// like in this example
alert(plane.takeOff);

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

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

// both of them are equally valid and 
// give us the same results
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// check out the JavaScript console for the results

Замечательно, что мы можем хранить множество подробных свойств и действий, которые мы можем выполнять с помощью объектов, но что, если бы нам нужно было использовать объекты не только для 1 автомобиля, но, скажем, для 20 автомобилей, 100 автомобилей или даже 1 000 000 автомобилей каждый с уникальный идентификатор и различные значения свойств. Придется ли нам вводить весь этот код с нуля для каждой машины? Ответ - нет. Вместо этого мы можем использовать нечто, называемое функцией конструктора объектов.

Функции конструктора объектов

Конструкторы объектов могут значительно ускорить процесс написания кода и сделать ваш код более СУХИМ. С помощью функций конструктора объектов мы, по сути, определяем схему объекта. Когда у нас есть план объекта, мы можем создать столько экземпляров этого объекта гораздо более четким способом, с гораздо меньшим количеством повторений. Давайте посмотрим, что на некоторых примерах.

// this is how we define a blueprint for the objects
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// this is how we can instanciate the 
// javascript objects we want to create from 
// the blueprint we defined above
// in this case we create 3 car objects 
// with diffent values for the properties
const car1 = new Car(1, "white", true, 4);
const car2 = new Car(2, "black", true, 2);
const car3 = new Car(3, "red", false, 4);
// we can access object properties just like we did before
console.log("Color of first car is: " + car1.color);
console.log("Color of second car is: " + car2.color);
console.log("Color of third car is: " + car3.color);

Запуск приведенного выше кода даст нам следующий вывод кода:

Как вы можете видеть из приведенного выше кода, когда у нас есть план, мы можем просто передавать разные значения для создания разных объектов javascript из исходного плана. Одна вещь, которую вы, вероятно, заметили, заключается в том, что в соответствии с соглашением об именах для конструктора объектов первая буква должна быть заглавной. В данном случае вместо того, чтобы определять его как «автомобиль», мы назвали его «Автомобиль». Если бы нам нужно было создать класс самолета, мы бы назвали его «Плоскость».

Когда мы хотим создать объекты из нашего определенного плана, мы используем ключевое слово «новый», а затем пишем имя функции конструктора объекта, которую мы хотим использовать. После имени мы открываем и закрываем скобки и передаем аргументы, с которыми хотим создать наш объект. Обратите внимание, что мы не повторяем имена параметров, мы просто передаем значения в том же порядке, что и параметры. Вы также могли заметить, что при создании чертежа мы используем ключевое слово «это». На данный момент вы должны знать, что ключевое слово «this» позволяет ссылаться на сам объект, и оно является частью шаблонного кода, который мы должны написать при создании схемы объекта.

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

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

В следующем уроке мы обнаружим больше тем и концепций, которые очень важны и часто используются в JavaScript.

Автор: Роберт Уитни

Эксперт и инструктор по JavaScript, который тренирует ИТ-отделы. Его главная цель — повысить продуктивность команды, научив других эффективно сотрудничать при написании кода.

Просмотреть все сообщения

Курс JavaScript от начального до продвинутого в 10 сообщениях в блоге:

1. Как начать программировать на JavaScript?
2. Основы JavaScript
3. Переменные и разные типы данных в JavaScript
4. Фрагменты и управляющие структуры
5. Циклы while и циклы for
6. Массив Java
7. Функции JavaScript
8. Объекты JavaScript
9. Методы JavaScript и многое другое
10. Краткое содержание курса JavaScript