Javascript OOP and Class

Question

The code is here:

Father.js

(function(){
function father(){

};
father.prototype.init = function(){
    console.log('father');
}
})()

Child.js

(function(){
function child(){

}

child.prototype.init = function(){
    console.log('child');
}

var father = new father();
 })()

I have 2 questions: How can I call father object or child object between script tag or any third javascript files that I create ? Second: how can I call the father object inside child class. I am new to JS and have some problems with OOP in javascript. Thank you very much for your help

Like `var Father = (function(){...; return Father }());` – elclanrs Jul 13 '13 at 03:10 — elclanrs, Jul 13 '13 at 03:10
@elclanrs: You should post that as an answer. – icktoofay Jul 13 '13 at 03:12 — icktoofay, Jul 13 '13 at 03:12

score 4 · Accepted Answer · answered Jul 13 '13 at 03:23

You should assign the result of the anonymous function to a variable that way you can use it without leaking what's inside of the IIFE (Immediately Invoked Function Expression), thus encapsulating everything but the constructor:

var Father = (function(){

  // Private stuff...

  function Father(){}

  Father.prototype.something = function(){};

  return Father; // Public constructor
}());

Now you can use Father in your Child class, or better yet, use the same pattern but pass the parent class as parameter to the IIFE:

var Child = (function(_parent){

  function Child() {
    _parent.apply(this, arguments); // inherit properties from Parent class
  }

  Child.prototype = Object.create(_parent.prototype); // inherit Parent prototype

  Child.prototype.something = function(){};

  return Child;
}(Father));

That is what exactly I am looking for. Thank you very much for all the answers. — themyth92, Jul 13 '13 at 03:49
Note that Object.create isn't supported in older browsers (IE 8) and has Child.prototype.constructor point to the wrong object. This could be of value if you plan to use `this.constructor` at some point in Child intances. — HMR, Jul 13 '13 at 04:08

score 0 · Answer 2 · edited May 23 '17 at 12:29

Answer to question one is you define father and child in the global scope:

function father(){
};
father.prototype.init = function(){
    console.log('father');
}
function child(){
}
child.prototype.init = function(){
    console.log('child');
}
// can't name your var father because it'll overwrite the father function
var dad = new father();

You can use namespacing to restrict the amounts of variables in the global scope:

in father.js:

var myApp=myApp || {};
myApp.father=...

in child.js:

var myApp=myApp || {};
myApp.child=...
var dad = new myApp.father();

To call father object in child you can do father.call(this); making all the father properies in the father function defined as this.someprop=... part of the just created child. If you just want to access the father instance named dad (see code above) then you can do dad.init()

More on inheritance and prototype here:

Prototypical inheritance - writing up

If I do that, how can I include jQuery inside class ? Thank you very much for your answer — themyth92, Jul 13 '13 at 03:22
You add jQuery as the first file and you can use $ in any other included files. — HMR, Jul 13 '13 at 03:43

score 0 · Answer 3 · answered Jul 13 '13 at 03:20

0

I've set up a fiddle : http://jsfiddle.net/J75Zz/

It doesn't matter on how many .js files you "distribute" your code, it's just "one code block", which get's executed (well, almost ...).

You should name Objects with Capitals, there's already a clash between object father and variable father.

answered Jul 13 '13 at 03:20

Axel Amthor

10,980
1
25
44

Note that Child doesn't overload Father's init function http://en.wikipedia.org/wiki/Method_overloading and it doesn't technically override it either because Child doesn't have Father as prototype (didn't inherit init from Father in the first place) – HMR Jul 13 '13 at 03:49
From my fiddle: Yes, but is the overloading requested by OP? Q was **Second: how can I call the father object inside child class** and I understand that as a simple instantiation of object child within father? Answer to that was already given. – Axel Amthor Jul 13 '13 at 03:51

Javascript OOP and Class

3 Answers3