Как получить имя класса js

Как обратиться к классу в javascript

Чтобы получить имя класса html-элемента, достаточно обратиться к свойству className этого элемента. Оно позволяет задать класс и получить его имя. Также можно задать несколько классов разделяя их пробелами. Кроме этого свойства есть ещё свойство classList , которое предоставляет разные методы по работе с классами.

const div1 = document.createElement('div'); div1.className = 'foo'; console.log(div1.outerHTML); // => console.log(div1.className); // => foo const div2 = document.createElement('div'); div2.className = 'foo bar'; console.log(div2.outerHTML); // => console.log(div2.className); // => foo bar const div3 = document.createElement('div'); div3.classList.add('foo'); console.log(div3.outerHTML); // => console.log(div3.classList); // => DOMTokenList ['foo', value: 'foo'] const div4 = document.createElement('div'); div4.classList.add('foo', 'bar', 'baz'); console.log(div4.outerHTML); // => console.log(div4.classList); // => DOMTokenList(3) ['foo', 'bar', 'baz', value: 'foo bar baz'] 

Получение имени типа объекта в JavaScript

Часто в разработке на JavaScript возникает потребность узнать, какого типа объект мы имеем. В языке Java для этого существует метод class.getName() , который возвращает имя класса объекта. Однако в JavaScript такого метода нет. Давайте разберемся, как можно получить имя типа объекта в JavaScript.

В JavaScript есть встроенный оператор typeof , который возвращает строку, указывающую тип операнда. Например:

console.log(typeof "John"); // "string" console.log(typeof 3.14); // "number" console.log(typeof <>); // "object" console.log(typeof null); // "object" console.log(typeof function() <>); // "function"

Однако, typeof не всегда ведет себя ожидаемо. Например, typeof null возвращает «object» , хотя null не является объектом. Кроме того, typeof не может различать разные виды объектов. Для всех объектов, массивов, дат и неопределенных значений typeof вернет «object» .

Для того чтобы получить более точную информацию о типе объекта, можно использовать метод Object.prototype.toString.call() . Этот метод возвращает строку, которая представляет собой объект и его тип. Например:

console.log(Object.prototype.toString.call("John")); // "[object String]" console.log(Object.prototype.toString.call(3.14)); // "[object Number]" console.log(Object.prototype.toString.call(<>)); // "[object Object]" console.log(Object.prototype.toString.call([])); // "[object Array]" console.log(Object.prototype.toString.call(null)); // "[object Null]" console.log(Object.prototype.toString.call(function() <>)); // "[object Function]"

Таким образом, если вам нужно получить имя типа объекта в JavaScript, вы можете использовать typeof для базовых типов, и Object.prototype.toString.call() для более сложных типов.

Как получить имя класса из объекта в JavaScript?

Это по-другому делается (с известными ограничениями — у null и undefined свойств не бывает, попытка обратиться к конструктору в их случае приведёт к TypeError ; кроме того, instanceof проверяет всю цепочку прототипов, т.е., например, [ 1, 2, 3 ] одновременно и instanceof Array , и instanceof Object ):

if (defaultBg1 instanceof Background) // или if (defaultBg1.constructor === Background) // или if (defaultBg1.constructor.name === 'Background')

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

const type = x => x == null ? `$` : x.constructor.name; type() // 'undefined' type(null) // 'null' type(true) // 'Boolean' type(69) // 'Number' type('hello, world!!') // 'String' type(/./) // 'RegExp' type([ 187 ]) // 'Array' type(< z: 666 >) // 'Object' type(document) // 'HTMLDocument' type(document.querySelectorAll('div')) // 'NodeList' type(new class XXX <>) // 'XXX' type(type) // 'Function'

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

Класс в JavaScript: базовый синтаксис и примеры. Часть первая

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

Например, объект car может иметь свойства name, color, speed и методы start, stop, accelerate.

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

Что такое класс

Класс — это шаблон или чертеж, по которому можно создавать объекты одного типа. Он определяет общие свойства и методы для всех объектов, которые будут созданы на его основе. Класс содержит в себе конструктор — метод, который вызывается при создании нового объекта и инициализирует его свойства. Класс также содержит в себе другие методы (функции), которые определяют поведение объекта. Методы класса хранятся в специальном свойстве prototype, которое является прототипом для всех объектов, созданных на основе класса.

Класс можно сравнить с фабрикой, которая производит объекты одного типа по заданному рецепту. Например, класс Car — это фабрика машин, которая принимает параметры name, color, speed и на их основе создает новые объекты car с соответствующими свойствами и методами.

Определение классов в JavaScript

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

Объявление класса — это способ определения класса с помощью ключевого слова class и имени класса, как мы делали ранее. Вот еще один пример:

class Car < constructor(name, color) < this.name = name; this.color = color; >>

Выражение класса — это способ определения класса с помощью ключевого слова class и выражения, которое может быть именованным или анонимным, к примеру:

• Анонимное выражение класса
• Именованное выражение класса

let Car = class < constructor(name, color) < this.name = name; this.color = color; >>;

let Car = class Car2 < constructor(name, color) < this.name = name; this.color = color; >>;

В обоих случаях мы присваиваем выражение класса переменной Car, которую можно использовать для создания объектов. Во втором случае имя выражения класса (Car2) доступно только внутри тела класса.

Посмотрите на часы! — сейчас самое время вам рассказать об одной особенности в определении классов.

Подъем (hoisting)

