Javascript constructor function arguments

Конструктор, оператор «new»

Обычный синтаксис <. >позволяет создать только один объект. Но зачастую нам нужно создать множество похожих, однотипных объектов, таких как пользователи, элементы меню и так далее.

Это можно сделать при помощи функции-конструктора и оператора «new» .

Функция-конструктор

Функции-конструкторы технически являются обычными функциями. Но есть два соглашения:

1. Имя функции-конструктора должно начинаться с большой буквы.
2. Функция-конструктор должна выполняться только с помощью оператора «new» .

function User(name) < this.name = name; this.isAdmin = false; >let user = new User("Jack"); alert(user.name); // Jack alert(user.isAdmin); // false

Когда функция вызывается как new User(. ) , происходит следующее:

1. Создаётся новый пустой объект, и он присваивается this .
2. Выполняется тело функции. Обычно оно модифицирует this , добавляя туда новые свойства.
3. Возвращается значение this .

Другими словами, new User(. ) делает что-то вроде:

function User(name) < // this = <>; (неявно) // добавляет свойства к this this.name = name; this.isAdmin = false; // return this; (неявно) >

Таким образом, let user = new User(«Jack») возвращает тот же результат, что и:

Теперь, если нам будет необходимо создать других пользователей, мы можем просто вызвать new User(«Ann») , new User(«Alice») и так далее. Данная конструкция гораздо удобнее и читабельнее, чем многократное создание литерала объекта.

Это и является основной целью конструкторов – реализовать код для многократного создания однотипных объектов.

Давайте ещё раз отметим – технически любая функция (кроме стрелочных функций, поскольку у них нет this ) может использоваться в качестве конструктора. Его можно запустить с помощью new , и он выполнит выше указанный алгоритм. Подобные функции должны начинаться с заглавной буквы – это общепринятое соглашение, чтобы было ясно, что функция должна вызываться с помощью «new».

Если в нашем коде присутствует большое количество строк, создающих один сложный объект, то мы можем обернуть их в функцию-конструктор, которая будет немедленно вызвана, вот так:

// создаём функцию и сразу же вызываем её с помощью new let user = new function() < this.name = "John"; this.isAdmin = false; // . другой код для создания пользователя // возможна любая сложная логика и инструкции // локальные переменные и так далее >;

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

Проверка на вызов в режиме конструктора: new.target

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

Используя специальное свойство new.target внутри функции, мы можем проверить, вызвана ли функция при помощи оператора new или без него.

В случае обычного вызова функции new.target будет undefined . Если же она была вызвана при помощи new , new.target будет равен самой функции.

function User() < alert(new.target); >// без "new": User(); // undefined // с "new": new User(); // function User

Это можно использовать внутри функции, чтобы узнать, была ли она вызвана при помощи new , «в режиме конструктора», или без него, «в обычном режиме».

Также мы можем сделать, чтобы вызовы с new и без него делали одно и то же:

function User(name) < if (!new.target) < // в случае, если вы вызвали меня без оператора new return new User(name); // . я добавлю new за вас >this.name = name; > let john = User("John"); // переадресовывает вызов на new User alert(john.name); // John

Такой подход иногда используется в библиотеках, чтобы сделать синтаксис более гибким. Чтобы люди могли вызывать функцию с new и без него, и она все ещё могла работать.

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

Возврат значения из конструктора, return

Обычно конструкторы не имеют оператора return . Их задача – записать все необходимое в this , и это автоматически становится результатом.

Но если return всё же есть, то применяется простое правило:

• При вызове return с объектом, вместо this вернётся объект.
• При вызове return с примитивным значением, оно проигнорируется.

Другими словами, return с объектом возвращает этот объект, во всех остальных случаях возвращается this .

К примеру, здесь return замещает this , возвращая объект:

function BigUser() < this.name = "John"; return < name: "Godzilla" >; // alert( new BigUser().name ); // Godzilla, получили этот объект

А вот пример с пустым return (или мы могли бы поставить примитив после return , неважно):

function SmallUser() < this.name = "John"; return; // alert( new SmallUser().name ); // John

Обычно у конструкторов отсутствует return . Здесь мы упомянули особое поведение с возвращаемыми объектами в основном для полноты картины.

Кстати, мы можем не ставить круглые скобки после new :

Пропуск скобок считается плохой практикой, но просто чтобы вы знали, такой синтаксис разрешён спецификацией.

Создание методов в конструкторе

Использование конструкторов для создания объектов даёт большую гибкость. Функции-конструкторы могут иметь параметры, определяющие, как создавать объект и что в него записывать.

Конечно, мы можем добавить к this не только свойства, но и методы.

