Understanding OOP in javascript

Question

I am very new for understanding the javascript object oriented development. So I am reading jQuery source code and trying to understand by implementing the same concept to my custom libs although goal is not copy code but creating handful of function in OOP way.Here is my code..

(function (window) {
var myCustomClass = function () {
    debugger;
    return new myCustomClass.mycustomFunction.Init();
};
myCustomClass.mycustomFunction= myCustomClass.prototype = {
    Init: function () {
        return this;
    },
    alert: function () {
        alert('I got called');
    }
};
window.$ = window.mQuery = myCustomClass;
})(window);

and trying to use in this way:

  mQuery().alert();

but it is giving an error , I am trying to figure it but with no avail. I think , I am missing some concept ,please direct me on the right direction.

http://eloquentjavascript.net/contents.html is a good start for understanding JavaScript OOP. Especially chapters 6 and 8. — Dan Dascalescu, Nov 05 '12 at 09:04
Thanks for immediate reply , i have already grasped basic of JS OOPS but still facing the issues while applying it. — Paritosh, Nov 05 '12 at 09:06
Check out [this question](http://stackoverflow.com/q/12143590/1048572) for understanding jQuery's foul OOP pattern - do not use it — Bergi, Nov 05 '12 at 10:47

David Hellsing · Accepted Answer · 2012-11-05T09:53:17.323

1

Looking at the jQuery source code and trying to mimic it’s concept is not necessarily a great way to start your javascript OOP learning curve. I would suggest you start with something simpler and some basic books, and work your way up before trying to understand a fairly complex library from it’s source code.

If you are looking for a way to chain functions from a constructor "jQuery style", you can try this simple pattern as a starter:

var myCustomClass = function() {
    // initialize a new instance
    if(!(this instanceof myCustomClass)) {
        return new myCustomClass();
    }
};
myCustomClass.prototype = {
    constructor: myCustomClass,
    // add some custom methods
    alert: function() {
        window.alert.apply(window, arguments);
        return this;
    },
    write: function(str) {
        document.body.innerHTML = str;
        return this;
    }
};

myCustomClass().alert('foo').write('bar');

edited Nov 05 '12 at 09:53

answered Nov 05 '12 at 09:15

David Hellsing

106,495
44
176
212

I have changed the code that was only a typo mistake I was not intended to write it – Paritosh Nov 05 '12 at 09:27
Still, you are forgetting some important parts such as copying the Init prototype from the class prototype: `myCustomClass.mycustomFunction.Init.prototype = myCustomClass.prototype`. But if you don’t know what it does or how it works, why would you want to implement it? – David Hellsing Nov 05 '12 at 09:46
@paritosh feel free to accept the answer if it solved your question – David Hellsing Nov 05 '12 at 10:22
done... thanks a lot .Actually I would like to understand these concepts , currently I am reading eloquentjavascript.net/contents.html as per the Dan Posted , if you have any please share. So that I can develop more understanding on the same. – Paritosh Nov 05 '12 at 10:39

Understanding OOP in javascript

1 Answers1