Для чего существует экземпляр объекта?

Экземпляр объекта (Instance) — что это и зачем

Экземпляр (instance) — это конкретное значение объекта, созданное на основе класса или конструктора. Это фундаментальная концепция ООП (Object-Oriented Programming).

Класс vs Экземпляр

Класс — план/шаблон:

class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }
  
  drive() {
    console.log(`Driving ${this.brand} ${this.model}`);
  }
}

// Car — это класс (план)

Экземпляр — конкретный объект:

const myCar = new Car('Toyota', 'Camry'); // Экземпляр
const yourCar = new Car('BMW', 'X5');    // Другой экземпляр

console.log(myCar.brand); // 'Toyota'
console.log(yourCar.brand); // 'BMW'

myCar.drive(); // "Driving Toyota Camry"
yourCar.drive(); // "Driving BMW X5"

Почему нужны экземпляры

1. Изоляция состояния (Encapsulation)

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  
  changeName(newName) {
    this.name = newName;
  }
}

const user1 = new User('John', 'john@example.com');
const user2 = new User('Jane', 'jane@example.com');

user1.changeName('Johnny');

console.log(user1.name); // 'Johnny'
console.log(user2.name); // 'Jane' (не изменилась!)

Без экземпляров это было бы невозможно.

2. Переиспользование кода

// Вместо этого
const user1 = {
  name: 'John',
  email: 'john@example.com',
  greet() { return `Hello, ${this.name}`; }
};

const user2 = {
  name: 'Jane',
  email: 'jane@example.com',
  greet() { return `Hello, ${this.name}`; }
};

// Используем класс
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  greet() { return `Hello, ${this.name}`; }
}

const user1 = new User('John', 'john@example.com');
const user2 = new User('Jane', 'jane@example.com');

3. Наследование и полиморфизм

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

class Cat extends Animal {
  speak() {
    console.log(`${this.name} meows`);
  }
}

const dog = new Dog('Rex');
const cat = new Cat('Whiskers');

dog.speak(); // "Rex barks"
cat.speak(); // "Whiskers meows"

// Полиморфизм
const animals = [dog, cat];
animals.forEach(animal => animal.speak());

Экземпляры в React

Классовые компоненты (старый подход):

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
  }
  
  render() {
    return (
      <button onClick={() => this.setState({ clicked: true })}>
        {this.state.clicked ? 'Clicked!' : 'Click me'}
      </button>
    );
  }
}

const button1 = <Button />; // Экземпляр
const button2 = <Button />; // Другой экземпляр

// Каждый экземпляр имеет своё состояние

Функциональные компоненты (современный подход):

function Button() {
  const [clicked, setClicked] = useState(false);
  // Каждый вызов — как новый экземпляр
  
  return (
    <button onClick={() => setClicked(true)}>
      {clicked ? 'Clicked!' : 'Click me'}
    </button>
  );
}

// React создаёт экземпляры внутри, но код выглядит проще

instanceof — проверка типа

class User {}
class Admin extends User {}

const user = new User();
const admin = new Admin();

console.log(user instanceof User);  // true
console.log(user instanceof Admin); // false

console.log(admin instanceof Admin); // true
console.log(admin instanceof User);  // true (наследование)

// Без класса
const obj = { name: 'John' };
console.log(obj instanceof User); // false

Создание экземпляров разными способами

1. Классы (ES6+ standard):

class User {
  constructor(name) {
    this.name = name;
  }
}

const user = new User('John');

2. Функции-конструкторы (старый способ):

function User(name) {
  this.name = name;
}

const user = new User('John');

3. Объектные литералы (без класса):

const user = {
  name: 'John',
  greet() { return 'Hello'; }
};

// Это не экземпляр класса, просто объект

4. Factory functions (паттерн):

function createUser(name) {
  return {
    name,
    greet() { return `Hello, ${this.name}`; }
  };
}

const user = createUser('John'); // Похоже на экземпляр

Методы экземпляра vs статические

class Math2 {
  // Метод экземпляра (нужен экземпляр)
  square(n) {
    return n * n;
  }
  
  // Статический метод (не нужен экземпляр)
  static add(a, b) {
    return a + b;
  }
}

const math = new Math2();
math.square(5); // 25 (нужен экземпляр)

Math2.add(5, 3); // 8 (не нужен экземпляр)

Объект как экземпляр

// Проверка, является ли что-то объектом
const user = new User('John');

console.log(typeof user); // 'object'
console.log(user instanceof User); // true
console.log(user.constructor.name); // 'User'

// Получение всех свойств экземпляра
Object.keys(user); // ['name', 'email', ...]
Object.getOwnPropertyNames(user); // ['name', 'email', ...]

Когда я создаю экземпляры в реальной работе

1. В React компонентах:

function useUser(userId) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    // Каждый раз создаём новый "экземпляр" user
    fetchUser(userId).then(userData => {
      setUser(userData); // Это объект (как экземпляр)
    });
  }, [userId]);
  
  return user;
}

2. Классы для сложной логики:

class GamePlayer {
  constructor(name) {
    this.name = name;
    this.score = 0;
  }
  
  addScore(points) {
    this.score += points;
  }
}

const player1 = new GamePlayer('Alice');
const player2 = new GamePlayer('Bob');

player1.addScore(10);
player2.addScore(5);

3. API клиент (паттерн):

class ApiClient {
  constructor(baseURL) {
    this.baseURL = baseURL;
  }
  
  async get(endpoint) {
    const response = await fetch(`${this.baseURL}${endpoint}`);
    return response.json();
  }
}

const apiClient = new ApiClient('https://api.example.com');
const users = await apiClient.get('/users');

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

// Создание экземпляров имеет небольшой overhead

// Очень быстро
const obj = { name: 'John' };

// Очень быстро (современные браузеры оптимизировали)
const user = new User('John');

// Не волнуйся о производительности,
// сосредоточься на чистоте и правильности кода

Вывод

Экземпляр объекта нужен для:

1. Изоляции состояния — каждый экземпляр имеет своё состояние
2. Переиспользования кода — один класс, много экземпляров
3. Наследования — создание иерархий
4. Полиморфизма — разное поведение в зависимости от типа

В JavaScript экземпляры везде:

• React компоненты
• API ответы (объекты)
• DOM элементы
• Все, что создаёшь через new Class()

Это основа ООП и без понимания экземпляров сложно писать хороший code.