JavaScript object inheritance
Ik ben sinds kort bezig met het maken van een kleine game. Hierin heb ik een aantal objecten, zoals bijvoorbeeld deze twee:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Player(x, y, speed, image)
{
this.x = x;
this.y = y;
this.image = image;
this.speed = speed;
this.direction = 0;
this.lifes = INIT_LIFES;
}
function Enemy(x, y, speed, image)
{
this.x = x;
this.y = y;
this.speed = speed;
this.isAlive = false;
this.image = image;
this.direction = 0;
this.attacks = false;
}
{
this.x = x;
this.y = y;
this.image = image;
this.speed = speed;
this.direction = 0;
this.lifes = INIT_LIFES;
}
function Enemy(x, y, speed, image)
{
this.x = x;
this.y = y;
this.speed = speed;
this.isAlive = false;
this.image = image;
this.direction = 0;
this.attacks = false;
}
Ik heb er nog meer, maar het gaat om het principe. Je ziet dat ze beide x, y, speed en image hebben. Nu is het zo dat ik in PHP gewoon kan erven van bijvoorbeeld Sprite. Ik heb al een aantal uur zitten zoeken op Google, maar ik kom er gewoon maar niet aan uit wat ik kan gebruiken.
Wat ik dus wil is dat ik niet bij elk object x, y, image en speed hoef in te stellen.
Hoe kan ik dit bereiken?
Alvast bedankt.
Roel
In JavaScript ken je ook niet echt inheritance, je kent alleen prototypal inheritance, waarbij je de eigenschappen kan laten overnemen. Dat wil jij hier echter niet.
Ik raad je aan om MooTools of Base.js (mootools is based on base.js) te bekijken. Beide hebben een erg mooie versie om PHP stijl OO in JavaScript te gebruiken.
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// mootools
var Sprite = new Class({
initialize: function (x, y, image, speed) {
this.x = x;
this.y = y;
this.image = image;
this.speed = speed;
}
});
var Player = new Class({
Extends: Sprite,
initialize: function (x, y, image, speed) {
this.parent(x, y, image, speed);
this.direction = 0;
this.lifes = INIT_LIFES; // oei, wat is dit, een global var?
}
});
var Enemy = new Class({
Extends: Sprite,
initialize: function (x, y, image, speed) {
this.parent(x, y, image, speed);
this.direction = 0;
this.isAlive = false;
this.attacks = false;
}
});
// Base.js
var Sprite = Base.extend({
constructor: function (x, y, image, speed) {
this.x = x;
this.y = y;
this.image = image;
this.speed = speed;
}
});
var Player = Sprite.extend({
constructor: function (x, y, image, speed) {
this.base(x, y, image, speed);
this.direction = 0;
this.lifes = INIT_LIFES; // oei, wat is dit, een global var?
}
});
var Enemy = Sprite.extend({
constructor: function (x, y, image, speed) {
this.base(x, y, image, speed);
this.direction = 0;
this.isAlive = false;
this.attacks = false;
}
});
var Sprite = new Class({
initialize: function (x, y, image, speed) {
this.x = x;
this.y = y;
this.image = image;
this.speed = speed;
}
});
var Player = new Class({
Extends: Sprite,
initialize: function (x, y, image, speed) {
this.parent(x, y, image, speed);
this.direction = 0;
this.lifes = INIT_LIFES; // oei, wat is dit, een global var?
}
});
var Enemy = new Class({
Extends: Sprite,
initialize: function (x, y, image, speed) {
this.parent(x, y, image, speed);
this.direction = 0;
this.isAlive = false;
this.attacks = false;
}
});
// Base.js
var Sprite = Base.extend({
constructor: function (x, y, image, speed) {
this.x = x;
this.y = y;
this.image = image;
this.speed = speed;
}
});
var Player = Sprite.extend({
constructor: function (x, y, image, speed) {
this.base(x, y, image, speed);
this.direction = 0;
this.lifes = INIT_LIFES; // oei, wat is dit, een global var?
}
});
var Enemy = Sprite.extend({
constructor: function (x, y, image, speed) {
this.base(x, y, image, speed);
this.direction = 0;
this.isAlive = false;
this.attacks = false;
}
});
Toevoeging op 07/11/2013 22:15:58:
En als laatst wil ik je nog deze site meegeven, zeker een must-read voor als je JavaScript wat advanced gaat gebruiken: http://bonsaiden.github.io/JavaScript-Garden
Wouter J op 07/11/2013 22:14:52:
... must-read voor als je JavaScript wat advanced gaat gebruiken: http://bonsaiden.github.io/JavaScript-Garden
Mooie pagina.
Onmiddellijk gebookmarkt
Laat me raden: omdat ik die als attributen mee moet geven in de constructor van de objecten?
Ik gebruik liever geen framework voor dit spel, ik wil gewoon puur JavaScript en HTML5. Ook heb ik daarom bewust gekozen om geen jQuery te gebruiken.
Kun je me misschien wel een andere manier aanraden om toch inheritance te kunnen gebruiken?
Als je geen base.js wilt gebruiken, jouw keuze maar dan moet je zelf een base klasse maken als je inheritance wilt gebruiken.