Оператор new - указывает, что Функции должна вызываться как конструктор объектов. А именно: должен создаться новый объект. Внутри функции this равно этому объекту. Во время выполнения функции объект модифицируется.

Часто возникает необходимость создания большого количества однотипных объектов. Эти объекты могут иметь десятки одинаковых свойств и методов, а отличаться всего несколькими строками.

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

В JavaScript есть встроенные конструкторы. Например: new Array() - создает массив, new Date() - объект даты, new RegExp - регулярное выражение.

Конструктором может стать любая Функции. Все что нужно - вызвать ее вместе с new (конечно, не от всякой функции будет толк). Но принято называть конструкторы с большой буквы. Как в примерах выше.

См. также __proto__, prototype, valueOf, toString,

Синтаксис

new функция();

Примеры

Пример

Создадим конструктор User:

function User(name) {
	this.name = name;

	this.sayHi = function() 
	{
		alert('Привет, меня зовут ' + this.name);
	}
}

var andrey = new User('Андрей');
var kira = new User('Андрей');
var jon = new User('Джон');

andrey.sayHi(); //'Привет, меня зовут Андрей'
kira.sayHi(); //'Привет, меня зовут Кира'
jon.sayHi(); //'Привет, меня зовут Джон'

Код выше можно было бы написать и так:

var andrey = {
	name: 'Андрей',
	sayHi: function() {
		alert('Привет меня зовут ' + this.name);
	}
}

var kira = {
	name: 'Кира',
	sayHi: function() {
		alert('Привет меня зовут ' + this.name);
	}
}

var jon = {
	name: 'Джон',
	sayHi: function() {
	alert('Привет меня зовут ' + this.name);
	}
}

andrey.sayHi(); //'Привет, меня зовут Андрей'
kira.sayHi(); //'Привет, меня зовут Кира'
jon.sayHi(); //'Привет, меня зовут Джон'

Здесь все одно свойство, один метод, и 3 объекта. А в реальных приложениях может быть десятки свойств, и еще больше методов. Поэтому конструкторы очень полезные, и их очень часто используют.

Но что можно сделать конструкторами? Все что угодно. Например, слайдер. На странице может быть много слайдеров. И для каждого писать все отдельно - не лучшая идея. Поэтому пишут конструктор Slider, а потом вызывают его столько раз, сколько нужно.

Примеры

Пример

Сделаем простой счетчик:

<div id="counter1"></div><br>
<div id="counter2"></div>
function Counter(root) {
	this.root = root;
	this.val = 0;
	this.step = 1;

	root.innerHTML = '<input type="button" class="counter-plus" value="+">'
		+ '<span class="counter-val">' + this.val + '</span>';

	this.plusEl = this.root.querySelector('.counter-plus');
	this.valEl = this.root.querySelector('.counter-val');

	var self = this;
	this.plusEl.addEventListener('click', function() {
		self.valEl.innerHTML = (self.val += self.step);
	});
}

var root1 = document.getElementById('counter1');
var root2 = document.getElementById('counter2');
var counter1 = new Counter(root1);
var counter2 = new Counter(root2);

В результате можем создавать сколько угодно независимых друг от друга счетчиков.

Результат выполнения кода:


Пример

Также после создания с экземпляром конструктора можно продолжать работать. Допишем к предыдущему примеру 1 строку:

...

counter2.step = 2;

Теперь второй счетчик увеличивается на 2.

Результат выполнения кода:


Это лишь небольшая часть возможностей конструкторов. Используя их на полную можно значительно увеличить производительность, организовать наследование, легко и гибко расширять и поддерживать приложения.