OOP. Calling Methods from Methods

Question

How do I call class methods from functions inside a class? My code is:

var myExtension = { init: function() { // Call onPageLoad }, onPageLoad: function() { // Do something }, } 

I tried...

 onPageLoad(); 

... from the init method, but it says that it is not defined.

I am not very lucky with Google because I do not understand the syntax used. All the JO OOP examples that I find on the Internet are in a different format. I use the Mozilla format to develop extensions.

Answer 1

Assuming you called init like this:

 myExtension.init(); 

then it should be:

 init: function() { // before this.onPageLoad(); // after } 

But in Javascript functions, they are not actually attached to objects, and you can call any function on any other object, for example:

 myExtension.init.call(anotherObject); // or myExtension.init.apply(anotherObject); 

In this example, this inside init will be anotherObject that does not have onPageLoad . If you want to support this use, you will have to manually reference the source object:

 init: function() { // before myExtension.onPageLoad(); // after } 

Answer 2

The object to which the current method was called is accessible through the special this variable. Each time you call a method on an object, this will refer to the object in the method.

 var myExtension = { init: function() { this.onPageLoad(); }, onPageLoad: function() { // Do something }, }; 

this always refers to the calling object, not to the object that is defined by the function or is a property.

 value = 'global'; var ob0 = { value: 'foo', val: function() { return this.value; }, }, ob1 = {value: 'bar'}, ob2 = {value: 'baz'}; ob0.val(); // 'foo' ob1.val = ob0.foo; ob1.val(); // 'bar' ob0.val.call(ob2); // 'baz' var val = ob0.val; val(); // 'global' 

In the latter case, val is executed as a free function (a function that is not bound to an object, that is, not a method), in which case this takes the value of a global object (which is a window in web browsers) as part of the val execution. Global variables are actually properties of a global object, so val() returns 'global' (the value of a global variable called value ). Since global variables are actually properties of a global object, you can view free functions as if they were actually methods of a global object. From this point of view, the last two lines (when executed in the global area) are equivalent:

 window.val = ob0.val; window.val(); 

This point of view does not quite correspond to the reality of coverage, although you will notice a difference within the functions. In the function window.val = ... will create a global value, but var val will not.

 value = 'global'; var ob0 = { value: 'foo', val: function() { return this.value; }, }; function lcl() { var val = ob0.val; // doesn't set a global named `val` return val(); // 'global' } lcl(); // 'global' val(); // error; nothing named 'val' function glbl() { window.val = ob0.val; // sets a global named `val` return window.val(); // 'global' } glbl(); // 'global' val(); // 'global' 

See the MDN man page for the call method described above. For more information on this variable, see " JavaScript" this "keyword " and " How does the keyword" this "work in a JavaScript literal object? "

Answer 3

In Javascript, you need to explicitly specify this

 this.onPageLoad() 

The same is true for other member variables (remember that in Javascript methods there are only member variables that are functions)

 this.memberVariable 

Answer 4

Instead, did you consider closing?

For instance:

 var myExtension = ( function() { var me = {}; var private_thingy = "abcDEFG123"; var onPageLoad = function() { // do page loading business alert( private_thingy ); } me.onPageLoad = onPageLoad; var init = function() { onPageLoad(); } me.init = init; return me; })(); /////////////// myExtension.private_thingy = "DIDDLED!"; // will NOT modify the private_thingy declared within the closure myExtension.init(); // will work fine. 

Everything that you define in closure is always available in closure, and when it is implemented, it will receive closed members inaccessible to users of the object. Only those elements that you explicitly export are available, for example, the lines me.xxx = xxx.

Thus, when onPageLoad is executed, the warning will display "abcDEFG123" rather than "DIDDLED!" Object users can change properties using the point operator until the cow returns home; however, what cannot be made public by closure cannot be changed. Even if the user reassigns the function in the public interface, calls to the private function from the closure will always point to the function defined in the closure.

The important part: it frees you from constantly using it (if you really don't want to use it, save your fingers for more important text input).

Take a picture. And look at Javascript: Crockford's “Good Details”.