This question already has answers here:
How can jQuery do method chaining? [duplicate]
(7 answers)
Closed 10 years ago.
Since I learned jQuery I've always wondering how does jQuery execute a function after another just by adding dots . (dont know it real name, sorry for that);
$("#somediv").fadeIn("fast").css("background","blue");
When fade effect finished then the CSS function execute. Its like if you can execute whatever function you want one after another.
How can I do that?
Note: If I named something wrong, please correct me, I just want to learn.
It returns the same type of object, here's a really trivial example that demonstrates the technique:
var Counter = function(){
this.val = 0;
};
Counter.prototype.increment = function(){
++this.val;
return this;
};
Counter.prototype.decrement = function(){
--this.val;
return this;
};
Counter.prototype.log = function(){
console.log(this.val);
return this;
};
var o = new Counter();
o.increment().increment().decrement().log().increment().log();
It is called method chaining, where a method returns the object which it called it.
You can also refer the following post on the subject
How can jQuery do method chaining
how does jquery chaining work?
The short answer is quite straightforward. Each method returns the collection of elements that match the selector passed to it, allowing for that same collection to be passed into the next chained method.
look in source for return this
Related
This question already has answers here:
Javascript: Object Literal reference in own key's function instead of 'this'
(5 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 1 year ago.
Apologies if the terminology is off - javascript isn't my thing.
I have a function:
var input = {
getVal: function () {
return $(this).attr("data-current-val");
},
setVal: function () {
$(this).attr("data-current-val", $(this).val());
},
valHasChanged: function () {
return $(this).val() !== $(this).attr("data-current-val");
}
};
As you can see there is some repetition. Firstly, I repeat the data attribute name several times; secondly, I select a jquery object numerous times.
I've tried to remove the repetition. For instance, in respect of the data attribute, by adding node: "data-current-val" at the top and then calling it with this.node in place of the string. That causes an error, as does trying to define and then use the jquery objectin the same way.
Similarly part of the boolean in valHasChanged $(this).attr("data-current-val"), logically could be replaced by this.getVal but that doesn't seem to work either. Where am I going wrong?!
Any help appreciated.
This question already has answers here:
How do I write an extension method in JavaScript?
(2 answers)
Add method to string class
(6 answers)
Closed 2 years ago.
I am kinda new to js and would appreciate some help to clarify one subject.
Basically i want to call some functions that i write like default javascript are called:
//declaring function
const splitAsExample = text => text.split('|')
//calling function
splitAsExample('Yesterday|Today|Tomorrow')
Instead of calling the function as mentioned above, i would like to know if it's possible to make a function that can be called like:
'Yesterday|Today|Tomorrow'.splitAsExample()
//and || or
'Yesterday|Today|Tomorrow'.splitAsExample
I learned js all by myself and didn't manage to find a specific name for this question to search up in google. :)
If you can clarify this topic for me it would be great, but if you could give me the name to search it up would be even better!
You could add a prototype function to String.
This allows method chaining with a given object.
String.prototype.splitAsExample = function () { return this.split('|'); };
console.log('Yesterday|Today|Tomorrow'.splitAsExample());
This question already has answers here:
Calling function inside object using bracket notation
(2 answers)
Closed 6 years ago.
I rather have a seemingly trivial issue, but am not able to figure out an efficient approach.
I have a list of about 50 functions to be called such as :
globalClient.funcA(...)
globalClient.funcB(...)
globalClient.funcC(...)
My code should ideally dynamically create the name of the function (funcA / funcB/ funcC and then proceed to actually call that function. My approach below does not work (please note that these aren't exactly the actual names of the functions. I'm only giving these arbitrary names for simplicity of understanding):
var functionName = 'func'.concat('A');
globalClient.functionName
The second line is where it errors out. Now JS thinks that functionName itself is the name of the function. What I want it to do is resolve functionName to funcA and then call globalClient.funcA(...) instead.
I've thought about implementing a switch / case for this but I'm sure there is a far simpler appraoch. Any ideas?
You could use the bracket notation as property accessor.
globalClient[functionName]()
You can use the [ ] operator for accessing the properties.
var globalClient = {
funcA: function(){
console.log('funcA is called');
}
}
var functionName = 'func'.concat('A');
globalClient[functionName]();
This question already has answers here:
What does 'var that = this;' mean in JavaScript?
(6 answers)
Closed 9 years ago.
I came across this many times in a new code base that I'm looking at and was wondering is there is any proper reasoning behind it?
You can use var that = this; is order to keep a reference to current this object, when later this will be pointing to something else.
Example (taken from here):
$('#element').click(function(){
// this is a reference to the element clicked on
var that = this;
$('.elements').each(function(){
// this is a reference to the current element in the loop
// that is still a reference to the element clicked on
});
});
Sometimes the meaning of this in JavaScript changes based on the scope. this inside of a constructor means something different than this inside of a function. Here's a good article about it.
If you want access to "this" outside/inside of the scope of a specific function call where what "this" is may have changed. Just one example I can think of.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why does a method's this change when calling a reference to an object's method?
I thought I knew a little JavaScript but I just noticed that if you execute a method from a variable it will change this. I tried to find information about this but most articles talk about call, apply, bind, event handlers/callbacks, etc.
var dog = {
bark: function(){
console.log('woof');
},
speak: function(){
this.bark();
}
};
// Test 1
dog.speak(); //woof
// Test 3
var speak = dog.speak
speak(); //TypeError: Object #<Object> has no method 'bark'
I think you need to set the var as something other than speak. And you need to go:
var speaking_var = dog.speak();
speaking_var();
Fix your typos (you forgot ; after var speak = dog.speak)