Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


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


Пример

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

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


Типы объектов (чертежи) (классы)

Примеры из предыдущих глав ограничены. Они создают только одиночные объекты.

Иногда нам нужен « чертеж » для создания множества объектов одного и того же «типа».

Способ создания «типа объекта» заключается в использовании функции конструктора объекта .

В приведенном выше примере function Person()это функция конструктора объекта.

Объекты одного типа создаются вызовом функции-конструктора с newключевым словом:

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");


это ключевое слово

В JavaScript так называется thisобъект, который «владеет» кодом.

Значением thisпри использовании в объекте является сам объект.

В конструкторе функция thisне имеет значения. Это замена нового объекта. Значение thisстанет новым объектом при создании нового объекта.

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


Добавление свойства к объекту

Добавить новое свойство к существующему объекту очень просто:

Пример

myFather.nationality = "English";

Свойство будет добавлено в myFather. Не моей матери. (Не возражать против каких-либо других лиц).


Добавление метода к объекту

Добавить новый метод к существующему объекту очень просто:

Пример

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

Метод будет добавлен в myFather. Не моей матери. (Не возражать против каких-либо других лиц).


Добавление свойства в конструктор

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

Пример

Person.nationality = "English";

Чтобы добавить новое свойство в конструктор, вы должны добавить его в функцию конструктора:

Пример

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

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


Добавление метода в конструктор

Ваша функция-конструктор также может определять методы:

Пример

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.name = function() {
    return this.firstName + " " + this.lastName;
  };
}

Вы не можете добавить новый метод в конструктор объекта так же, как вы добавляете новый метод в существующий объект.

Добавление методов в конструктор объекта должно выполняться внутри функции-конструктора:

Пример

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName; 
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  };
}

Функция changeName() присваивает значение имени свойству lastName человека.

Теперь вы можете попробовать:

myMother.changeName("Doe");

JavaScript знает, о каком человеке вы говорите, «заменяя» this на myMother .


Встроенные конструкторы JavaScript

В JavaScript есть встроенные конструкторы для нативных объектов:

new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object

Объекта Math()нет в списке. Mathявляется глобальным объектом. Ключевое newслово нельзя использовать в Math.


Вы знали?

Как вы можете видеть выше, в JavaScript есть объектные версии примитивных типов данных String, Numberи Boolean. Но нет смысла создавать сложные объекты. Примитивные значения намного быстрее:

Используйте строковые литералы ""вместо new String().

Используйте числовые литералы 50вместо new Number().

Используйте логические литералы true / falseвместо new Boolean().

Используйте литералы объектов {}вместо new Object().

Используйте литералы массива []вместо new Array().

Используйте литералы шаблонов /()/вместо new RegExp().

Используйте функциональные выражения () {}вместо new Function().

Пример

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean

const x4 = {};           // new Object object
const x5 = [];           // new Array object
const x6 = /()/          // new RegExp object
const x7 = function(){}; // new function

Строковые объекты

Обычно строки создаются как примитивы: firstName = "John"

Но строки также могут быть созданы как объекты с помощью newключевого слова:
firstName = new String("John")

Узнайте, почему строки не должны создаваться как объекты, в главе « Строки JS» .


Количество объектов

Обычно числа создаются как примитивы: x = 30

Но числа также могут быть созданы как объекты с помощью newключевого слова:
x = new Number(30)

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


Логические объекты

Обычно логические значения создаются как примитивы: x = false

Но логические значения также можно создавать как объекты с помощью newключевого слова:
x = new Boolean(false)

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