How do I establish inheritance between objects in JavaScript?
I have the following code that creates two objects (ProfileManager and EmployerManager) where the EmployerManager object is assumed to inherit from the ProfileManager object. However, when I do the alert (pm instanceof ProfileManager); it returns false.
function ProfileFactory(profileType) {
switch(profileType)
{
case 'employer':
return new EmployerManager();
break;
}
}
function ProfileManager() {
this.headerHTML = null;
this.contentHTML = null;
this.importantHTML = null;
this.controller = null;
this.actions = new Array();
this.anchors = new Array();
}
ProfileManager.prototype.loadData = function(action, dao_id, toggleBack) {
var step = this.actions.indexOf(action);
var prv_div = $('div_' + step - 1);
var nxt_div = $('div_' + step);
new Ajax.Request(this.controller, {
method: 'get',
parameters: {action : this.actions[step], dao_id : dao_id},
onSuccess: function(data) {
nxt_div.innerHTML = data.responseText;
if(step != 1 && !prv_div.empty()) {
prv_div.SlideUp();
}
nxt_div.SlideDown();
for(i = 1; i <= step; i++)
{
if($('step_anchor_' + i).innerHTML.empty())
{
$('step_anchor_' + i).innerHTML = this.anchors[i];
}
}
}
}
)
}
EmployerManager.prototype.superclass = ProfileManager;
function EmployerManager() {
this.superclass();
this.controller = 'eprofile.php';
this.anchors[1] = 'Industries';
this.anchors[2] = 'Employer Profiles';
this.anchors[3] = 'Employer Profile';
this.actions[1] = 'index';
this.actions[2] = 'employer_list';
this.actions[3] = 'employer_display';
}
var pm = new ProfileFactory('employer');
alert(pm instanceof ProfileManager);
By the way, this is my first attempt at object oriented JavaScript, so if you feel compelled to comment on the stupidity of my approach, feel free to do so, but offer suggestions on how best to approach the problem.
source to share
Thanks for all the comments. However, a solution was found when making this change to the EmployerManager declaration:
function EmployerManager() {
this.controller = 'eprofile.php';
this.anchors = new Array('Industries', 'Employer Profiles', 'Employer Profile');
this.actions = new Array('index', 'employer_list', 'employer_display');
}
EmployerManager.prototype = new ProfileManager;
Obviously JavaScript supports two different types of inheritance, function-based and prototype-based. The feature based version is what I originally posted but was unable to get the job done because EmployerManager was unable to see the loadData method that was part of the ProfileManager prototype.
This new example is based on a prototype and is working now. EmployerManager is now an instance of ProfileManager.
source to share
I used something similar to Dean Edward's Base.js model. http://dean.edwards.name/weblog/2006/03/base/
source to share
Prototype inheritance is supported (mimicing) through the Object.extend () function .
However, one could argue that trying to impose class inheritance on a language that does not support classes is an example of "when you only have a hammer, the whole world looks like a nail."
source to share
I just wanted to insert that while JavaScript is an object oriented language, it does not have many of the features common in other popular OO languages. Conversely, it also has a lot of features that other popular OO languages don't have.
As you've already discovered, inheritance is managed through prototype objects, not class inheritance. However, the prototype object is not considered when using the "instanceof" operator. This means JavaScript does not support polymorphism. At least not out of the box.
You can find libraries that allow JavaScript to conform to the OOP model you're used to; if you are under a gun this may be the best solution. (Although no library will ever make a JavaScript polymorphism object when checked with "instanceof", the isInstanceOf function will probably be needed.) Or, you can choose another language that conforms to this OOP model, but you are probably working in a browser so that obviously not an option. Or you could answer the question, "How can I solve my problem without polymorphism?"
source to share
You can use new or Object.create to achieve classic inheritance
function A(){
B.call(this);
}
function B(){
}
//there are 2 ways to make instanceof works
//1. use Object.create
A.prototype = Object.create(B.prototype);
//2. use new
//A.prototype = new B();
console.log(new A() instanceof B); //true
//make instanceof works
EmployerManager.prototype = Object.create(ProfileManager.prototype);
//add other prototype memebers
EmployerManager.prototype.superclass = ProfileManager;
console.log(new EmployerManager() instanceof ProfileManager); //true
source to share