JavaScript class
In my opinion, JavaScript is one of complicated grammar of programming language.
JavaScript Class
JavaScript class is prototype, method.
This is the simple class
var Member = function(){};
Instantiate
var mem = new Member();
Initialize with constructor
var Member = function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; this.getName = function() { return this.lastName + '' + this.firstName; } }; var mem = new Member("Mayu", "Watanabe");
Method, Value
this.getXXX = function(){}
Add method runtime
mem.greeting = function() { alert("Open"); } mem.get = function() { return this.lastName; }
Add greeting method to mem(instance) only
prototype
Method is prototype declare
prototype is imply reference. Reference is just same. That means efficient memory use
This is like class member method
var Member = function( firstName, lastName) // Constructor { this.firstName = firstName; this.lastName = lastName; }; Member.prototype.getName = function() // Method { return this.lastName + ' ' + this.firstName; }
How to use
var yukirin = new Member("Yuki", "Kashiwagi");
To use prototype, to add member method
If you want to add member, use constructor this.xxx = xxx;
this.array = new Array();
Prototype tips
One suggestion
1 file has constructor var and prototype
Advantage of prototype
- Memory saving
- Add member and method immediately
static
Not use prototype!
examples
obj.property_name = value; obj.property_method = function(){}; var obj = function(){}; // constructor obj.version = '1.0'; // static proeprty obj.triangle = function( base, height) { return base * height / 2; } var a = new obj();
static property should be readonly
Don’t use this keyword in static method
Literal
var Member = function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }; Member.prototype = { getName : function(){return this.lastName + ' ' + this.firstName;}, toString : function(){ return this.lastName + this.firstName; } };
Chain(Inheritance)
subclass.prototype = new superclass();
sub class prototype is super class?
var Animal = new function(){} // Constructor Animal.prototype = // Method { walk: function() { document.write("Walk!"); } }; var Dog = function(){} // Constructor Dog.prototype = new Animal(); // Extends Animal var shiba = new Dog(); shiba.walk();
prototype chain
Find method?
- Find member from child instance
- Find from object prototype
- Find from super class prototype …
One more example
var Rectangle = function (w, h ) { this.width = w; this.height = h; } Rectangle.prototype.area = function() { return this.width * this.height; } // Here is subclass var PositionedRectangle = function (x, y, w, h) { // Call superclass constructor Rectangle.call(this, w, h); this.x = x; this.y = y; } PositionedRectangle.prototype = new Rectangle();
How to delete property
delete PositionedRectangle.prototype.width; delete PositionedRectangle.prototype.height;
How to call super class constructor
SuperClassName.call(this, w, w );
Add constructor
PositionedRectangle.prototype.constructor = PositionedRectangle;
Add additional method
PositionedRectangle.prototype.contains = function(x, y) { return (x > this.x && x < this.x + this.width && y > this.y && y < this.y + this.height); } [/javascript] <h4>Override</h4> [javascript] Rectangle.prototype.toString = function() { return "[" + this.width + "," + this.height + "]"; } PositionedRectangle.prototype.toString = function() { return "(" + this.x + "," + this.y + ") " + Rectangle.prototype.toString.apply(this); }
Heya i’m for the first time here. I found this board and I find It
really helpful & it helped me out a lot. I’m hoping to offer one
thing back and help others like you aided me.
Hi there! I simply would like to offer you a huge
thumbs up for the excellent information you’ve got here on this post.
I am coming back to your site for more soon.
I will right away grab your rss as I can not find
your email subscription hyperlink or e-newsletter service.
Do you have any? Please let me know in order that I
may subscribe. Thanks.