函数自实行

一 闭包和作用域

闭包是一个遭到庇护的变量空间,由内嵌函数天生。JavaScript具有函数级的作用域。这不测着定义在函数内部的变量在函数外部不能被接见。JavaScript的作用域又是词法性子的。这意味着函数运转在定义它的作用域中,而不是在挪用它的作用域中。把这两个要素结合起来,就可以通过把变量包裹在匿名函数中而对其加以庇护。(引自《JavaScript设想形式》)

var i = 100;
function makeCounter() {
    var i = 0; // makeCounter的私有变量
    return function() {  console.log(++i);  } //该函数运转的环境是makeCounter的作用域
}
var counter = makeCounter(); // counter即makeCounter的内嵌函数,运转时猎取的i来源于makeCounter作用域中的i
counter(); // 输出: 1 而非 101 –>由于makeCounter返回的内嵌函数能猎取i,所以也称为makeCounter的特权函数。
counter(); // 输出: 2 
i; // 输出: 100 –>申明makeCounter内的i不能被挪用

二 () 挪用函数

(1)function foo() {} 和 var foo = function() {},foo都是这里function(){}的援用,挪用时只须要直接foo()。但假如直接将()放在function(){}背面则会触发语法错误。

function() {..}() // SyntaxError: Unexpected token(

缘由:当解析器碰到function关键字时,默许将其视为一个函数声明(function declaration),而不是一个函数表达式(function expression)。假如不显式通知解析器将其视为一个函数表达式,则会视其为一个函数声明缺乏名字的语法错误。

(2)针对上面语法错误,给函数加个称号并加()实行,会触发别的一个语法错误:

function foo() {….} () ; // SyntaxError: Unexpected token ) 

缘由:()放在表达式背面示意这个表达式是个函数并将要被挪用,而()放在statement(函数声明也是个statement)背面则是用来与前一个statement分开,仅仅是一个分组运算符(用在掌握运算优先级的,即: 1 + 2 * ( 3 + 4 )这里括号的作用 )
修改:()作为分组运算符时,须要包括一个表达式,所以简朴加个表达式 (1)。

function foo() {…}(1) ; //不会报错了,如许的写法实在等同于下面
function foo() {…} // 所以foo在这里并没有被挪用,而仅仅是个声明罢了。
(1)

(3)上面的修改只是处理了语法错误,但实际上并没有到达我们的希冀:让函数马上实行。最经常使用的要领是将其包在()内。由于在JavaScript中,()只能包括表达式而不能是语句statement。

(function() {..}()) 或许 (function() {..})()

(4)其他要领:道理都是令解析器认识到()前是一个表达式

var x = function() { return 1; }();
true && function() { .. } ();
0, function() {..} ()
! function() {..} ()
~ function() {..} ()
+ function() {..} ()
– function() {..} ()

三 应用闭包保留状况
(1)下面例子给元素增加事宜监听,效果每一个a点击后输出的都是elmes数组的长度。
缘由:for实行后的每一个elems的点击事宜函数中绑定的是 j ,当点击时输出的 j 确确实实就是 j 在for运转以后的值。

var elems = document.getElementsByTagName(‘a’);
for (var j = 0; j < elems.length; j++) {
    elems[j].addEventListener(‘click’, function(e) {
        e.preventDefault();
        console.log (j);
    }, false);
}

(2)下面例子应用立实行函数,将 j 锁定。
for实行完后 j 虽然已变成elems数组的长度,然则匿名函数每次马上实行的时刻传入的参数是响应的 j

var elems = document.getElementsByTagName(‘a’);
for (var j = 0; j < elems.length; j++) {
    (function( lockedIndex ) {
        elems[j].addEventListener(‘click’, function(e) {
            e.preventDefault();
            console.log(lockedIndex);
        }, false);
    })(j);
}

四 函数定义内挪用自身

function foo() { foo(); } 
var foo = function() { arguments.callee(); } // arguments.callee 在ECMAScript5中被烧毁了。

五 参考
immediately-invoked-function-expression

    原文作者:zhoushx3
    原文地址: https://segmentfault.com/a/1190000003821502
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