Как граматно создать конструктор

[Siend]

НЕ ПУГАЙТЕСЬ ЧТО МНОГО ТЕКСТА, ТУТ ВСЕ ПРОСТО!!!

Решил попытаться переписать свой код, и столкнулся с огромным провалом в понимании ООП в javascript, связи с чем прошу вашей помощи в создании эдакого мануала.

Я работаю с элементам canvas, но думаю что логика подхода применительно к обычному диву будет такой же. Но не суть, ближе к делу.

Пусть у нас будут даны несколько элементов canvas:

...
<canvas id="canvasA"></canvas>
<canvas id="canvasB"></canvas>
<canvas id="canvasC"></canvas>
...

и располагаем мы таким набором говнокода (написанным применительно для одного canvas):

function init() { //функция инициализации canvas
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
    }
...
function animate() { //функция запускающая отрисовку
        requestAnimationFrame(animate);
        draw();
    }

//координаты мыши относительно элемента канвас
var xMouse=0
var yMouse=0
var HOLD=false
var WIDTH = canvas.offsetWidth
var HEIGHT = canvas.offsetHeight

function draw(){ //отрисовка
        ctx.beginPath();
        ctx.rect(0, 0, WIDTH , HEIGHT ); // очистка экрана
        ctx.fill();
        ctx.stroke();
        if (HOLD==false)
                ctx.strokeText(xMouse + " " + yMouse, 10, 10) // 10 10 -точка вывода координат мыши. 
        if (HOLD==true)
                ctx.strokeText("Click is true", 10, 10)
}

//обработчики:
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
canvas.onmousemove = myMove;

function myUp(e) { HOLD = false }
function myDown(e) { HOLD = true}
function myMove(e) {
        xMouse = e.pageX - canvas.offsetLeft
        yMouse = e.pageY - canvas.offsetTop
}

Итак, это пожалуй все что нам понадобиться.

Задача:
отображать на каждом canvas координаты xMouse, yMouse (координаты мышки относительно этого канваса, а не всей страницы), а в случае клика выводить надпись (как видите в случае клика меняется значение переменной HOLD, а в функции отрисовки есть проверка этой переменной)

Сложность:
Все что я написал действительно является ничем иным как говнокодом, который можно применить к одному единственному элементу canvas, я же хочу сделать универсальный конструктор, но не знаю как, и в этом прошу вашей помощи. Думаю этот урок может быть полезен и другим новичкам js в будущем!

[tsigel]

Все самое важное я написал вам в вашем прошлом посте.
Пример создания конструктора там тоже есть, могу кинуть второй:

var SomeConstructor = function(name) {
  this.name = name;
};
SomeConstructor.prototype.getName = function () {
  return this.name;
};

var vasia = new SomeConstructor("Вася");
var petia = new SomeConstructor("Петя");
alert([vasia.getName(), petia.getName()]);

Пишите что и где конкретно не получается - вам помогут. За вас нет желания переписывать.

[nerv_]

tsigel,

function SomeConstructor() {}

потому, что может пригодиться function.name (имя класса)

[tsigel]

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

[tsigel]

Кстати про TypeScript, я заметил что если писать обычный js код, то idea и webshtorm понимают интерфейсы написанные на TypeScript. Так что теоретически можно оттуда тока интерфейсы брать

[Siend]

На примере Васи и Пети - все предельно понятно, даже про прототипы уже прочитал и тоже вообщем-то понял. В данном случае мы переопределили объект SomeConctructor, добавив в него метод возвращающий имя. К конкретному коду никаких вопросов нет.

Но не понимаю как это применить к моему случаю.
у меня сейчас можно сказать что существует уже 1 палитра с кучей переменных и функций их обработки, а хочу я чтобы для каждого canvas своя палитра создавалась, со своими переменными и функциями.

т.е. относительно вашего примера, нужно его усложнить так:
задан объект вася:

var vasia = {
name: "Vasia O_O",
age: 30,
friends: vasiaFriends
}

var vasiaFriends = ["Egor","Igor","SexyBitch"]

function addAge(){
vasia.age++
}

function addFriends(name){
vasiaFriends.push(name)
}

как теперь мне создать 2 васи и добавить одному из них нового друга, а другому увеличить возраст?

[kostyanet]

var SomeConstructor = function(name) {
  this.name = name;
};
SomeConstructor.prototype.getName = function () {
  return this.name;
};

В чем разница

var SomeConstructor = function(name) {
  this.name = name;
  this.getName=function(){
    return this.name;
  };
};

?

[jsnb]

как теперь мне создать 2 васи и добавить одному из них нового друга, а другому увеличить возраст?

function Person(options) {
  this.name = options.name;
  this.age = options.age;
  this.friends = options.friends;
}

Person.prototype.addAge = function() { this.age++ }
Person.prototype.addFriends = function(name) { this.friends.push(name) }

var vasia1 = new Person({
  name: "Vasia 1",
  age: 30,
  friends: ["Egor","Igor","SexyBitch"]
});

var vasia2 = new Person({
  name: "Vasia 2",
  age: 30,
  friends: ["Egor","Igor","SexyBitch"]
});

vasia1.addFriends('New friend');
vasia2.addAge();

alert( JSON.stringify(vasia1,'',2) );
alert( JSON.stringify(vasia2,'',2) );

[tsigel]

var SomeConstructor = function(name, age, friends) {
  this.name = name;
  this.age = age;
  this.friends = friends;
};
SomeConstructor.prototype.getName = function () {
  return this.name;
};
SomeConstructor.prototype.addAge = function () {
  return this.age++;
};
SomeConstructor.prototype.addFriends = function (friend) {
  return this.friends.push(friend);
};

var some1 = new SomeConstructor("a", 30, []);
var some2 = new SomeConstructor("b", 30, []);

some1.addAge();
some2.addFriends("gosha");

alert(JSON.stringify(some1,'',2));
alert(JSON.stringify(some2,'',2))

Эх, долго писал

[jsnb]

В чем разница

При использовании прототипа метод getName будет у всех экземпляров общий, а без прототипов - у каждого экземпляра свой, что повлечет лишний расход памяти и проблемы с наследованием.