Let's assume that I define a self-executing function like the following :
({
function1: function(){//...}
function2: function(){//...}
})
How can I call function2 from inside function1 ?
(I tried calling it just like : function2(); and this.function2(); , none worked, both returned error : function2() or this.function2() is not a function)
Actually this is part of the Aura framework, so maybe it is specific to this framework.
There are several things wrong here. First, this is not a self-executing function. This is an object with two functions defined inside it and wrapped in parentheses, which make it invalid. Something like this would be a valid JavaScript object:
object1 = {
function1: function(){
console.log('function1 called!'); // logs the text 'function1 called!' to the console
},
function2: function(){
console.log(this); // logs the details of `object1`
this.function1();
}
};
object1.function2();
Equivalent functionality using an anonymous function would look something like this:
(function (){
console.log('anonymous function called!');
})();
Note the lack of curly brackets surrounding the anonymous function. Unlike the functions in the object, the anonymous function isn't a member of any object. Also note the last set of parentheses at the end, those are what triggers the execution of the anonymous function that has just been defined.
JavaScript functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
Related
I am trying to understand how an anonymous function inside of a callback function is invoked.
For example:
const callbackExample = function(param, callback) {
console.log('This is an example of a callback function');
callback(param);
};
callbackExample('What', function(param) {
console.log(param);
})
My question is how does a anonymous function get invoked? If I substitute the callback to equal the anonymous function below.
Is the callback being substituted for the anonymous function.
Does the callback === function(param) { console.log(param) }
What I mean is I cannot invoke the function like this.
function() { console.log('Not') } ();
There are only three ways to declare and invoke a function.
assign a anonymous function a name: function expression
give a function a name: function declaration
Immediate Invocation function express
My theory is when not using a function express or function declaration for the callback function then Javascript parses the code and detects a anonymous function and uses iife to invoke the anonymous function.
I cannot find anything on the internet nor an api that describes what is happening behind the scenes, so I ask can somebody explain this to me.
IIFE (immeadiately invoked function expression) is just a name coined by the community for this specific construct:
(function() { /*...*/ })()
It's a function expression, that is directly followed by a function call to that function. That's it. You don't have an IIFE in your code.
My question is how does a anonymous function get invoked?
Functions get invoked using a reference to them, their name is just a debugging feature (and it's a reference to the function itself inside the functions body). Functions don't need a name:
let test = function /*irrelevant*/ () { };
let test2 = test;
test(); test2();
If you use a function declaration, the name is not only used as the function name, but also as the name of a variable that references the function:
function named() { }
is barely equal to (let's ignore "hoisting" here):
var named = function named() { }
If you invoke a function using a function expression as one of it's arguments:
function called(reference) { }
called(function irrelevant() { })
then the function expression gets evaluated, a function gets created, and a reference to it gets passed to the called function as an argument, which can then be accessed using the reference variable.
1.
function abc(){
alert("named function");
}
v/s
2.
function(){
alert("Un-Named function");
}
Kindly explain from beginners point.
They work exactly the same. It's only in how you are able to run them that they are different.
So example #1 you could call again at any point with abc();. For example 2, you would either have to pass it as a parameter to another function, or set a variable to store it, like this:
var someFunction = function() {
alert("Un-Named function");
}
Here's how to pass it into another function and run it.
// define it
function iRunOtherFunctions(otherFunction) {
otherFunction.call(this);
}
// run it
iRunOtherFunctions(function() {
alert("I'm inside another function");
});
As David mentions below, you can instantly call it too:
(function() {
alert("Called immediately");
})(); // note the () after the function.
Both can be used to achieve the same but the main difference is the anonymous functions don't need a name. Anonymous functions are functions that are dynamically declared at runtime. They’re called anonymous functions because they aren’t given a name in the same way as normal functions.
Please refer this link
I have a massive javascript file with many function expressions. All of a sudden console gives me the following errors:
In IE
The value of the property 'myFunc' is null or undefined, not a Function object
In Firefox
TypeError: myFunc is not a function
This is how I call the function:
myFunc();
This is the function:
myFunc = function() {
//do stuff
}
This is happening on ALL function expressions. If I change one to a function declaration it works, but then will fail on some other function expression call inside of it. What the heck?
Possibility 1
If you are calling the function expression before it is defined, you will get this error. If you however turn it into a function declaration, the function declaration would get hoisted to the top of the scope, and could be called before or after the actual declaration occurs. So:
functionFoo();
var functionFoo = function() {
};
Will give this error, because you are trying to call the function before it is defined. But:
functionFoo();
function functionFoo() {
}
Will work, because actual function declarations are hoisted to the top of the scope, and can be used anywhere.
Possibility 2
If you are calling the function expression from a different scope that is outside where the function expression is defined, you will get this error. function expressions, like other variables, can only be used within the scope they are defined. So:
$( document ).ready( function() {
var functionFoo = function() {
};
} );
functionFoo();
Will give you an error, because the defining of the function happens in a different scope than the call. But:
$( document ).ready( function() {
var functionFoo = function() {
};
functionFoo();
} );
Will work just fine, because both the defining and the call happen in the same scope.
After adding a callback function to $.Callbacks(), I want to remove it again:
var callbacks = $.Callbacks(),
foo = function() { console.log('Hello world') };
callbacks.add(foo);
callbacks.fire(); // logs 'Hello world'
callbacks.remove(foo);
callbacks.fire(); // nothing to trigger, removed perfectly
So, that works, but now I want to add an anonymous function, like so:
callbacks.add(function(){ console.log('Hello anonymous world') });
callbacks.fire(); // logs 'Hello anonymous world'
Looks fine, but I can't remove the function anymore:
callbacks.remove(function(){ console.log('Hello anonymous world') });
callbacks.remove();
callbacks.fire(); // still logs 'Hello anonymous world'
Is there a way to overcome this?
Per OP Request:
Functions are identified by pointer. You have no pointer to your anonymous function, so you have nothing to pass to remove() to tell it which function to remove. Simply passing a duplicate function doesn't do it, because the duplicate has a different pointer. You need to stick with assigning the function to a variable, then passing that variable to remove().
Reference: http://api.jquery.com/category/callbacks-object/
You could remove it from within the function itself (like at the last line of the function) using arguments.callee (a reference to itself) although arguments.callee is not valid in 'strict mode'.
Consider this:
window.onload = function () {
myObj.init();
};
var myObj = {
init: function () {
console.log("init: Let's call the callMe method...");
//callMe is not defined...
callMe();
//Works fine!
this.callMe();
},
callMe: function () {
console.log('callMe');
}
};
Since the init function gets called this way (myObj.init), I expect this to be myObj in the init function. And if that is the case, why the callMe function fails? How am I supposed to call the callMe function without using the this context in the init body? (Actually, it's too annoying to call the object methods using this over and over again through the functions. So what's the point of having a single object?)
I would like to know how can I fix this so that the callMe method gets called using the first invocation in the code above?
this is never implicit in JavaScript as it is in some other languages. Although there are ways to do it, like this using the with statement:
init: function () {
console.log("init: Let's call the callMe method...");
// Make `this` implicit (SEE BELOW, not recommended)
with (this) {
// Works
callMe();
}
},
...it's generally a bad idea. Douglas Crockford probably wrote one of the better descriptions of why it's a bad idea, which you can find here. Basically, using with makes it nearly impossible to tell what the code's going to do (and slows the code down, if you do anything else in that with statement that doesn't come from the this object).
This isn't the only way that JavaScript's this is not the same as it is in some other languages. In JavaScript, this is defined entirely by how a function is called, not where the function is defined. When you do this.callMe() (or the equivalent this["callMe"](), or of course foo.callMe(), etc.), two things happen: The function reference is retrieved from the property, and the function is called in a special way to set this to be the object that property came from. If you don't call a function through a property that way, the call doesn't set any particular this value and you get the default (which is the global object; window on browsers). It's the act of making the call that sets what this is. I've explored this in depth in a couple of articles on my blog, here and here.
This (no pun) can be made even clearer if you look at JavaScript's call and apply functions, which are available on all function objects. If I do this:
callMe.call({});
...it'll call the callMe function with a blank object ({}) as this.
So basically, just get used to typing this. :-) It's still useful to have properties and methods associated with an object, even without the syntactic convenience (and confusion!) of an implicit this.
You can also use the module pattern, which captures all private variables inside a closure, so you are free to use them without this, as they're in the same scope. You then pick and choose which methods/variables you want to make public:
var myObj = (function () {
var init = function () {
callMe(); // This now works
};
var callMe = function () {
...
};
// Now choose your public methods (they can even be renamed):
return {
init: init, // Same name
callMyName: callMe // Different name
};
}) ();
Now:
myObj.init(); // Works
myObj.callMyName(); // Works
myObj.callMe(); // Error