Javascript virtue and usage is super: is this possible?

Question

if (typeof Object.create !== 'function') { Object.create = function (o) { function F() { } F.prototype = o; var f = new F(); if(f.init){ f.init(); }; return f; }; } var inherit = function(P, C) { var i; for(i in P) { // if is the current parent if(P.hasOwnProperty(i) === false) { continue; }; // define the uper property C.uper = {}; // methods if(typeof P[i] === 'function') { // set as super C.uper[i] = P[i]; // if child already defined, skip if(typeof C[i] === 'function') { continue; }; C[i] = P[i]; } // properties else { // if child already defined a property, skip if(!(typeof C[i] === 'undefined')) { continue; }; C[i] = P[i]; } } return C; } var Parent1 = (function(){ var that = {}; // private var var _name = 'Parent1'; // public var that.lastName = 'LastName'; // public method that.getName = function(){ // if this.uper.getName.call(this) return _name + this.lastName; // else // return _name + that.lastName; } // return the literal object return that; }()); var Parent2 = { // fake private var _name: 'Parent2', // public method getName: function(){ // as we call this method with the call method // we can use this return this._name; } } var Child1 = inherit(Parent1, (function(){ var that = {}; // overriden public method that.getName = function(){ // how to call the this.uper.getName() like this? return 'Child 1\ name: ' + this.uper.getName.call(this); } that.init = function(){ console.log('init'); } // return the literal object return that; }())); var Child2 = inherit(Parent2, { getName: function(){ // how to call the this.uper.getName() like this? return 'Child 2\ name: ' + this.uper.getName.call(this); } }); var child1 = Object.create(Child1); // output: Child 1 name: Parent1LastName console.log(child1.getName()); var child2 = Object.create(Child2); // output: Child 2 name: Parent2 console.log(child2.getName()); // how to call the this.uper.getName() like this? 

how to call this.uper.getName () like this?

Answer 1

Yes

Javascript uses Prototypal inheritance . Thus, essentially objects inherit objects (and all objects)

Here are some links that should help you find the point.

• Javascript Module Template
• Module deepening

Here is the main module template:

 var MODULE = (function (my) { my.anotherMethod = function () { // added method... }; return my; }(MODULE)); 

Then you can do something like this to simulate inheritance:

 var MODULE_TWO = (function (old) { var my = {}, key; for (key in old) { if (old.hasOwnProperty(key)) { my[key] = old[key]; } } var super_moduleMethod = old.moduleMethod; my.moduleMethod = function () { // override method on the clone, access to super through super_moduleMethod }; return my; }(MODULE)); 

---

This coding style is a bit getting used to, but I definitely prefer its classical inheritance at this point. If this code doesn't make sense, check out Douglas Crockford's lectures and it should clear up most of this.

---

appeal to editing: You can create various instances of these objects using the new operator.

OR

I would recommend using this small method that extends the prototype of the object (again, if that doesn't make sense, see the Douglas Crockford video). I forget the exact reasons why it is so highly recommended to them, but at least it eliminates some of the confusion that the new operator is slightly different from classical languages. Needless to say, using only with the new operator is not enough.

What this function does is extend the prototype of the object using the create method. Then he ...

• Defines a function F in the containing namespace.
• Assigns a prototype of function F to the passed object
• returns the newly created object.

(best described by Douglas Crockford himself in a prototype inheritance link)

 if (typeof Object.create !== 'function') { Object.create = function (o) { function F() {} F.prototype = o; return new F(); }; } newObject = Object.create(oldObject); 

So using your code ...

 var a = Object.create(MODULE_TWO), var b = Object.create(MODULE_TWO); 

Answer 2

Responding to your last change, you can use something like this:

 function Class(ctor, parent) { var c = Function.prototype.call; function clas() { // expose the parent as super this.super = parent; ctor.apply(this, arguments); } // save the constructor clas.constructor = ctor; // provide a static constructor clas.init = function() { c.apply(parent.constructor, arguments); }; // Setup the prototype clas.prototype = parent ? parent.prototype : {}; // provide an extend method clas.extend = function(methods) { for(var i in methods) { if (methods.hasOwnProperty(i)) { clas.prototype[i] = methods[i]; } } return clas; }; return clas; } 

Examples:

 var Animal = Class(function(name) { this.name = name; }); var Cat = Class(function(name) { this.super(name); }, Animal).extend({ meow: function() { console.log('Meow! My name is ' + this.name + '.'); } }); new Cat('Neko').meow(); 

There are at least a trillion different ways to implement Classes in JavaScript, the more you want to hide the internals, the more magical the code becomes, but it's very simple.

You may (and possibly need) to customize this to suit your needs. But always keep in mind that there may be situations where a full-fledged class emulation approach may not be the best.

I already posted it as a comment, but in case you want everything to be hidden for you, I wrote quite rich functionality, but still a fast, cool my own library:
https://github.com/BonsaiDen/neko.js