I'm trying to get the principles of doing jQuery-style function chaining straight in my head. By this I mean:
var e = f1('test').f2().f3();
I have gotten one example to work, while another doesn't. I'll post those below. I always want to learn the first principle fundamentals of how something works so that I can build on top of it. Up to now, I've only had a cursory and loose understanding of how chaining works and I'm running into bugs that I can't troubleshoot intelligently.
What I know:
Functions have to return themselves, aka "return this;"
Chainable functions must reside in a parent function, aka in jQuery, .css() is a sub method of jQuery(), hence jQuery().css();
The parent function should either return itself or a new instance of 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 one doesn't:
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();
In JavaScript Functions are first class Objects. When you define a function, it is the constructor for that 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 the new gmap();to the variable test you have now constructed a new object that "inherits" all the properties and methods from the gmap() constructor (class). If you run the snippet above you will see an alert for "add" and "delete".
In your examples above, the "this" refers to the window object, unless you wrap the functions in another function or object.
Chaining is difficult for me to understand at first, at least it was for me, but once I understood it, I realized how powerful of a tool it can be.
Sadly, the direct answer has to be 'no'. Even if you can override the existing methods (which you probably can in many UAs, but I suspect cannot in IE), you'd still be stuck with nasty renames:
HTMLElement.prototype.setAttribute = function(attr) {
HTMLElement.prototype.setAttribute(attr) //uh-oh;
}
The best you could probably get away with is using a different name:
HTMLElement.prototype.setAttr = function(attr) {
HTMLElement.prototype.setAttribute(attr);
return this;
}
To "rewrite" a function, but still be able to use the original version, you must first assign the original function to a different variable. Assume an example object:
function MyObject() { };
MyObject.prototype.func1 = function(a, b) { };
To rewrite func1 for chainability, do this:
MyObject.prototype.std_func1 = MyObject.prototype.func1;
MyObject.prototype.func1 = function(a, b) {
this.std_func1(a, b);
return this;
};
Here's a working example. You just need to employ this technique on all of the standard objects that you feel need chainability.
By the time you do all of this work, you might realize that there are better ways to accomplish what you're trying to do, like using a library that already has chainability built in. *cough* jQuery *cough*
First, let me state that i am explaining this in my own words.
Method chaining is pretty much calling a method of the object being returned by another function/method. for example (using jquery):
$('#demo');
this jquery function selects and returns a jquery object the DOM element with the id demo. if the element was a text node(element), we could chain on a method of the object that was returned. for example:
$('#demo').text('Some Text');
So, as long as a function/method returns an object, you can chain a method of the returned object to the original statement.
As for why the latter don't work, pay attention to where and when the keyword this is used. It is most likely a context issue. When you are calling this, make sure that this is referring to that function object itself, not the window object/global scope.
Hope that helps.
Just call the method as var test = gmap().add();
as gmap is a function not a variable
Related
I'm trying to get the principles of doing jQuery-style function chaining straight in my head. By this I mean:
var e = f1('test').f2().f3();
I have gotten one example to work, while another doesn't. I'll post those below. I always want to learn the first principle fundamentals of how something works so that I can build on top of it. Up to now, I've only had a cursory and loose understanding of how chaining works and I'm running into bugs that I can't troubleshoot intelligently.
What I know:
Functions have to return themselves, aka "return this;"
Chainable functions must reside in a parent function, aka in jQuery, .css() is a sub method of jQuery(), hence jQuery().css();
The parent function should either return itself or a new instance of 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 one doesn't:
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();
In JavaScript Functions are first class Objects. When you define a function, it is the constructor for that 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 the new gmap();to the variable test you have now constructed a new object that "inherits" all the properties and methods from the gmap() constructor (class). If you run the snippet above you will see an alert for "add" and "delete".
In your examples above, the "this" refers to the window object, unless you wrap the functions in another function or object.
Chaining is difficult for me to understand at first, at least it was for me, but once I understood it, I realized how powerful of a tool it can be.
Sadly, the direct answer has to be 'no'. Even if you can override the existing methods (which you probably can in many UAs, but I suspect cannot in IE), you'd still be stuck with nasty renames:
HTMLElement.prototype.setAttribute = function(attr) {
HTMLElement.prototype.setAttribute(attr) //uh-oh;
}
The best you could probably get away with is using a different name:
HTMLElement.prototype.setAttr = function(attr) {
HTMLElement.prototype.setAttribute(attr);
return this;
}
To "rewrite" a function, but still be able to use the original version, you must first assign the original function to a different variable. Assume an example object:
function MyObject() { };
MyObject.prototype.func1 = function(a, b) { };
To rewrite func1 for chainability, do this:
MyObject.prototype.std_func1 = MyObject.prototype.func1;
MyObject.prototype.func1 = function(a, b) {
this.std_func1(a, b);
return this;
};
Here's a working example. You just need to employ this technique on all of the standard objects that you feel need chainability.
By the time you do all of this work, you might realize that there are better ways to accomplish what you're trying to do, like using a library that already has chainability built in. *cough* jQuery *cough*
First, let me state that i am explaining this in my own words.
Method chaining is pretty much calling a method of the object being returned by another function/method. for example (using jquery):
$('#demo');
this jquery function selects and returns a jquery object the DOM element with the id demo. if the element was a text node(element), we could chain on a method of the object that was returned. for example:
$('#demo').text('Some Text');
So, as long as a function/method returns an object, you can chain a method of the returned object to the original statement.
As for why the latter don't work, pay attention to where and when the keyword this is used. It is most likely a context issue. When you are calling this, make sure that this is referring to that function object itself, not the window object/global scope.
Hope that helps.
Just call the method as var test = gmap().add();
as gmap is a function not a variable
I'm trying to get the principles of doing jQuery-style function chaining straight in my head. By this I mean:
var e = f1('test').f2().f3();
I have gotten one example to work, while another doesn't. I'll post those below. I always want to learn the first principle fundamentals of how something works so that I can build on top of it. Up to now, I've only had a cursory and loose understanding of how chaining works and I'm running into bugs that I can't troubleshoot intelligently.
What I know:
Functions have to return themselves, aka "return this;"
Chainable functions must reside in a parent function, aka in jQuery, .css() is a sub method of jQuery(), hence jQuery().css();
The parent function should either return itself or a new instance of 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 one doesn't:
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();
In JavaScript Functions are first class Objects. When you define a function, it is the constructor for that 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 the new gmap();to the variable test you have now constructed a new object that "inherits" all the properties and methods from the gmap() constructor (class). If you run the snippet above you will see an alert for "add" and "delete".
In your examples above, the "this" refers to the window object, unless you wrap the functions in another function or object.
Chaining is difficult for me to understand at first, at least it was for me, but once I understood it, I realized how powerful of a tool it can be.
Sadly, the direct answer has to be 'no'. Even if you can override the existing methods (which you probably can in many UAs, but I suspect cannot in IE), you'd still be stuck with nasty renames:
HTMLElement.prototype.setAttribute = function(attr) {
HTMLElement.prototype.setAttribute(attr) //uh-oh;
}
The best you could probably get away with is using a different name:
HTMLElement.prototype.setAttr = function(attr) {
HTMLElement.prototype.setAttribute(attr);
return this;
}
To "rewrite" a function, but still be able to use the original version, you must first assign the original function to a different variable. Assume an example object:
function MyObject() { };
MyObject.prototype.func1 = function(a, b) { };
To rewrite func1 for chainability, do this:
MyObject.prototype.std_func1 = MyObject.prototype.func1;
MyObject.prototype.func1 = function(a, b) {
this.std_func1(a, b);
return this;
};
Here's a working example. You just need to employ this technique on all of the standard objects that you feel need chainability.
By the time you do all of this work, you might realize that there are better ways to accomplish what you're trying to do, like using a library that already has chainability built in. *cough* jQuery *cough*
First, let me state that i am explaining this in my own words.
Method chaining is pretty much calling a method of the object being returned by another function/method. for example (using jquery):
$('#demo');
this jquery function selects and returns a jquery object the DOM element with the id demo. if the element was a text node(element), we could chain on a method of the object that was returned. for example:
$('#demo').text('Some Text');
So, as long as a function/method returns an object, you can chain a method of the returned object to the original statement.
As for why the latter don't work, pay attention to where and when the keyword this is used. It is most likely a context issue. When you are calling this, make sure that this is referring to that function object itself, not the window object/global scope.
Hope that helps.
Just call the method as var test = gmap().add();
as gmap is a function not a variable
I'm writing a framework that uses wrapping of functions in order to create a debug tool. Currently, I want to report and aggregate information upon function call. I'm using the following code:
function wrap(label, cb) {
return function () {
report(label);
cb.apply(this, arguments);
}
}
And then in order to bind the debug operation I will use:
function funcToWrap (){/* Some existing function*/}
funcToWrap = wrap("ContextLabel", funcToWrap);
Now, when funcToWrap is invoked, it is wired to go through report() method.
The requirement I have is to now change this syntax so that the wrapping is done via:
funcToWrap.wrap("ContextLabel");
Ideally, something like this would solve my issue, but this of course is illegal:
Function.prototype.time = function(label){
var func = this;
// The actual difference:
this = function () { // ILLEGAL
report(label);
func.apply(this, arguments);
}
};
Thank you from ahead for any insight regarding this.
The requirement I have is to now change this syntax so that the wrapping is done via:
funcToWrap.wrap("ContextLabel");
Unless there's a funcToWrap = at the beginning of that, you simply can't meet that requirement. There's no way to change the guts of the function, you can only do what you're doing, create a new function to take its place.
If you have a funcToWrap = at the beginning, of course, it's quite straightforward. But I take it that's not the requirement.
But if I'm mistaking the requirement, then:
Function.prototype.wrap = function wrap(label) {
var f = this;
return function () {
report(label);
return f.apply(this, arguments); // Note the added `return` here
};
};
Usage:
funcToWrap = funcToWrap.wrap("ContextLabel");
Reasonably certain from the question, though, that A) That's not what you're looking for, and B) You could have done it if it were.
The requirement I have is to now change this syntax so that the wrapping is done via:
funcToWrap.wrap("ContextLabel");
That's impossible. One cannot alter a function's behaviour from the outside, it's much like an immutable primitive value in that regard. The only thing you can do is to create a new function and overwrite the old one, but this overwriting has to be explicit. You could use some eval magic for that (like here), but I recommend to use an assignment like in your first example (regardless whether the wrap function is static or a Function method).
E.g.: $(".element").fadeOut().delay(500).fadeIn();
Why can I run multiple functions on a single jQuery object and when can I use this feature? Is there any tutorial/documentation on this?
This is known as chaining and helps you create a fluent interface. Each function returns a reference to the current jQuery instance, which is why you can chain the calls together.
You first create a jQuery instance using $('.element'), which returns an insance of the jQuery object; it's essentially like a constructor. Then each member function of the jQuery object, returns a reference to this, which is basically the owning instance of that function. So instead of doing this:
var jQueryObj = $(".element");
jQueryObj.fadeOut();
jQueryObj.delay(500);
jQueryObj.fadeIn();
You can do it all in one line, because each function more-or-less kind of looks like this (this is a very simple example):
function fadeOut() {
//jQuery code
//...
return this;
}
It is important to note that not all jQuery functions are chainable; some do not return a reference to the jQuery instance and so you cannot chain them. Examples include .html(), .text(), and .val(). These return the actual content that you want (HTML, text, or value of an input element for example). It wouldn't make sense to chain in these cases.
Here's a very simple example that shows you how chaining works:
var Starship = function() {
this.name = "USS Enterprise";
this.registry = "NCC-1701";
this.shipClass = "Constitution";
};
Starship.prototype.name = function(name) {
this.name = name;
return this;
};
Starship.prototype.registry = function(registry) {
this.registry = registry;
return this;
}
Starship.prototype.shipClass = function(shipClass) {
this.shipClass = shipClass;
return this;
}
Starship.prototype.print = function() {
console.log(this.name + " " + this. registry + " " + this.shipClass);
}
Now you can create an instance like so:
var starship = new Starship()
.name("USS Enterprise")
.registry("NCC-1701-E")
.shipClass("Sovereign");
You can then also call starship.print(), but notice that it does not return this, which means you cannot chain anything after that.
jQuery's documentation will go over which methods are chainable and which are not. If the documentation says that the function returns jQuery, then it is chainable; otherwise it is not. Also take note that certain methods are chainable depending on what parameters are passed. For example, the .attr function, which lets you set an attribute, is chainable only when setting an attribute via .attr(attrName, attrValue). When only supplying one argument (.attr(attrName)), it returns the value of the attribute and hence is not chainable.
Load the jQuery site in your browser and click on API Documentation. Each function has a table that includes a returns statement. If it says this:
... you can use chaining.
Otherwise, you cannot, e.g.:
In some methods, the return type depends on parameters passed:
This is accomplished using a design-pattern known as a "Fluent Interface". It is also known as 'chaining'.
FOR EXAMPLE:
var Car = function() {
var speed, color, doors;
this.setSpeed = function(speed) {
this.speed = speed;
**//Returns the reference to the calling `car` object**
return this;
};
this.setColor = function(color) {
this.color = color;
**//Returns the reference to the calling `car` object**
return this;
};
this.setDoors = function(doors) {
this.doors = doors;
**//Returns the reference to the calling `car` object**
return this;
};
};
// Fluent interface
**//Each method returns a reference to the object itself**
**//so the next method chain is refering back to the previous returned value**
**//ie - itself, the orginal object that started the call chain**
myCar = new Car();
myCar.setSpeed(100).setColor('blue').setDoors(5);
// Example without fluent interface
**// normal, non fluent style, where each method returns Void**
**// so you need to start with the object reference yourself each time**
myCar2 = new Car();
myCar2.setSpeed(100);
myCar2.setColor('blue');
myCar2.setDoors(5);
As #vivinpaliath stated, this is something called chaining.
It works because almost every method in jQuery returns a reference to the original object (or in a few cases, the edited object).
You can chain any built in methods with exception of methods that return specific values.
Examples of such are css("cssProperty"), attr("attribute"), prop("property"), html(), text(), and val()
Here's a good article on jQuery chaining
So you are talking about method chaining.
The content in this link explains the method chaining very well and in brief with appropriate example.
The intrinsic, basic and essential logic behind the method chaining is
The typical way to enable method chaining is to return the current object at the end of every function
I want to create a javascript object that I can call any method on, without having to define them. Ideally i could call it as if it were a function, and it would call one function i've defined with the name of the function called as its argument.
So i would define an object with a callMethod(methodName) method, and when i called
thisObject.doAThing();
It would call thisObject.callMethod("doAThing");
is this possible in javascript?
No, that isn't possible. If a JavaScript object doesn't have a property then you can't treat the undefined value as a method.
In Firefox at least, you can use the magic method __noSuchMethod__ to accomplish your goal:
var o = {}
o.__noSuchMethod__ = function(id, args) { alert(id + args); }
o.foo(2,3) //will alert "foo" and "2,3"
Please note that this is not standard and is under consideration for removal, so it will not be added to V8.
Original Post (sorry, should have asked this question in q comments):
I'm having trouble seeing the point. If callMethod has access to a 'doAThing' method somewhere, why couldn't you just plug that in on instantiation of the object or whenever callMethod's sources had a new method added?
Not trying to badger you. Just trying to see if maybe somewhere in the mad mad mad world of the call/apply/prototype paradigm it's possible to accomodate what you're hoping to achieve some other way.
Edit added after this comment:
I want to create a proxy object that delegates its calls to another
object. – msfeldstein
Okay, prototype may be the answer then as it basically does act as a fallback for methods the object itself doesn't have. Every function has a prototype property that's just a plain vanilla object basically. When functions are used as constructors, methods and properties assigned to the constructor prototype become a fallback for constructor instances when you call properties on them that they don't have. You can add properties to that prototype object and they will effectively become available to instances that have already been created. So I'm thinking something like this in the case of associated objects:
//A js constructor is just a function you intend to invoke with the 'new' keyword
//use of 'this.property' will make that property public in the instance
//var effectively makes it private
//Constructors funcs differ from classes in that they don't auto-handle inheritance down to other constructors. You have to come up with a prototype merging scheme to do that.
function MyFacadeConstructor(){ //expected args are objects to associate
var i = arguments.length; //arguments is a collection of args all funcs have
while(i--){
var thisObj = arguments[i];
associateObjMethods(thisObj);
}
//makes it public method but allows function hoisting internally
this.associateObjMethods = associateObjMethods;
function associateObjMethods(obj){
for(var x in obj){
if(obj[x].constructor.name === 'Function'){ //normalize for <= IE8
MyFacadeConstructor.prototype[x] = obj[x];
//or if we literally want the other method firing in its original context
//MyFacadeConstructor.prototype[x] = function(arg){ obj[x](arg); }
//Not sure how you would pass same number of arguments dynamically
//But I believe it's possible
//A workaround would be to always pass/assume one arg
//and use object literals when multiple are needed
}
}
}
}
function FirstNameAnnouncer(){
this.alertFirst = function(){
alert('Erik');
}
}
var fNamer = new FirstNameAnnouncer();
var newFacade = new MyFacadeConstructor(fNamer);
//newFacade.alertFirst should work now;
newFacade.alertFirst();
//but we can also associate after the fact
function LastNameAnnouncer(){
this.alertLast = function(){ alert('Reppen'); }
}
var lNamer = new LastNameAnnouncer();
newFacade.associateObjMethods(lNamer);
//now newFacade.alertLast should work
newFacade.alertLast();
Now, if you want the context of the calling object to matter, I would recommend an event driven interface, which is something JS is very well suited to. Let me know if there's any aspects of the facade approach you're looking for that I haven't implemented here.
You can use Proxy object to intercept any method call.
function proxifyMethodCalls(obj) {
const handler = {
get(target, prop, receiver) {
return function (...args) {
console.log(`Intercepted '${prop}' with arguments ${JSON.stringify(args)}`);
target.callMethod(prop);
};
}
};
return new Proxy(obj, handler);
}
let obj = {
callMethod: (methodName) => {
console.log(`'callMethod' called with '${methodName}'`);
}
};
obj = proxifyMethodCalls(obj);
obj.doAThing(true);