Как работает вызов поля объекта?

Как работает вызов поля объекта

Это фундаментальный вопрос о том, как JavaScript работает с объектами. На первый взгляд просто, но есть много нюансов и граничных случаев.

1. Базовый доступ к свойству

const user = {
  name: 'Иван',
  age: 25
};

// Способ 1: Точечная нотация
const name = user.name; // 'Иван'

// Способ 2: Квадратные скобки
const age = user['age']; // 25

// Способ 3: Деструктуризация
const { name, age } = user; // name = 'Иван', age = 25

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

2. Что происходит когда мы обращаемся к свойству

Когда мы пишем user.name, JavaScript делает следующее:

// Примерно так это работает внутренне
1. Проверяет, есть ли свойство 'name' в самом объекте
2. Если нет - ищет в прототипе объекта (prototype chain)
3. Если нет - ищет в прототипе прототипа и т.д.
4. Если ничего не найдено - возвращает undefined

const obj = { x: 10 };
console.log(obj.toString); // Function (унаследовано из Object.prototype)
console.log(obj.y);        // undefined (не существует)

3. Цепочка прототипов (Prototype Chain)

const user = { name: 'Иван' };

// user имеет доступ к методам Object.prototype
user.hasOwnProperty('name'); // true
user.toString();              // [object Object]

// Схема:
// user -> Object.prototype -> null

const user = Object.create(null); // Объект без прототипа
user.name = 'Иван';
user.hasOwnProperty('name'); // Error: hasOwnProperty не существует!

4. Точечная нотация vs Квадратные скобки

const obj = {
  name: 'Иван',
  'user-age': 25,        // Имя с дефисом нельзя писать через точку
  123: 'number key'      // Числовой ключ
};

// Точечная нотация - только для валидных идентификаторов
const name = obj.name;      // OK
const age = obj.user-age;  // ERROR: age не определён!

// Квадратные скобки - универсальны
const age = obj['user-age']; // OK: 25
const key = obj[123];        // OK: 'number key'
const dynamic = obj[someVariable]; // OK: можно использовать переменные

5. Getter и Setter

Можно определить custom логику для получения/установки значения:

const user = {
  firstName: 'Иван',
  lastName: 'Петров',
  
  get fullName() {         // Getter - вызывается при чтении
    return this.firstName + ' ' + this.lastName;
  },
  
  set fullName(name) {     // Setter - вызывается при записи
    const parts = name.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

console.log(user.fullName); // 'Иван Петров' (вызов getter)
user.fullName = 'Петр Сидоров'; // Вызов setter
console.log(user.firstName); // 'Петр'

6. Optional Chaining (?.) - Безопасный доступ

const user = {
  profile: {
    address: {
      street: 'Ленина'
    }
  }
};

// Старый способ - много проверок
const street = user && user.profile && user.profile.address && user.profile.address.street;

// Новый способ - optional chaining
const street = user?.profile?.address?.street; // 'Ленина'
const city = user?.profile?.address?.city;    // undefined (не ошибка!)

// Работает и для массивов
const items = user?.profile?.items?.[0]?.name; // undefined

7. Nullish Coalescing (??)

const config = {
  timeout: 0,
  retries: null,
  apiKey: undefined
};

// Старый способ - || считает 0 и false за "ничего"
const timeout1 = config.timeout || 5000; // 5000 (ОШИБКА! 0 - валидное значение)

// Новый способ - ?? игнорирует только null и undefined
const timeout2 = config.timeout ?? 5000; // 0 (ПРАВИЛЬНО!)
const retries = config.retries ?? 3;      // 3

8. Object.defineProperty - Полный контроль

const obj = {};

Object.defineProperty(obj, 'x', {
  value: 10,
  writable: false,      // Нельзя изменять
  enumerable: true,     // Видно в for...in
  configurable: false   // Нельзя удалять или переопределять
});

obj.x = 20;             // Молча игнорируется (в strict mode - error)
delete obj.x;           // Молча игнорируется

for (const key in obj) {
  console.log(key);     // 'x' (enumerable: true)
}

Object.keys(obj);       // ['x']

9. Глубокое копирование объектов

const original = { x: 10, y: { z: 20 } };

// Поверхностное копирование - новый объект, но свойства - ссылки
const shallow = { ...original };
shallow.y.z = 30; // Меняет и original!

// Глубокое копирование
const deep = JSON.parse(JSON.stringify(original)); // Простой способ
deep.y.z = 30; // original не меняется

// Или с strukturalClone (новый API)
const deep2 = structuredClone(original);

10. Производительность

const obj = { x: 10 };

// Точечная нотация обычно быстрее
obj.x;           // Быстро
obj['x'];        // Чуть медленнее
obj[variable];   // Медленнее всего (нужно вычислять переменную)

// Для мало-мальски критичного кода лучше кэшировать
const x = obj.x;
for (let i = 0; i < 1000000; i++) {
  // использовать x, а не obj.x
}

11. In оператор

const user = { name: 'Иван' };

// Проверка наличия свойства
'name' in user;         // true
'age' in user;          // false
'toString' in user;     // true (унаследовано)

// Проверка только собственного свойства
user.hasOwnProperty('name');   // true
user.hasOwnProperty('toString'); // false (не собственное)

// Object.keys не включает унаследованные
Object.keys(user);      // ['name']

Итог

Доступ к полям объекта - это просто на поверхности, но JavaScript имеет много встроенной магии (getters, setters, prototype chain, дескрипторы свойств). Понимание этих деталей помогает писать более эффективный и безопасный код.