Javascript立即调用函数模式

2018-07-04 19:20:57

你称这些模式是什么？他们有什么区别？你什么时候使用每个？还有其他类似的模式吗？

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

在这种情况下，它们在语义上都是相同的。 ECMAScript规范包含完整的生产规则，因此这是一种简化。

另外请注意，由于不使用名称，我忽略了命名函数的名称（ x ）; 它可以在主体内引用，但由于它是一个FunctionExpression（通过语法生成），它永远不会（在一个正确的JS实现中）污染包含范围 - 请参阅评论。

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

减少（在这种情况下，机构是无关紧要的，他们都“返回未定义”）：

(function() {})();

(function x() {})();

var y = (function() {})();

var z = function() {}();

减少（在ECMAScript语法中FunctionExpression是一个生产规则，但在这里我用它来表示“表达式是函数”）：

FunctionExpression()

FunctionExpression()

var y = FunctionExpression()

var z = FunctionExpression()

忽略结果的分配（总是undefined ）可以看出，所有表格都是相同的。

快乐的编码。

自我调用匿名函数。函数体将立即被调用。

(function() {
    console.log(this);  // window
})();

自我调用功能。函数体将立即被调用。您仍然可以在函数体内引用函数x 。所以当你想要立即执行某些东西，然后你可能想迭代它时，你可以直接引用它。

(function x() {
    console.log(this);  // window
    console.log(x);     // function x() {}
})();

右侧的自我调用匿名函数将被立即调用，并且返回的值将被分配给y 。通常当你使用这个模式时它有一个返回值，否则，y将是undefined 。

var y = (function() {
    console.log(this);  // window
})();

海事组织，它与第三个一样。第3个括号包围函数只是为了使函数看起来像一个整体。但两者的功能都是一样的。

var z = function() {
    console.log(this);  // window
}();

与第二个类似，但您可以通过使用以下参数来引用函数范围外的x：

(x = function () {
    console.log(this);  // window
    console.log(x);     // function x() {}
})();
console.log(x);         // function x() {}

链接地址: http://www.djcxy.com/p/96905.html

上一篇: Javascript immediately invoked function patterns

下一篇: !function ($) { }(window.jQuery) what is this code for?