EDIT
Here is an attempt to make my question simpler.
return this.someFunc(); == return { XXX:this.someFunc() };
What do I have to put in for XXX to make this statement true?
I'm trying to create a function that can be chained. Let me write some hypothetical code. (Any syntax errors just ignore, I'm typing this fast and this is just concept code.) Assume that all functions are either defined locally or globally. :)
test = function(){
this.someFunc = function(){
this.retest = function(){
//...code
}
//...code
}
this.someFunc2 = function(){
//...code
}
return this.someFunc();
}
This function allows me to chain: test().retest();
But what I want to do is return more than one item.
test = function(){
this.someFunc = function(){
this.retest = function(){
//...code
}
//...code
}
this.someFunc2 = function(){
//...code
}
return { XXX:this.someFunc(), //What do I put for XXX
next:this };
}
I want to do this to access another function that test() offers: test().next.someFunc2();
So my problem is this:
I still want to be able to chain like this: test().retest();
But I have to do it like this: test().XXX.retest();
In my code, what is the name that I can put instead of XXX to accomplish this? And is this even possible? I have tried 0 and default already. Thanks for the help.
You can make a chainable functions like this:
var test = function(){
var self = {};
console.log('test called')
function someFunc() {
console.log('someFunc')
return self;
}
function someOtherFunc() {
console.log('someOtherFunc')
return self;
}
self.someFunc = someFunc;
self.someOtherFunc = someOtherFunc;
return self;
}
test().someFunc().someOtherFunc();
Hope this helps
function test() {
// when test() is called as a regular function
// it's `this` will be `undefined` (in strict mode) or will refer to a global object
// when test() is called with `new` operator
// it's `this` will be an instance of `test` object
if(!(this instanceof test)) {
// create a new object
return new test();
}
else {
// this is a `new object` creation
console.log('new Test created');
}
}
// declare functions which will be accessible on test object
test.prototype.someFunc = function() {
console.log('someFunc');
return this;
};
test.prototype.someFunc2 = function() {
console.log('someFunc2');
return this;
};
// declare a `chaining` function - will create a new `test` object
test.prototype.test = function() {
return new test(); // new instance will be created
};
With this code you are now able to run the following code
test().someFunc().someFunc2().test().someFunc().someFunc().test().test()
The following string will be written at the console
new Test created
someFunc
someFunc2
new Test created
someFunc
someFunc
new Test created
new Test created
you have a scope problem -- you can't refer to the _NAME "test" in the function, because you don't know, how it's called.
if you do it statically, you just can do:
test = function(){
this.someFunc = function(){ // blaaa
};
//...code
return {
OUTPUT: this.someFunc(), //What do I put for XXX
test: this
};
}
will result into:
test().test().test().test().OUTPUT (or something like this)
Okay, so I think I understand your question, but I'm not sure (and it's super late at night here, so give me some credit on that). I think you want to have behavior like this:
test(); //is ["result1"]
test().retest(); //is ["result1", "result2"]
test().retest().retest(); //is ["result1", "result2", "result3"]
You might want to return objects instead of strings, but it's the same general idea. And the code turns out to be pretty simple:
var test = (function() {
var results = ["result1"],
i = 1;
results.retest = (function() {
results.push("result" + (++i));
return results;
});
return results;
});
test(); //is ["result1"]
test().retest(); //is ["result1", "result2"]
test().retest().retest(); //is ["result1", "result2", "result3"]
Not sure if that's what you're looking for, but maybe it gets you on the right track.
test = function(){
var someFunc = function(){
//...code
}
return {
someFunc:someFunc,
next:this
}
}
EDIT - Updated to reflect your question update, for clarity.
Do this
test = function(){
this.someFunc = function(){
this.retest = function(){
//...code
}
//...code
}
this.someFunc2 = function(){
//...code
}
var ret = this.somefunc();
ret.next = this;
return ret;
}
EDIT: Here's a better, functioning, version
test = function(){
var ret;
var func = function() {
console.log("test func");
}
ret = function(){
func();
return ret;
}
ret.test = ret;
ret.next = ret; // You can define an arbitrary number of members here
ret.XXX = func(); // Like this, and you can still chain it like your question
return ret;
}
Not sure what your intention is, but this would be a chainable Test function:
function Test(){
Test.retest = Test.retest || function(){console.log('retested'); return Test;}
return Test;
}
Test().retest().retest().retest().retest();
/* => result
retested
retested
retested
retested
*/
// and
log(Test() === Test); //=> true
Since your example does not work the way you posted it I suppose you meant following:
test = function(){
this.someFunc = function(){
this.retest = function(){
//...code
}
//...code
}
this.someFunc2 = function(){
//...code
}
return new this.someFunc();
}
Mind the new in the return.
Now, to still be able to chain your functions you have to return this:
return {retest: new this.someFunc().retest, next:this};
Doing so will then allow you to call test().retest();
I hope this helps.
Related
I have the following code.
function Test() {
this.funct_1 = function() {
alert('funct_1');
}
this.funct_2 = function() {
alert('funct_2');
}
return this;}
function getTestObj() {
var testObj;
if (!testObj) {
testObj = new Test();
}
return function() {
return testObj;
}}
What I'm trying to accomplish is the following. I want to have a class Test which is not singleton. Then in some other places in my application I need to have a function which could return the same instance per script execution. I figured that I could use closure for that getTestObj.
However, when I try to use it
getTestObj().funct_1();
I'm getting the following error, saying the funct_1() is not found.
Cannot find function funct_1 in object function () {...}.
Clearly, I'm making some kind of mistake here, but I'm not able to find any solution over the net which could help me. Would appreciate any comments.
NOTE: I'm forced to use ECMA5
testObj is wrapped inside a function
So, either call it
getTestObj()().funct_1(); //notice two ()()
Save the value of getTestObj() in a variable
var singleTon = getTestObj();
var testObj = singleTon();
testObj.funct_1();
Or, simply return testObj (in case singleTon isn't required)
function getTestObj()
{
var testObj;
if (!testObj) {
testObj = new Test();
}
return testObj;
}
And invoke it as
getTestObj().funct_1(); //notice single ()
getTestObj() is returning a function i.e. :
function() {
return testObj;
}
So you have to call it again getTestObj()(), this will return the Test's object and now you can access it's properties.
getTestObj()().funct_1();
OR
You can change your getTestObj function as :
function getTestObj() {
var testObj;
if (!testObj) {
testObj = new Test();
}
return (function() {
return testObj;
}());
}
I'm trying to create a mini jQuery clone that can support method chaining. So far I've came up with this piece of code:
var $ = (function () {
var elements = [];
function methodOne() {
console.log('Method 1');
return this;
}
function methodTwo() {
console.log('Method 2');
return this;
}
return {
methodOne: methodOne,
methodTwo: methodTwo
};
}());
At page load, the $ variable gets populated with the jQuery clone object returned by the IIFE.
My question is, how can I make the $ object to be called directly as a function while still maintaining the method chaining functionality?
Right now, I can use $.methodOne().methodTwo() but I cant use $('some parameter').methodOne().methodTwo() just like jQuery does.
var $ = function (param) {
var elements = [];
console.log(param);
function methodOne() {
console.log('Method 1');
return this;
}
function methodTwo() {
console.log('Method 2');
return this;
}
return {
methodOne: methodOne,
methodTwo: methodTwo
};
};
$('This is a param').methodOne().methodTwo();
Working fiddle. The comments should be more or less self explanatory.
It might look a bit long, but it will let you create new mini jQuery object every time you call it.
var _ = (function () {
var Magic = function(query){
if(window === this)
return new Magic(query);
// reference to itself
var that = this;
//assign pseudo public methods and variables
that.elements = [];
that.methodTwo = methodTwo;
that.methodOne = methodOne;
//fills inner element array with DOM element
_get(query);
function _get(query){
var elem = document.getElementById(query);
that.elements.push(elem);
}
function methodOne() {
console.log('Method 1');
return that;
}
function methodTwo() {
console.log('Method 2', that.elements);
return that;
}
return this;
}
//returns function, which is assigned to a "_" variable
return function(query){
//everytime "_" is called, it will return new instance for object Magic which makes all the work
return new Magic(query);
}
}());
I would like to known if there is a native way of doing this :
Object.prototype.chain = function(f) { return f.call(this) }
function fun1() {
doSomethingWithObject(this)
return this
}
function fun2() {
doSomethingElse(this)
return this
}
someObject
.method1('something')
.method2()
.chain(checkSomething() ? fun1 : fun2)
.method3()
But I do not feel like changing the prototype of Object. Is there a way to do this without modifying the prototype of Objects or the other constructors that I use (and am not the developer of)
Edits :
I feel I do not explain very well, so let' add some details :
What I would like to do is to use some APIs I do not define. someObject is defined like the following, with chainable methods :
var someObject = {
method1: function(val) {
// do something
return this
},
method2: function() {
// do something
return this
},
method3: function() {
// do something
return this
}
}
Now imagine I cannot change this code, because this object is from a library, and so I don't want to. Then, imagine that I would like to chain methods and some custom functions (see my first snippet) for many more different objects. The simplest thing to do is to attach a chain method to Object.prototype.
But I think that it could result in conflicts in the future. I am looking for a way to do the same thing without touching the prototype.
I'm surprised there are no answers to this to be honest.
There are many ways to natively introduce chaining. I like to use the revealing module pattern.
So I create a basic model (Go ahead and chuck this in your chrome of firefox console)
var Dog = function(name) {
var self = this;
this.name = name;
var core = {
getName:function(){
return self.name;
}
};
this.movement = function(){ //this function will be exposed including its returned functions for chaining
console.log(self.name + " is getting restless... ");
var jump = function(){
console.log(self.name + " jumps around ");
return this //returns the movement scope
};
var run = function(){
console.log(self.name + " has decided to run");
return this //returns the movement scope
};
return {
jump:jump,
run:run
};
}
console.log("A Pup has been born, we shall call him... " + name);
return{
movement:self.movement //only .movement is exposed to the outside world
};
}
Now create a new dog using var p = new Dog("doggyName");
now, you can chain functions. Try:
p.movement().jump().run().jump().run();
You should get the console logged text that corresponds with each function.
By returning the scope of this after executing your movement function you expose the additional functions that are returned in that scope (see the comments in the code). These can then be chained onto the end of your current function provided they are in the same scope. This allows you to scope specific parts of your code. For example with this dog, all movement is scoped to self.movement, you could have all eating scoped to self.eat and so on
Read up on the revealing module pattern. Though this is not the only way to do it.
The wrapper is something that will wrap any object to make it compatible with "chaining" and will add another chain method that will allow you to plug external functions and still get the chaining.
Check this example:
function myObj() {
this.state = {
a: 1
};
this.method1 = function () {
console.log("1");
}
this.method2 = function () {
console.log("2");
}
this.method3 = function () {
console.log("3");
}
this.method4 = function () {
console.log(this.state);
}
}
function objectChainWrapper(obj) {
this.chain = function (fn) {
fn.call(obj);
return this;
}
for (var prop in obj) {
if (obj.hasOwnProperty(prop) && typeof obj[prop] == 'function') {
this[prop] = (function (methodName) {
return function () {
obj[methodName].call(obj);
return this;
}
}(prop))
}
}
}
var obj = new myObj();
var wrapper = new objectChainWrapper(obj);
var chainMethod = function(){ console.log('chain') };
var chainMethodState = function(){ console.log(this.state) };
wrapper.method1().method2().chain(chainMethodState).method3().chain(chainMethod).method4();
JSFIDDLE.
To "plug" an unbound function into the object's method chain you can assign it to a property and call that:
function fn() {
document.write('hi ');
return this;
}
someObj = {
meth1: function() {
document.write('meth1 ');
return this;
},
meth2: function() {
document.write('meth2 ');
return this;
}
}
someObj
.meth1()
[someObj._=fn, '_']()
.meth2()
This doesn't look very pretty if you ask me. A more readable option is to add the chain method on the fly, like:
function chainable(obj) {
obj.chain = function(fn) {
return fn.call(this);
}
return obj;
}
chainable(someObj).meth1().chain(fn).meth2()
Specifically, how can I write prototypes that allow chaining, such as the following:
$('myDiv').html('Hello World').fadeIn('slow');
The technique you're describing is called fluent interface, and it involves returning the same kind of object from all chainable functions. That object's prototype contains the function definitions.
The linked article includes example code in various languages, including javascript.
Just return the appropriate stuff from the functions. The basic rule of thumb is take any method that would normaly return nothing and make it return this instead.
function Constructor(){};
Constructor.prototype = {
foo: function(){
console.log('foo');
return this;
},
bar: function(x){
console.log('bar', x);
return this;
}
}
var obj = new Constructor();
obj.foo().bar(17).bar(42).foo();
In that particular situation, each method returns this. So:
// ... this has to be the most impractical class I've ever written, but it is a
// great illustration of the point.
var returner = new function() {
this.returnThis = function(){
console.log("returning");
return this
}
}
var ret2 = returner.returnThis().returnThis().
returnThis().returnThis() // logs "returning" four times.
console.log( ret2 == returner ) // true
Chaining example:
var avatar = function() {
this.turnLeft = function {
// some logic here
return this;
}
this.turnRight = function {
// some logic here
return this;
}
this.pickUpItem = function {
// some logic here
return this;
}
};
var frodo = new avatar();
frodo.turnLeft().turnRight().pickUpItem();
Currently, I create objects in javascript by declaring a construction (regular function) then add methods to the prototype like so
function Test(){
}
Test.prototype.test1 = function(){
var me = this;
}
However, I would like to avoid having to declare var me = this at the top of every function. The following seems to work, but seems like it would be very inefficient:
$(document).ready(function(){
var n = 0;
(function(){
function createTest(){
var me;
function Test(){
this.n = n;
this.testArr = [1, 2, 3, 4];
n++;
}
Test.prototype.test1 = function(){
me.test2();
};
Test.prototype.test2 = function(){
alert(me.n);
$.getJSON('test.php', {}, function(reply)
//want to be able to use 'me' here
me.newField = reply;
});
};
var t = new Test();
me = t;
return t;
}
window['createTest'] = createTest;
})();
var t = createTest();
t.test1();
var t2 = createTest();
t2.test1();
t.test1();
});
This code outputs the expected, but is it actually as inefficient as it looks (the Test object being re-declared every time you call createTest())?
Anyhoo, this would seem a bit hacky... is there a completely different way to do this that is better?
EDIT: The real reason I would like to do this is so that callbacks like the one in test2 will have references to the correct this.
What you can do is bind the current this value to a function and store a copy somewhere. (For the sake of efficiency.)
if (!Function.prototype.bind) {
// Most modern browsers will have this built-in but just in case.
Function.prototype.bind = function (obj) {
var slice = [].slice,
args = slice.call(arguments, 1),
self = this,
nop = function () { },
bound = function () {
return self.apply(this instanceof nop ? this : (obj || {}),
args.concat(slice.call(arguments)));
};
nop.prototype = self.prototype;
bound.prototype = new nop();
return bound;
};
}
function Test(n) {
this.n = n;
this.callback = (function () {
alert(this.n);
}).bind(this)
}
Test.prototype.test1 = function () {
this.test2();
}
Test.prototype.test2 = function () {
doSomething(this.callback);
}
function doSomething(callback) {
callback();
}
var t = new Test(2);
t.test1();
I realize your question was not tagged with jQuery, but you are using it in your example, so my solution also utilizes jQuery.
I sometimes use the $.proxy function to avoid callback context. Look at this simple jsfiddle example. Source below.
function Test(){
this.bind();
}
Test.prototype.bind = function(){
$('input').bind('change', $.proxy(this.change, this));
// you could use $.proxy on anonymous functions also (as in your $.getJSON example)
}
Test.prototype.change = function(event){
// currentField must be set from e.target
// because this is `Test` instance
console.log(this instanceof Test); // true
console.log(event.target == $('input')[0]); // true
this.currentField = event.target; // set new field
};
function createTest(){
return new Test();
}
$(function(){ // ready callback calls test factory
var t1 = createTest();
});
Most of the time, I just declare a local variable that references this, wherever I need a reference to this in a callback:
function Foo() {
}
Foo.prototype.bar = function() {
var that=this;
setTimeout(function() {
that.something="This goes to the right object";
}, 5000);
}
Alternatively, you can use bind() like this:
Function Foo() {
this.bar = this.bar.bind(this);
// ... repeated for each function ...
}
Foo.prototype.bar = function() {
}
What this gives you is that every time you create a new Foo instance, the methods are bound to the current instance, so you can use them as callback functions for setTimeout() et al.