Например, new User(name) ниже создаёт объект с заданным name и методом sayHi :

function User(name) < this.name = name; this.sayHi = function() < alert( "Меня зовут: " + this.name ); >; > let john = new User("John"); john.sayHi(); // Меня зовут: John /* john = < name: "John", sayHi: function() < . >> */

Для создания сложных объектов есть и более продвинутый синтаксис – классы, который мы рассмотрим позже.

Итого

• Функции-конструкторы или просто конструкторы, являются обычными функциями, но существует общепринятое соглашение именовать их с заглавной буквы.
• Функции-конструкторы следует вызывать только с помощью new . Такой вызов подразумевает создание пустого this в начале и возврат заполненного в конце.

Мы можем использовать конструкторы для создания множества похожих объектов.

JavaScript предоставляет функции-конструкторы для множества встроенных объектов языка: таких как Date , Set , и других, которые нам ещё предстоит изучить.

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

Как только мы с ними разберёмся, мы вернёмся к объектам для более детального изучения в главах Прототипы, наследование и Классы.

Источник

Function() constructor

The Function() constructor creates Function objects. Calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) performance issues as eval() . However, unlike eval (which may have access to the local scope), the Function constructor creates functions which execute in the global scope only.

Try it

Syntax

new Function(functionBody) new Function(arg0, functionBody) new Function(arg0, arg1, functionBody) new Function(arg0, arg1, /* … ,*/ argN, functionBody) Function(functionBody) Function(arg0, functionBody) Function(arg0, arg1, functionBody) Function(arg0, arg1, /* … ,*/ argN, functionBody) 

Note: Function() can be called with or without new . Both create a new Function instance.

Parameters

Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript parameter (any of plain identifier, rest parameter, or destructured parameter, optionally with a default), or a list of such strings separated with commas.

As the parameters are parsed in the same way as function expressions, whitespace and comments are accepted. For example: "x", "theValue = 42", "[a, b] /* numbers */" — or "x, theValue = 42, [a, b] /* numbers */" . ( "x, theValue = 42", "[a, b]" is also correct, though very confusing to read.)

A string containing the JavaScript statements comprising the function definition.

Description

Function objects created with the Function constructor are parsed when the function is created. This is less efficient than creating a function with a function expression or function declaration and calling it within your code, because such functions are parsed with the rest of the code.

All arguments passed to the function, except the last, are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed. The function will be dynamically compiled as a function expression, with the source assembled in the following fashion:

`function anonymous($args.join(",")> )  $functionBody> >`; 

This is observable by calling the function's toString() method.

However, unlike normal function expressions, the name anonymous is not added to the functionBody 's scope, since functionBody only has access the global scope. If functionBody is not in strict mode (the body itself needs to have the "use strict" directive since it doesn't inherit the strictness from the context), you may use arguments.callee to refer to the function itself. Alternatively, you can define the recursive part as an inner function:

const recursiveFn = new Function( "count", ` (function recursiveFn(count) < if (count < 0) < return; >console.log(count); recursiveFn(count - 1); >)(count); `, ); 

Note that the two dynamic parts of the assembled source — the parameters list args.join(",") and functionBody — will first be parsed separately to ensure they are each syntactically valid. This prevents injection-like attempts.

new Function("/*", "*/) ); // SyntaxError: Unexpected end of arg string // Doesn't become "function anonymous(/*) <*/) <>" 

Examples

Specifying arguments with the Function constructor

The following code creates a Function object that takes two arguments.

// Example can be run directly in your JavaScript console // Create a function that takes two arguments, and returns the sum of those arguments const adder = new Function("a", "b", "return a + b"); // Call the function adder(2, 6); // 8 

The arguments a and b are formal argument names that are used in the function body, return a + b .

Creating a function object from a function declaration or function expression

// The function constructor can take in multiple statements separated by a semicolon. Function expressions require a return statement with the function's name // Observe that new Function is called. This is so we can call the function we created directly afterwards const sumOfArray = new Function( "const sumArray = (arr) => arr.reduce((previousValue, currentValue) => previousValue + currentValue); return sumArray", )(); // call the function sumOfArray([1, 2, 3, 4]); // 10 // If you don't call new Function at the point of creation, you can use the Function.call() method to call it const findLargestNumber = new Function( "function findLargestNumber (arr) < return Math.max(. arr) >; return findLargestNumber", ); // call the function findLargestNumber.call(>).call(>, [2, 4, 1, 8, 5]); // 8 // Function declarations do not require a return statement const sayHello = new Function( "return function (name) < return `Hello, $` >", )(); // call the function sayHello("world"); // Hello, world 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Источник