Оператор new

Оператор new дозволяє розробникам створити екземпляр визначеного користувачем типу об'єкта, або одного із вбудованих типів об'єктів, що містять функцію-конструктор. Ключове слово new робить наступне:

  1. Створює простий, порожній об'єкт JavaScript;
  2. Прив'язує (присвоює в якості конструктора) інший об'єкт до цього об'єкта;
  3. Передає створений об'єкт з кроку 1 в якості контексту this;
  4. Вертає this, якщо функція не вертає свій власний об'єкт. 

Синтаксис

new constructor[([arguments])]

Параметри

constructor
Клас чи функція, що визначає тип екземпляру об'єкта.
arguments
Список значень, з якими викликатиметься constructor.

Опис

Створення визначеного користувачем об'єкта потребує двох кроків:

  1. Визначити тип об'єкта, написавши функцію.
  2. Створити екземпляр об'єкта за допомогою new.

Щоб визначити тип об'єкта, створіть функцію типу об'єкта, яка зазначає його ім'я та властивості. Об'єкт може мати властивість, яка є іншим об'єктом. Дивіться приклади нижче.

Коли виконується код new Foo(...), відбувається наступне:

  1. Створюється новий об'єкт, успадкований від Foo.prototype.
  2. Викликається функція-конструктор Foo із заданими аргументами та з контекстом this, прив'язаним до новоствореного об'єкта. new Foo дорівнює new Foo(), тобто, якщо жодних аргументів не задано, Foo викликається без аргументів.
  3. Об'єкт (що не є null, false, 3.1415 чи іншим простим типом), який повертається функцією-конструктором, стає результатом усього виразу new. Якщо функція-конструктор не повертає об'єкт явно, використовується об'єкт, створений у кроці 1. (Зазвичай, конструктори не повертають значень, але можуть це зробити, якщо потрібно переписати звичайний процес створення об'єкта.)

Ви завжди можете додати властивість до попередньо визначеного об'єкта. Наприклад, інструкція car1.color = "чорний" додає властивість color (колір) до об'єкта car1 та присвоює їй значення "чорний". Однак, це не впливає на інші об'єкти. Щоб додати нову властивість до усіх об'єктів одного типу, ви маєте додати властивість до визначення типу об'єкта Car.

Ви можете додати спільну властивість до попередньо визначеного типу об'єкта за допомогою властивості Function.prototype. Це визначає властивість, спільну для усіх об'єктів, створених цією функцією, а не лише для одного екземпляру цього типу. Наступний код додає властивість color (колір) зі значенням "стандартний колір" усім об'єктам типу Car, а потім замінює це значення рядком "чорний" тільки для екземпляру об'єкта car1. Дивіться більше у статті prototype.

function Car() {}
car1 = new Car();
car2 = new Car();

console.log(car1.color);    // undefined

Car.prototype.color = 'стандартний колір';
console.log(car1.color);    // стандартний колір

car1.color = 'чорний';
console.log(car1.color);   // чорний

console.log(Object.getPrototypeOf(car1).color) //стандартний колір
console.log(Object.getPrototypeOf(car2).color) //стандартний колір
console.log(car1.color)  // чорний
console.log(car2.color) // стандартний колір

Якщо ви не напишете оператор new, функція-конструктор буде викликана як будь-яка звичайна фукнція, без створення об'єкта. У цьому випадку значення this також буде іншим.

Приклади

Тип об'єкта та екземпляр об'єкта

Припустимо, вам потрібно створити тип об'єкта для машин. Тип об'єкта має називатися Car і має містити властивості для марки, моделі та року випуску. Для цього ви б написали наступну функцію:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

Тепер ви можете створити об'єкт під назвою myCar:

var myСar = new Car('Eagle', 'Talon TSi', 1993);

Ця інструкція створює об'єкт myСar і присвоює його властивостям задані значення. В результаті значенням myCar.make буде строка "Eagle", myCar.year - ціле число 1993, тощо.

Викликаючи new, можна створити необмежене число об'єктів типу Car. Наприклад:

var kensCar = new Car('Nissan', '300ZX', 1992);

Властивість об'єкта, яка є іншим об'єктом

Припустимо, ви визначаєте об'єкт на ім'я Person (людина) наступним чином:

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}

Інстанціюємо два нових об'єкти типу Person:

var rand = new Person('Rand McNally', 33, 'Ч');
var ken = new Person('Ken Jones', 39, 'Ч');

Далі можна доповнити визначення Car і включити в нього властивість owner (власник). Ця властивість буде приймати об'єкт Person, як у прикладі нижче:

function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
}

Тепер, щоб інстанціювати нові об'єкти, ви робите наступне:

var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
var car2 = new Car('Nissan', '300ZX', 1992, ken);

Замість того, щоб передавати рядковий літерал або ціле число при створенні нових об'єктів, ці інструкції передають об'єкти rand та ken в якості власників. Щоб дізнатись ім'я власника car2, ви можете звернутись до даної властивості:

car2.owner.name

Специфікації

Specification Status Comment
ECMAScript Latest Draft (ECMA-262)
The definition of 'The new Operator' in that specification.
Draft
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'The new Operator' in that specification.
Standard
ECMAScript 5.1 (ECMA-262)
The definition of 'The new Operator' in that specification.
Standard
ECMAScript 3rd Edition (ECMA-262)
The definition of 'The new Operator' in that specification.
Standard
ECMAScript 1st Edition (ECMA-262)
The definition of 'The new Operator' in that specification.
Standard Початкове визначення. Реалізоване у JavaScript 1.0.

Сумісність з веб-переглядачами

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
newChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support YesSafari Full support YesWebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0nodejs Full support Yes

Legend

Full support  
Full support

Також див.