Объясняется простым языком с примерами за 4 минуты

Ключевое слово new в JavaScript - одна из тех вещей, которые люди, начинающие с JS, часто неправильно понимают или даже опасаются.

Все становится намного проще понять, если мы проверим, чтоnewis делает за кулисами.

В этой статье я рассмотрю простые примеры и покажу вам, что new делает для нас за кулисами.

Начиная с ES6, мы больше не видим newтакого часто, но это все равно необходимо знать любому разработчику.

Пример

Давайте возьмем самый классический пример.

Предположим, нам нужна функция, которая создает объект employee. Сделать это можно так:

function createEmployee(name = "", position = "", age = 0) {
    
    const employee = {};    
    
    employee.name = name;
    employee.position = position;
    employee.age = age;
    return employee;
}
const exampleEmployee = createEmployee('Neko', 'FE dev', 30);
// { name: 'Neko', position: 'FE dev' age: 30 }

Создаем объект, присваиваем свойства и возвращаем его в конце. В качестве примечания, мы должны добавить к нему некоторую проверку, но это не тема данной статьи.

Как new может нам помочь?

Мы можем создать функцию constructor - по соглашению имя функции начинается с заглавной буквы, то есть EmployeeConstructor, а не employeeContructor. Однако это будет работать в обоих случаях.

function EmployeeConstructor(name = "", position = "", age = 0) {
  this.name = name;
  this.position = position;
  this.age = age;
}
const exampleEmployee = new EmployeeConstructor("Neko", "FE dev", 30);
console.log(exampleEmployee);
// EmployeeConstructor {name: "Neko", position: "FE dev", age: 30}

Если вы заглянете внутрь функции EmployeeConstructor, вы заметите, что нет оператора return, и нет никакого создания объекта в начале, но все же мы получаем желаемый результат.

Это происходит благодаря ключевому слову new, так как оно добавляет некоторое неявное поведение, которого мы не видим, т.е.

  1. Создает пустой объект.
  2. Пустой объект привязывается к значению this.
  3. Функция будет унаследовать от functionName. Prototype.
  4. Возвращает this, если явный return оператор не используется.
  5. Примечание: если мы попытаемся return что-то еще, кроме объекта, массива или функции, конструктор вернет this.
    Это означает, что выражение return 'I am trying to break it' заставит new пропустить его и вместо этого вернуть this.

Вот псевдокод для проверки того, что происходит за кулисами, когда мы вызываем функцию с ключевым словом new.

Выше есть некоторый технический жаргон, например __proto__ и prototype.

Если вы не знакомы с конструкторами или прототипами, не беспокойтесь об этом сейчас. Вы рано или поздно столкнетесь с ними.

Важно то, что новый объект, неявно возвращаемый функцией-конструктором, сможет наследовать свойства и методы.

Если ключевое слово this вас сбивает с толку, скажите: У меня для вас статья я объясню простым языком.

Что произойдет, если мы вызовем неконструктор с новым?

Чтобы лучше понять new, вернемся к нашему первоначальному примеру - функции, которая не является конструктором:

function createEmployee(name = "", position = "", age = 0) {
    
    const employee = {};    
    
    employee.name = name;
    employee.position = position;
    employee.age = age;
    return employee;
}
const exampleEmployee = new createEmployee('Neko', 'FE dev', 30);

Что бы произошло, если бы мы вызвали его с ключевым словом new?
Это конкретное слово все равно будет работать.

Это почему?

Давайте добавим в функцию дополнительные функции, которые new делает за нас.

function createEmployee(name = "", position = "", age = 0) {
  /**
   * this = {};
   * this.__proto__ = EmployeeConstructor.prototype;
   */
  const employee = {};
  employee.name = name;
  employee.position = position;
  employee.age = age;
  // we are returning an object hence below is omitted by new
  // return this;
  return employee;
}

Как видим, снова происходит следующее:

  • newkeyword связывает this новый объект и устанавливает его конструктор и прототип.
  • newkeyword добавляет логику, которая вернет this вместо не-объекта.
  • newkeyword добавляет в конце неявный оператор return this.

Это не влияет на наш код, поскольку мы не используем ключевое слово this в этой функции.

Мы также возвращаем объект, когда говорим return employee;.
В этом случае логика возврата и строка return this опускаются.

Если бы мы использовали this или не возвращали объект, массив или функцию, функция createEmployee вела бы себя по-другому при вызове с ключевым словомnew или без него.

Ваша очередь

Теперь у вас есть представление о ключевом слове new.
Вы знаете, что он делает для нас за кулисами.
У вас есть еще кое-что, что вам нужно исследовать, то есть исследовать различные крайние случаи.