Объясняется простым языком с примерами за 4 минуты
Ключевое слово new
в JavaScript - одна из тех вещей, которые люди, начинающие с JS, часто неправильно понимают или даже опасаются.
Все становится намного проще понять, если мы проверим, чтоnew
is делает за кулисами.
В этой статье я рассмотрю простые примеры и покажу вам, что 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
, так как оно добавляет некоторое неявное поведение, которого мы не видим, т.е.
- Создает пустой объект.
- Пустой объект привязывается к значению
this
. - Функция будет унаследовать от functionName. Prototype.
- Возвращает
this
, если явныйreturn
оператор не используется. - Примечание: если мы попытаемся
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; }
Как видим, снова происходит следующее:
new
keyword связываетthis
новый объект и устанавливает его конструктор и прототип.new
keyword добавляет логику, которая вернетthis
вместо не-объекта.new
keyword добавляет в конце неявный операторreturn this
.
Это не влияет на наш код, поскольку мы не используем ключевое слово this
в этой функции.
Мы также возвращаем объект, когда говорим return employee;
.
В этом случае логика возврата и строка return this
опускаются.
Если бы мы использовали this
или не возвращали объект, массив или функцию, функция createEmployee
вела бы себя по-другому при вызове с ключевым словомnew
или без него.
Ваша очередь
Теперь у вас есть представление о ключевом слове new
.
Вы знаете, что он делает для нас за кулисами.
У вас есть еще кое-что, что вам нужно исследовать, то есть исследовать различные крайние случаи.