Про наследование

[mycoding]

Пытаюсь понять как работает ООП в js. Особенно интересно наследование.
Вот предположим хотим сделать различные классы для 2d графики на canvas.

Начнём с точки.

function point(x,y){
this.x=x;
this.y=y;
}

А вот как дальше например линию реализовать на базе точки, а потом на базе линии треугольник сделать, не пойму.
Может ли нам здесь пригодиться метод superclass?

Cтатьи читал про ООП, но недопонимаю.

[B@rmaley.e><e]

http://javascript.ru/tutorial/object/inheritance

[Gvozd]

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

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

но, треугольник состоит из отрезков

так вот, вы не отличаете наследует свойства(является частным случаем) от состоит из

[mycoding]

Ясно, но вот как все таки реализовать хотя бы для линии?

Вообще столько статей про наследование прочитал, но так и не понял superclass для чего нужен?
ЕГо можно применить в ООП?

[B@rmaley.e><e]

Вообще столько статей про наследование прочитал, но так и не понял superclass для чего нужен?
ЕГо можно применить в ООП?

А что, есть другие парадигмы с классами?

Суперкласс - класс-родитель, от которого наследуется текущий.

По реализации линий: нужно определиться с форматом задания линий. Например, задавать линию двумя точками (т.е. как состоящую из 2 экземпляров класса Point).

[mycoding]

Т.е. как то так

function point(x,y){
this.x=x;
this.y=y;
this.draw=function(){....}
}

function line(p1,p2){
this.p1=p1;
this.p2=p2;
this.superclass=point;
}

Что, то не то. Или я наследование не понимаю

[B@rmaley.e><e]

Здесь нет наследования. И быть не может.
Читайте пост Гвоздя.

[Kolyaj]

mycoding,
в сети куча статей разной степени углублённости. Читайте. Ничего нового вам тут не скажут.

[mycoding]

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

<script>
function Animal() {
	this.x;
	this.y;
	this.out=false;
}

Animal.prototype = {
	move:function(){
		var width=$('canvas').width;
		var height=$('canvas').height;		
		this.x+=this.distance;
		if(this.x>width) {this.out=true;}
	},
    echo : function(){alert(this.name);},
	setCoords : function(x,y){
		this.x=x;
		this.y=y;	
	}	
}
 
function Rabbit() {
    this.name = 'Кролик';
	this.distance = 3;	
}

function Wolf() {
    this.name = 'Волк';
	this.distance = 5;	
}

function Fox() {
    this.name = 'Лиса';
	this.distance = 4;
}

var animal = new Animal();
 
Rabbit.prototype = Wolf.prototype = Fox.prototype = animal;
var rabbit1 = new Rabbit();
var wolf1 = new Fox();
var fox1 = new Wolf();
 
rabbit1.echo();
wolf1.echo();
fox1.echo();

rabbit1.setCoords(2,30);
wolf1.setCoords(2,100);
fox1.setCoords(2,150);

function $(id){return document.getElementById(id);}

window.onload = function(){


canvas=$('canvas').getContext('2d');
interval=setInterval(function(){draw(canvas);},100);

}

function draw(ctx){
ctx.clearRect(0,0,400,200);
rabbit1.move();
fox1.move();
wolf1.move();
ctx.beginPath();
       ctx.arc(rabbit1.x,rabbit1.y,2,0,Math.PI*2,true); // Внешний круг
ctx.stroke();

ctx.beginPath();
       ctx.arc(wolf1.x,wolf1.y,2,0,Math.PI*2,true); // Внешний круг
ctx.stroke();

ctx.beginPath();
       ctx.arc(fox1.x,fox1.y,2,0,Math.PI*2,true); // Внешний круг
ctx.stroke();
if(rabbit1.out && rabbit1.out && rabbit1.out) {clearInterval(interval);}
}
</script>
<canvas id='canvas' width=400 height=200 style="border:1px solid #888888"></canvas>