Объявление класса отличается от объявления функции тем, что объявление класса не поднимается (hoisted) в начало области видимости, в которой оно находится. Это означает, что нельзя использовать класс до того, как он будет определен. Если попытаться сделать это, будет выброшена ошибка ReferenceError.

Объяснение синтаксиса «class» на примере

Представьте, что нам нужно создать класс Car с тремя свойствами: name, color, speed и тремя методами: start, stop, accelerate.

Для определения класса мы будем использовать ключевое слово class, за которым следует имя класса (с большой буквы) и тело класса.

Тело класса — это фигурные скобки, внутри которых определяются конструктор, свойства и методы класса. Тело класса выполняется в строгом режиме (strict mode), что означает, что некоторые ошибки в коде будут более строго обрабатываться. Например, нельзя использовать необъявленные переменные или присваивать значения только для чтения свойствам.

Итак, начнем с объявления класса:

class Car < //Тело класса >

Теперь можно указать конструктор с тремя свойствами:

class Car < constructor(name, color, speed) < this.name = name; this.color = color; this.speed = speed; >>

Конструктор — метод, который вызывается при создании нового объекта и инициализирует его свойства. Он может быть только один в классе. Если constructor не указан явно, то используется конструктор по умолчанию, который не делает ничего.

В нашем случае конструктор принимает три параметра: name, color, speed и присваивает их соответствующим свойствам объекта через ключевое слово this.

И, наконец, добавим несколько методов:

class Car < constructor(name, color, speed) < this.name = name; this.color = color; this.speed = speed; >start() < console.log(this.name + ' завелась'); >stop() < console.log(this.name + ' остановилась'); >accelerate(value) < this.speed += value; console.log(this.name + ' разогналась до ' + this.speed + ' км/ч'); >>

Методы класса определяются без ключевого слова function и вызываются на объекте через точку. Они также могут обращаться к свойствам объекта через ключевое слово this.

Ну вот и все! Теперь можно создавать объекты.

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

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

let car1 = new Car("Audi", "black", 200); let car2 = new Car("BMW", "white", 180);

В этом примере мы создали два объекта car1 и car2 на основе класса Car, передав в конструктор разные значения. Оба объекта имеют одинаковые методы, но разные свойства. Обращение к свойствам и методам объекта происходит через точку:

console.log(car1.name); // Audi console.log(car2.color); // white car1.start(); // Audi завелась car2.accelerate(200); // BMW разогналась до 200 км/ч

Наследование класса

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

Давайте создадим класс Truck, который расширяет класс Car. Класс Truck будет наследовать все свойства и методы класса Car, но к ним добавится свойство capacity (грузоподъемность) и новый метод load (загрузка):

class Truck extends Car < constructor(name, color, speed, capacity) < super(name, color, speed); // Вызываем конструктор родительского класса this.capacity = capacity; // Добавляем новое свойство >load(value) < if (value else < console.log(this.name + ' не может загрузиться на ' + value + ' тонн'); >> >

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

Для создания объектов класса Truck также используется оператор new:

let truck1 = new Truck("Volvo", "red", 120, 10); let truck2 = new Truck("MAN", "blue", 100, 15);

Объекты класса Truck имеют доступ к свойствам и методам как своего класса, так и родительского:

console.log(truck1.capacity); // 10 console.log(truck2.speed); // 100 truck1.start(); // Volvo завелась truck2.load(12); // MAN загрузилась на 12 тонн

Геттеры и сеттеры

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

Что такое геттер

Геттер — это метод, который возвращает значение свойства. Для его определения используется ключевое слово get перед именем метода. Геттер не принимает аргументов.

Пример геттера:

class Rectangle < constructor(width, height) < this.width = width; this.height = height; >// Геттер для получения площади прямоугольника get area() < return this.width * this.height; >> 

Что такое сеттер

Cеттер — это метод, который присваивает значение свойству. Он принимает один аргумент — новое значение свойства, и определяется через ключевое слово set.

Пример сеттера:

class Rectangle < constructor(width, height) < this.width = width; this.height = height; >// Геттер для получения площади прямоугольника get area() < return this.width * this.height; >// Сеттер для установки ширины прямоугольника set width(value) < if (value >0) < this.width = value; >else < console.log("Ширина должна быть положительной"); >> // Сеттер для установки высоты прямоугольника set height(value) < if (value >0) < this.height = value; >else < console.log("Высота должна быть положительной"); >> >

В этом примере мы определили класс Rectangle, который имеет два свойства: width (ширина) и height (высота) и один геттер: area (площадь). Мы также определили сеттеры для свойств width и height, которые проверяют, что значение больше нуля.

Сейчас мы создадим два объекта rect1 и rect2 на основе класса Rectangle и обратимся к их свойствам и геттерам. А также попытаемся изменить значения свойств с помощью сеттеров:

//Создаем два новых объекта let rect1 = new Rectangle(10, 20); let rect2 = new Rectangle(5, 15); //Обращаемся к свойствам и геттерам console.log(rect1.area); // 200 console.log(rect2.area); // 75 //Изменяем значения свойств с помощью сеттеров rect1.width = -5; // Ширина должна быть положительной rect2.height = 25; console.log(rect1.area); // 200 console.log(rect2.area); // 125

Заметьте — геттеры и сеттеры вызываются как обычные свойства объекта, без скобок.

* Чтобы узнать продвинутые методы класса читайте вторую часть статьи тут.