Javascript is a dynamic scripting language, used as a mover for your HTML-based Web applications. As with other dynamic languages with Javascript there is a problem of creating clear stable code. Since a developer here is abandoned without a help of a code compiler, the only thing they can do is to organize code well. As usually, old friend OOP comes to rescue. And even such language as Javascript has some characteristics of object-oriented language. In Javascript there is a confusing concept of object as a function, so one may say everything is a function, and vice versa, everything is an object in Javascript, even a function. Moreover, there is an extra way to define an object using associative array, e.g.
var person = {
gender : null,
name : "John",
age : 30,
toString : function() { return this.name + " is " + this.age + " years old"; }
}
There is one inappropriate thing easy to notice – Where is the Person class definition? The answer is that Javascript does not have a notion of class, although it has prototypes, which can be considered as a dynamic class.
Person.prototype.gender = "’;
Person.prototype.toString = function() {…}
On the other hand, Java (not Javascript!) is an object-oriented language that makes you program with objects in mind, and together with all the processes and community around it Java gives you great set of OOP features, conventions and best practices out-of-box. So my approach to the problem here is to port Java OOP model to Javascript code.
First, Java’s class maps to a function in Javascript.
Person = function() { … }
Second, Java’s class method maps to a function variable prefixed with “this.prototype.”
class Person
{
public String toString
() {…
}
}
Person = function {
this.prototype.toString = function() {…}
}
Third, Java’s class field maps to a variable declared within Javascript function and prefixed with “this.” and a default value.
class Person {
public int age;
public void setAge(age) { this.age = (age > 10 ? age : 10); }
}
Person = function() {
this.age = null;
this.prototype.setAge = function(age) { this.age = (age > 10 ? age : 10); }
}
4th, Java’s private members is a var variable in Javascript:
5th, Java’s class instance maps to an object in Javascript.
6th, one of the greatest concepts in OOP is the inheritance. In Javascript we can emulate inheritance via reserved property prototype.
MenuItem = function
(elementId, text
) {
this.
id = elementId
;
this.
text = text
;
this.
prototype.
MenuItem() {
document.
getElementById(this.
id).
bean = this;
document.
getElementById(this.
id).
innerHTML = this.
text;
}
this.
prototype.
setVisible = function
(visible
) {
var element
= document.
getElementById(this.
id);
element.
style.
display = (visible
? "" : "hidden");
}
this.
prototype.
toString = function
() {
return "MenuItem(" + this.
elementId + ", " + this.
text + ")";
}
}
IconMenuItem = function(elementId, text, iconUrl) {
this.prototype = new MenuItem();
this.iconUrl = iconUrl;
this.prototype.MenuItem() {
document.getElementById(this.id).bean = this;
document.getElementById(this.id).innerHTML = this.text;
document.getElementById(this.id).style.backgroundImage = this.iconUrl;
}
this.prototype.setEnabled() {
var element = document.getElementById(this.id);
element.onclick = …;
}
this.prototype.toString = function() {
return "IconMenuItem(" + this.elementId + ", " + this.text + "," + this.iconUrl + ")";
}
}
Enjoy your Javascript coding!
Disclaimer: This article resurrected from the drafts garbage without much editing afterwards. In the Internet you can find lots of more complex approaches and explanations, and different mini-frameworks imitating object orientation in Javascript.
