fredi

Warper
Member
Joined
Jul 12, 2016
Messages
1
Reaction score
0
First Language
Spanish
Primarily Uses
Hello!


I am having some trouble trying to understand javascript's constructors and prototypes.


For example, here there is some code extracted from the engine:


// Scene_Map
//
// The scene class of the map screen.

function Scene_Map() {
this.initialize.apply(this, arguments);
}

Scene_Map.prototype = Object.create(Scene_Base.prototype);
Scene_Map.prototype.constructor = Scene_Map;

Scene_Map.prototype.initialize = function() {
Scene_Base.prototype.initialize.call(this);
this._waitCount = 0;
this._encounterEffectDuration = 0;
this._mapLoaded = false;
this._touchCount = 0;
};


I'll try to explain what I currently understand: first it creates the object Scene_Map. Then, inside the constructor (I'm calling constructor to anything that is inside the brackets in "function Scene_Map()", please correct me if I'm wrong) the intialize function later declared is called by this.initialize.apply(this, arguments). Then, the prototype of the object Scene_Base is passed onto the protoype of the object Scene_Map, thus inheriting its properties.


(I am aware what I've said could be utterly wrong, but describing how I read this code might help you to understand what I don't)


I always thought the prototype of a object was the same as the constructor, but apparently, I'm wrong.


For instance, I have no idea what is happening here: 


Scene_Map.prototype = Object.create(Scene_Base.prototype);
Scene_Map.prototype.constructor = Scene_Map;


And also, why you can't put everything that there is on Scene_Map.prototype.initialize inside the constructor of Scene_Map? Like this:


function Scene_Map() {
function initialize() {
Scene_Base.prototype.initialize.call(this);
this._waitCount = 0;
this._encounterEffectDuration = 0;
this._mapLoaded = false;
this._touchCount = 0;
};




As you can see, there is a lot I don't know. I would be really thankful if someone could help me to understand how prototypes and constructors work, what they truly are, and in what they differ.


Thanks! :)
 

Clock Out

Veteran
Veteran
Joined
Jun 14, 2016
Messages
92
Reaction score
45
First Language
English
Primarily Uses
RMMV
I'm no expert but I'll try to explain.

I always thought the prototype of a object was the same as the constructor, but apparently, I'm wrong.



That is what normally happens but then Object.create() butts in and replaces the original prototype object with a new one that doesn't have its own constructor property. So the engine looks to the prototype of the new object which points to Scene_Base.prototype where it finds a property named constructor which points to the Scene_Base function. That's gonna cause confusion because we expect instances of Scene_Map to say they're constructed by Scene_Map.


Live Example


Code


function Parent() {}
function Child() {}

Child.prototype = Object.create(Parent.prototype);

var c = new Child();

// Does c have a constructor property?
console.log(c.hasOwnProperty("constructor")); // false

// Does c's prototype (Child.prototype) have a constructor property?
console.log(Object.getPrototypeOf(c).hasOwnProperty("constructor")); // false

// Does the prototype of Child.prototype (Parent.prototype) have its own constructor property?
console.log(Object.getPrototypeOf(Child.prototype).hasOwnProperty("constructor")); // true - Finally!




So we fix it by giving the new object a constructor property and pointing it to the function we want.


Live Example


Code


function Parent() {}
function Child() {}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

var c = new Child();
console.log(Object.getPrototypeOf(c).hasOwnProperty("constructor")); // true - Just what we need.


Topic 3


The code as posted won't execute. Missing a closing } and naturally one would have to call the function otherwise it won't run. Finally we wouldn't put a function there anyway because each function call generates its own this value. Invoking initialize would set the value of this inside initialize to the global object instead of the object being constructed by Scene_Map. I don't have an immediate answer as to why the code in initialize wasn't put directly in the Scene_Map function.
 
Last edited by a moderator:

Kino

EIS Game Dev
Veteran
Joined
Nov 27, 2015
Messages
562
Reaction score
807
First Language
English
Primarily Uses
RMMV
A class can be a function or an object  in JS. But what you described is true, you  can stuff everything inside of function  Scene_Map if you wanted. Whenever a function is called in JavaScript  the constructor method is called at the same time. That means all the code inside Scene_Map gets executed like you described (aka initialize method).


In Rpgmaker MV's base code, the prototype.initialize is used to construct/initialize the new Scene upon creation. You could always  just put it directly in the function call however. But not in the way that you did. You would use the this keyword.


For it to be an instance property in JS, you'd have to use this.myFunction = function() {}. That means it's a part of this new object upon creation. But, prototypes are just overall cleaner to look at, and are the cleaner way to add instance methods and variables. Plus, prototypes can be used to inherit from other classes you create in JS.


In JavaScript a prototype is the equivalent of an instance property; it belongs to new objects called with the new operator. Conversely,  If they did Scene_Base.initialize -- it would  be static, existing on the original class.
 

Latest Threads

Latest Profile Posts

Too bad the Boss Battle Build Bout isn't also for VXAce.
I might not participate in the Boss Battle contest after all... I have more important things to do, like Wishful Wanda. And of course the Dark Deception spinoff I plan to pitch, Demon Slayer.
Changed my avatar, goodbye Alan Sugar, hello George Carlin (one of my favorite human beings ever)
If you still don't subscribe our Polish channel please consider it :)
1.png
Who wants to see my review of the worst star wars movie? This movie has all the excitement of being on Jury Duty of the most boring case ever about trade negotiations.

Forum statistics

Threads
115,171
Messages
1,087,816
Members
149,725
Latest member
Incorrect_Horse
Top