How does the underlying chain of objects / functions work in javascript?

Question

I am trying to get the principles of jQuery function working in a chain right in my head. By this I mean:

var e = f1('test').f2().f3(); 

I have one example for work, and another not. I will send them below. I always want to learn the first fundamentals of how something works so that I can build on top of it. So far, I have only had a superficial and free understanding of how the chain works, and I encounter errors that I can’t resolve reasonably.

What i know:

• Functions must be returned, aka "return this";
• Chain functions must be in the parent function, since in jQuery, .css () is a helper method of jQuery (), so jQuery (). css ();
• The parent function must either return itself or the new instance itself.

This example worked:

 var one = function(num){ this.oldnum = num; this.add = function(){ this.oldnum++; return this; } if(this instanceof one){ return this.one; }else{ return new one(num); } } var test = one(1).add().add(); 

But this is not:

 var gmap = function(){ this.add = function(){ alert('add'); return this; } if(this instanceof gmap) { return this.gmap; } else{ return new gmap(); } } var test = gmap.add(); 

Answer 1

In JavaScript, Functions are first class objects. When you define a function, this is the constructor for this function object. In other words:

 var gmap = function() { this.add = function() { alert('add'); return this; } this.del = function() { alert('delete'); return this; } if (this instanceof gmap) { return this.gmap; } else { return new gmap(); } } var test = new gmap(); test.add().del(); 

By assigning

  new gmap (); 

To test the variable, you created a new object that "inherits" all the properties and methods from the constructor (class) gmap (). If you run the snippet above, you will see a warning for “add” and “delete”.

In the above examples, “this” refers to a window object, unless you wrap functions in another function or object.

It's hard for me to understand the chain, at least for me, but as soon as I understood it, I realized how powerful a tool can be.

Answer 2

Unfortunately, the direct answer should be no. Even if you can override existing methods (which you can probably use in many UAs, but I suspect I can't in IE), you will still stick with nasty renames:

 HTMLElement.prototype.setAttribute = function(attr) { HTMLElement.prototype.setAttribute(attr) //uh-oh; } 

The best you could avoid is a different name:

 HTMLElement.prototype.setAttr = function(attr) { HTMLElement.prototype.setAttribute(attr); return this; } 

Answer 3

In order to “rewrite” a function, but still be able to use the original version, you must first assign the original function to another variable. Suppose an example object:

 function MyObject() { }; MyObject.prototype.func1 = function(a, b) { }; 

To rewrite func1 for the chain, do the following:

 MyObject.prototype.std_func1 = MyObject.prototype.func1; MyObject.prototype.func1 = function(a, b) { this.std_func1(a, b); return this; }; 

Here is a working example . You just need to use this technique on all standard objects that you think require chaining.

By the time you complete all this work, you will realize that there are better ways to accomplish what you are trying to do, for example, using a library that already has a chain built in. _{* cough * jQuery * cough *}

Answer 4

First, let me say that I explain this in my own words.

The method chain pretty much calls the method of the object returned by another function / method. for example (using jquery):

 $('#demo'); 

this jquery function selects and returns a jquery object with a DOM element demonstrating id. if the element was a text node (element), we could bind the method of the returned object. eg:

 $('#demo').text('Some Text'); 

So, as long as the function / method returns an object, you can associate the method of the returned object with the original expression.

As to why the latter do not work, pay attention to where and when the this keyword is used. This is most likely a context issue. When you call this , make sure that this only refers to this object object, and not to the window object / global area.

Hope this helps.

Answer 5

Just call the method like var test = gmap (). add ();

since gmap is a function, not a variable