structure of object oriented js

Question

I am new to object oriented js. In my work, i have to edit some previous code done by some other person. AS i am new to this area, can not understand some structure and notation. Bellow the structure that i can not deal with,

(function ($) {
    AjaxSolr.GenericGraphWidget = AjaxSolr.AbstractFacetWidget.extend({

      _functionName:function(){
       }

   })(jQuery);

Now here AjaxSolr is a base class which is defined in another file. AbstractFacetWidget is also a class which is also extended from AjaxSolr. Now can anybody explain, what kind of structure is this?(ya, i understand only that this is a kind of class, like other oop language, which is extended from another class). what (function ($) means?

What i know untill now that to create object and inheritance i have to do like the following-

var Constructor = function(name) {
    this.name = name
};

Constructor.prototype.mymethod = function() {
    alert("my name is : " + this.name);
};

var obj = new Constructor("foo");
obj.mymethod();

May be they used another format that i don't know. If ,I want to call a function of that class from outside of that class, how can i do this? If my question does not explain well, please ask me.

I see you are coming from OOP language. My advice is stay out of constructor and just learn to read it since a lot people for no good reason use it. As for yourself use factory functions. — PVL, Mar 07 '16 at 18:19
Related: http://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript — charlietfl, Mar 07 '16 at 18:26

score 0 · Answer 1 · answered Mar 07 '16 at 18:17

0

Usually, .extend({...}) means "take their prototype and merge the supplied object". So extend creates a new object and is set to AjaxSolr.GenericGraphWidget. This way, you can do something similar to inheritance as is common in other OOP languages.

I guess you deleted some parts, so I hope the following holds true for your specific example: The (function ($) { ... })(jQuery); is a way to write an immediately invoked function expression: It creates an anonymous function (function ($) { ... have $ available here ... }) and calls it directly with some argument (in this case jQuery).

answered Mar 07 '16 at 18:17

Narigo

2,979
3
20
31

so, when i load the page this function is called with the "jquery" argument where $ assigns to "jquery ". isn't it? – sovon Mar 07 '16 at 18:45
Yes, `$ === jQuery` in this case. – Narigo Mar 07 '16 at 21:32
Hi, another thing, is AjaxSolr.GenericGraphWidget is a class? can i create object like var a= new AjaxSolr.GenericGraphWidget(); this. i have to call a function inside it after certain event fire. – sovon Mar 08 '16 at 16:51
From the code you pasted, I can't guarantee it. You'd need to check how `AbstractFacetWidget` and its `extend` method is implemented. I would expect it to be a class though. – Narigo Mar 08 '16 at 19:13

structure of object oriented js

1 Answers1