Поиск по сайту
Ctrl + K
Вопросы по JS

В чем разница между function Person() {}, const person = Person() и const person = new Person() в JavaScript?

В JavaScript определение функции через function Person() и создание объектов с использованием new Person() может вести себя по-разному в зависимости от того, как используется. Разберем ключевые различия между этими тремя подходами.

1. function Person() {}

Когда мы создаем функцию с помощью function declaration, она обычно используется для создания функционального конструктора. Это означает, что функция будет использоваться как конструктор объектов, если мы вызовем её через new. Однако при вызове этой функции без new, она будет работать как обычная функция.

Пример:

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

const person1 = new Person('Alice');
console.log(person1.name); // 'Alice'

Здесь Person — это конструктор, который создает объект с полем name. Конструкторы обычно вызываются с помощью new, что позволяет создать новый объект с заданными свойствами.

Если же вызвать Person без new, она не будет вести себя как конструктор, и this будет ссылаться на глобальный объект (в строгом режиме будет undefined).

const person2 = Person('Bob'); // Ошибка, потому что `this` будет `undefined` в строгом режиме

Особенности:

  • Используется как конструктор при вызове с new.
  • this указывает на новый объект, когда используется с new.
  • Без new работает как обычная функция.

2. const person = Person()

Когда функция вызывается без оператора new, она выполняется как обычная функция, и this не будет ссылаться на новый объект. В примере ниже person будет undefined или, в зависимости от контекста, может быть глобальным объектом (в строгом режиме).

Пример:

function Person(name) {
  this.name = name;
  return { greeting: "Hello" }; // Является возвращаемым значением
}

const person = Person('Alice');
console.log(person); // { greeting: "Hello" }

Здесь видно, что несмотря на использование this, результатом выполнения Person() является возвращаемый объект, а не объект с полем name, который мы ожидали бы при использовании с new.

Особенности:

  • Возвращает объект, если явно задано возвращаемое значение.
  • Не создает объект с new (не работает как конструктор без new).

3. const person = new Person()

Когда функция вызывается с new, она превращается в конструктор. Это создает новый объект, и внутри конструктора this будет ссылаться на этот объект.

Пример:

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

const person = new Person('Alice');
console.log(person.name); // 'Alice'

Здесь используется new Person(), что делает Person полноценным конструктором. Это создает новый объект, и его свойства могут быть добавлены с помощью this.

Особенности:

  • Создает новый объект с помощью конструктора.
  • this ссылается на новый объект, который был создан.
  • Является стандартным способом создания объектов с помощью функций-конструкторов.

Ключевые различия

  • function Person() {}:
    • Это обычная функция, которая может быть использована как конструктор, если вызывается с new.
    • Если она вызывается без new, это просто обычная функция, и this может быть привязан к глобальному объекту.
  • const person = Person():
    • Когда вызывается без new, результатом будет обычная функция, которая не создает новый объект, и this не привязан к новому объекту.
    • В результате вызова этой функции без new мы получаем возвращаемое значение функции, если оно есть, а не объект.
  • const person = new Person():
    • Это использование функции-конструктора для создания нового объекта с помощью new.
    • Функция работает как конструктор, создавая новый объект и возвращая его.
  • Заключение

    • Использование new Person() — это правильный способ создания объектов с помощью функции-конструктора. Когда вы вызываете конструктор с new, создается новый объект, и внутри конструктора this будет ссылаться на этот объект.
    • Вызов функции без new приводит к тому, что она работает как обычная функция, а не как конструктор, и вы не получите новый объект.