Javascript immediately invoked function patterns
What do you call these patterns? What is the difference between them? When would you use each? Are there any other similar patterns?
(function() {
console.log(this); // window
})();
(function x() {
console.log(this); // window
})();
var y = (function() {
console.log(this); // window
})();
var z = function() {
console.log(this); // window
}();
EDIT: I just found two more seemingly redundant ways to do this by naming the functions in the last two cases...
var a = (function foo() {
console.log(this); // window
})();
var b = function bar() {
console.log(this);
}();
EDIT2: Here is another pattern provided below by @GraceShao which makes the function accessible outside the function scope.
(x = function () {
console.log(this); // window
console.log(x); // function x() {}
})();
console.log(x); // function x() {}
// I played with this as well
// by naming the inside function
// and got the following:
(foo = function bar() {
console.log(this); // window
console.log(foo); // function bar() {}
console.log(bar); // function bar() {}
})();
console.log(foo); // function bar() {}
console.log(bar); // undefined
以下是您的功能，并附有一些评论，描述何时/为什么它们可能有用：
(function() {
// Create a new scope to avoid exposing variables that don't need to be
// This function is executed once immediately
})();
(function fact(i) {
// This named immediately invoked function is a nice way to start off recursion
return i <= 1 ? 1 : i*fact(i - 1);
})(10);
var y = (function() {
// Same as the first one, but the return value of this function is assigned to y
return "y's value";
})();
var z = function() {
// This is the exact same thing as above (except it's assigned to z instead of y, of course).
// The parenthesis in the above example don't do anything since this is already an expression
}();
In this case they are all semantically identical. The ECMAScript specification contains the full production rules, so this is a gross simplification.
Also note that I am ignoring the named function's name ( x ) as the name is not used; it could be referenced within the body but since it is a FunctionExpression (via the grammar production) it would never (in a correct JS implementation) contaminate the containing scope - see the comments.
(function() {
console.log(this); // window
})();
(function x() {
console.log(this); // window
})();
var y = (function() {
console.log(this); // window
})();
var z = function() {
console.log(this); // window
}();
Reduced (the bodies are inconsequential in this case, they all "return undefined"):
(function() {})();
(function x() {})();
var y = (function() {})();
var z = function() {}();
Reduced (in the ECMAScript grammar FunctionExpression is a production rule, but here I use it to mean "an expression that is a function"):
FunctionExpression()
FunctionExpression()
var y = FunctionExpression()
var z = FunctionExpression()
Ignoring the assignment of the result (which would always be undefined ) it can be seen that all forms are the same.
Happy coding.
Self invoking anonymous function. The function body will be invoked immediately.
(function() {
console.log(this); // window
})();
Self invoking function. The function body will be invoked immediately. You can still refer to the function x inside the function body. So when you want to execute something immediately, and then you may want to iterate it, you can just reference to it directly.
(function x() {
console.log(this); // window
console.log(x); // function x() {}
})();
The self invoking anonymous function on the right side will be invoked immediately, and the returned value will be assigned to the y . Usually it has a return value when you use this pattern, otherwise, y will be undefined .
var y = (function() {
console.log(this); // window
})();
IMO, it is same as the third one. The parentheses of the 3rd enclosing the function are just for making the function look like one entire thing. But the functionalities of the both are the same.
var z = function() {
console.log(this); // window
}();
Similar to the 2nd one, but you can reference the x outside the function scope by using:
(x = function () {
console.log(this); // window
console.log(x); // function x() {}
})();
console.log(x); // function x() {}
下一篇: Javascript立即调用函数模式