Как создать перегруженный конструктор класса в JS?

Question

[Артём Н]

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


Сейчас я пишу простые классы-обёртки над функциями рисования фигур на canvas. Например, я хочу сделать удобнее рисование окружности, для этого можно пропустить несколько параметров (или добавить, в случае с другими классами).


В оригинале рисование цветного круга выглядит так:

context.arc(x, y, radius, startDegrees, endDegrees, counterClockwise);
context.fillStyle = '#FF0';
context.fill();

Я хочу сократить до:
var circle = new Circle(x, y, radius, '#FF0');


Но поскольку иногда нужно нарисовать дугу или сектор, то необходимо оставить весь функционал, для этого сделать перегрузку:

var circle = new Circle(x, y, radius, '#FF0', startDegrees, endDegrees, counterClockwise);

Вообщем, вопрос в том, как правильно создавать (или рекомендуется создавать) перегруженные интерфейсы, которые могут отличаться не только количеством параметров, но и типом данных.

Answer 1

[sdevalex]

В вашем случае просто пишите…

function Circle(x, y, radius, color, startDegrees, endDegrees, counterClockwise)
{
}

Если не передать нужное число параметров, то незадействованые станут undefined.

Если нужно передеавать разные в разном порядке, то передавайте объект options…

function Circle(options)
{
}

Пример…

new Circle({ radius: 10, x: 40, y: 30 });

На CoffeeScript ещё лучше:

new Circle radius: 10, x: 40, y: 30

Comments

[Артём Н]

Это была первая идея — проверять на тип и количество параметров внутри функции. Но функция тогда разрастается до огромных размеров. Поэтому подумал, вдруг есть какой-нибудь другой способ.

[asci]

дак создайте фабрику тогда. и в зависимости от количества аргументов вызывайте разные конструкторы и возвращайте их результат с переопределенным свойством конструктора

Answer 2

[Stdit]

А зачем вам объект «окружность»? Что вы с ним потом собираетесь делать, ради чего здесь он создаётся? Может проще написать просто какой-нибудь «хелпер»:

helpers.circle = function (context, x, y, radius, color) {
    context.arc(x, y, radius, startDegrees, endDegrees, counterClockwise);
    context.fillStyle = color;
    context.fill();
}

Ну или завести объект «рисовальщик», хранящий ссылку на графический контекст и настройки рисования, и имеющий необходимые методы (вроде приведённого выше) для работы с этим контекстом:

function Painter(context, defaultColor) {
    this.context = context;
    this.defaultColor = defaultColor;
    this.circle = function (x, y, r, color) {
        if (color === undefined) {
            color = this.defaultColor;
        } 
        this.context.arc(x, .... // code
    }
}

Это если вам нужно наследование. Объекты по-моему имеет смысл создавать только для реально существующих инстансов (спрайты, например, от которых наследуются игровые объекты и персонажи). Если окружность — это динамический объект, тогда можно уже думать и крутить, в зависимости от архитектуры графики, например так:

function Circle(x, y, r, color) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.color = color;
    this.render = function (context) {
        context.arc(this.x, ... 
    }
}

Comments

[Артём Н]

Да, окружность и её производные будут «реальными». Они должны реагировать на события мыши и события программы. Сейчас у меня архитектура класса примерно такая же, как в вашем последнем примере. Хочется уменьшить число передаваемых параметров в интерфейсе. Например, класс спрайта сейчас выглядит так:

var Sprite = function(options)
{
	this.image = options.image;
	this.sx = options.x;
	this.sy = options.y;
	this.sw = options.width;
	this.sh = options.height;
	this.dx = options.dx;
	this.dy = options.dy;
	this.dw = options.deltaWidth;
	this.dh = options.deltaHeight;
	
	if(options.deltaWidth == undefined || options.deltaHeight == undefined){
		this.dw = this.sw;
		this.dh = this.sh;
	}
	
	if(options.dx == 0 || options.dx == undefined){
		this.dx = 0;
	}
	
	if(options.dy == 0 || options.dy == undefined){
		this.dy = 0;
	}
	
	if(options.width == undefined){
		this.sw = this.image.width;
	}
	
	if(options.width == undefined){
		this.sw = this.image.width;
	}
	
	this.Start = function(){}
	this.Update = function(){}
	
	this.Draw = function(){
		game.ctx.drawImage(this.image, this.dx, this.dy, this.dw, this.dh, this.sx, this.sy, this.sw, this.sh);
	}
}

Но эти проверки… После C# и C++ они меня очень смущают.

[Stdit]

Это судьба (а в некотором роде идеология) языков с нестрогой типизацией. Ещё жестче бывает когда начинаются попытки делать что-то в стиле jQuery, когда поведение функции начинает зависеть от количества параметров и типа данных каждого параметра отдельно. Для Javascript это, в принципе, нормально, хотя при неаккуратном использовании может легко перерасти в раковую опухоль.

[Stdit]

Кстати, рекомендую использовать === вместо ==, особенно при сравнении с undefined.

[Артём Н]

В случае «==» может неправильно вернуть значение?

[Артём Н]

Нашёл почему, оставлю ссылку для потомков :) Спасибо!

[Stdit]

При использовании == есть вероятность что кто-то этим злоупотребит и начнет присылать вместо числа строку с нулем или вообще пустую строку или false. Это приводит к багам и трудностям отладки. А undefined многие рекомендуют даже проверять через typeof, так как некто может переопределить undefined в данном контексте (var undefined = 'something'). Это конечно сферические случаи в вакууме, но от таких багов лучше подстраховываться. Вообще это тема для отдельного разговора, на хабре он бывал.

Answer 3

[egorinsk]

У вас очень странное (не)понимание ООП, писать в конструктор объекта код рисования — похоже на наркоманство. Вообще, писать в конструкторе сколько-нибудь сложный код — плохая идея. Если вы хотите нарисовать круг, сделайте метод drawCircle(...)

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

function (arg1, arg2, arg3) {
arg2 = arg2 || 10; // значение по умолчанию
arg3 = arg3 || 20;

…
}

Как видите, получилось совсем не сложно!

Comments

[Stdit]

При этом в arg2 и arg3 передать ноль уже не получится. В случае, когда ноль — допустимое значение, всё равно придется делать проверку на undefined. Это нужно иметь в виду.

[egorinsk]

Это редкая ситуация, в случае допустимости нуля можно написать (arg2 !== undefined) || (arg2 = DEFAULT_VALUE);

[Шухрат]

А еще можно так

function F(arg1,arg2, arg3) {
 switch(arguments.length) {
  case 0: arg1 = 10;
  case 1: arg2 = 20;
  case 2: arg3 = 30;
 }
}

[Stdit]

Верно, но такие ситуации бывают и вводят в ступор, особенно новичков, так как явной проверки на ноль и undefined здесь нет. И синтаксис не всем понятен такой :)

[Шухрат]

Заинтриговали, если найдете хороший способ, дайте знать =)

[egorinsk]

Если надо делать понятно новичкам, то можно через if (arg === undefined), но новички, не понимающие этих конструкций, вам столько дров наломают, что страшно на код будет смотреть потом. Особенно с учетом того, сколько яваскрипт дает свободы. Например, свобода обращения к несуществующим полям объектов и элементам массивов.

[Stdit]

Shuhrat, способ с кейсом относительно лаконичный как раз. Я про (arg2 !== undefined) || (arg2 = DEFAULT_VALUE);

Answer 4

[Шухрат]

У Джона Резига была статья, вот только без проверки типа данных

Answer 5

[Stdit]

[мимо]