Почему в DevTools при вводе цифры показываются методы только для number?

Визуализация прототипной цепочки для примитивов в DevTools

Когда вы вводите цифру в консоли браузера, например 42, и видите методы только для числа, это демонстрирует ключевой механизм JavaScript — автоматическую упаковку примитивов (autoboxing или primitive wrapping).

Механизм временных объектов-обёрток

JavaScript различает примитивные типы (number, string, boolean и др.) и объекты. Примитивы не имеют методов — они просто значения. Однако для удобства разработки JavaScript автоматически создаёт временный объект-обёртку, когда вы пытаетесь обратиться к свойству или методу примитива:

// Пример с числом
const num = 42;
console.log(num.toFixed(2)); // "42.00"

На самом деле происходит следующее:

// Что происходит за кулисами:
const num = 42;
const tempObject = new Number(num); // Автоматическая упаковка
console.log(tempObject.toFixed(2)); // Вызов метода
// tempObject уничтожается после выполнения

Как это работает в DevTools

1. Ввод примитива: Когда вы вводите 42 в консоли
2. Создание обёртки: JavaScript временно создаёт объект Number(42)
3. Отображение прототипа: DevTools показывает прототипную цепочку этого временного объекта
4. Уничтожение обёртки: После отображения временный объект удаляется

// DevTools фактически делает примерно следующее:
const userInput = 42;
const tempWrapper = Object(userInput); // Создание обёртки
console.dir(tempWrapper); // Отображение методов из Number.prototype

Причина такого поведения

• Экономия памяти: Числа, строки, булевы значения используются очень часто. Хранение их как легковесных примитивов значительно эффективнее
• Единообразие API: Разработчики могут использовать удобные методы (toFixed(), toString(), split() для строк) без ручного создания объектов
• Обратная совместимость: Механизм существует с ранних версий JavaScript и поддерживает весь существующий код

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

Для разных типов создаются разные объекты-обёртки:

42 → Number.prototype → Object.prototype
"text" → String.prototype → Object.prototype
true → Boolean.prototype → Object.prototype

Сравнение с другими типами

// Number - показывает методы из Number.prototype
42

// String - показывает методы из String.prototype
"hello"

// Boolean - показывает методы из Boolean.prototype
true

// null и undefined - не имеют методов
null // Ошибка при попытке доступа к свойствам
undefined // Ошибка при попытке доступа к свойствам

Важные следствия

1. Временная природа: Объект-обёртка существует только на момент выполнения операции
2. Строгое равенство: Примитив не равен своему объекту-обёртке

   42 === new Number(42) // false
   typeof 42 // "number"
   typeof new Number(42) // "object"
   

3. Производительность: Частое создание обёрток может влиять на производительность в горячих участках кода

Практический пример в консоли

Попробуйте в консоли:

// Простое число
42

// Разверните __proto__ в DevTools - увидите методы Number
// Затем попробуйте:
(42).__proto__ === Number.prototype // true

// Все методы чисел находятся в Number.prototype
Object.getOwnPropertyNames(Number.prototype)
// ["constructor", "toExponential", "toFixed", ...]

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