Javascript立即调用函数模式 [英] Javascript immediately invoked function 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 
}（）; 
  

编辑：我刚刚发现两个看似冗余的方式来做到这一点：命名最后两种情况下的功能...

  var a =（function foo（）{
 console。 log（this）; // window 
}）（）; 
 
 var b = function bar（）{
 console.log（this）; 
}（）; 
  

EDIT2：这是@GraceShao下面提供的另一个模式，功能可以在函数范围之外访问。

 （x = function（）{
 console.log（this）; / / window 
 console.log（x）; // function x（）{} 
}）（）; 
 console.log（x）; //函数x（）{} 
 
 //我玩这个以及
 //通过命名内部函数
 //并得到以下内容：
 
（foo = function bar（）{
 console.log（this）; // window 
 console.log（foo）; //功能栏（）{} 
控制台.log（bar）; // function bar（）{} 
}）（）; 
 console.log（foo）; // function bar（）{} 
 console.log（bar）; // undefined 
  

解决方案

描述何时/为什么它们可能有用：

 （function（）{
 //创建一个新的范围以避免暴露不需要
的变量//这个函数立即执行一次
}）（）; 
 
（函数实际（i）{
 //这个命名的立即调用的函数是一个很好的方式来开始递归
 return i< = 1？1：i * fact （i-1）; 
}）（10）; 
 
 var y =（function（）{
 //与第一个相同，但该函数的返回值分配给y 
返回y的值; 
}）（）; 
 
 var z = function（）{
 //这是与上述完全相同的东西（当然，它被分配给z而不是y）。 
 //上面例子中的括号不会做任何事情，因为这已经是一个表达式
}（）; 
  

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

解决方案

Here are your functions again with some comments describing when/why they might be useful:

(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
}();

这篇关于Javascript立即调用函数模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！