Что происходит при вызове функции с ключевым словом `new`?

Когда мы вызываем функцию с ключевым словом new, происходит создание нового объекта, и несколько ключевых действий выполняются автоматически. Давайте разберем этот процесс шаг за шагом.

Основные шаги при вызове функции с new

1. Создание нового объекта:

   • При использовании new создается новый пустой объект. Этот объект будет являться экземпляром функции, которую мы вызываем.

2. Привязка прототипа:

   • Прототип нового объекта устанавливается в prototype функции. Это позволяет экземпляру наследовать свойства и методы, определенные в prototype.

3. Вызов конструктора:

   • Функция вызывается с контекстом нового объекта, что означает, что внутри функции this ссылается на созданный объект.

4. Возврат объекта:

   • Если функция не возвращает объект (например, возвращает примитивное значение), то возвращается созданный объект. Если же функция возвращает объект, то именно этот объект будет результатом вызова.

Пример

Рассмотрим пример, чтобы проиллюстрировать эти шаги:

function Person(name) {
    this.name = name;
    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`);
    };
}

// Создание нового объекта с использованием `new`
const john = new Person("John");

john.sayHello(); // Выведет: Hello, my name is John

Подробности работы

• При вызове new Person("John") происходит следующее:
  1. Создается новый объект john.
  2. Прототип john устанавливается на Person.prototype.
  3. Функция Person выполняется, устанавливая свойство name объекта john.
  4. Возвращается объект john.

Альтернативы и их отличия

Если бы мы вызвали функцию Person без new, например:

const jane = Person("Jane");

В этом случае:

• Новый объект не создается.
• this внутри функции ссылается на глобальный объект (в браузере это window), если функция не была вызвана в строгом режиме (strict mode).
• Свойство name не будет установлено на новый объект, так как его фактически не существует.

Практические советы

1. Используйте строгий режим: Для предотвращения нежелательного поведения при вызове функции без new, можно использовать строгий режим. В этом случае this будет undefined.

2. Проверка на вызов без new: В конструкторах можно добавить проверку, чтобы убедиться, что функция вызвана с new:

   function Person(name) {
       if (!(this instanceof Person)) {
           return new Person(name);
       }
       this.name = name;
   }
   

Распространенные ошибки

• Неиспользование new: Часто новички забывают использовать new, что приводит к неожиданным результатам, когда свойства не устанавливаются на новый объект.
• Возврат примитивных значений: Если конструктор возвращает примитивное значение, это игнорируется, и создается новый объект.

Понимание работы new и механизмов, связанных с созданием объектов, является важным аспектом в JavaScript, особенно при разработке сложных приложений и библиотек.