JS——立即执行函数表达式

引:原文 | 译文


function makeCounter() {
    // i只是makeCounter函数内的局部变量
    var i = 0;

    return function () {
        console.log(++i);
    };
}
// counter和counter2是不同的实例,它们分别拥有自己范围里的i变量
var counter = makeCounter();
counter();    // i:1
counter();    // i:2
counter();    // i:3

var counter2 = makeCounter();
counter2();    // i:1
counter2();    // i:2

console.log(i);    // i is not defined

一种私有变量创建方式,也是闭包的应用之一。

但是,很多时候,我们不需要函数声明,不需要后续的在调用。

var makeCounter = (function() {
    var i = 0;
    return {
        sum: function() {
            i++;
        },
        sayI: function() {
            console.log(i);
        }
    }
})();

makeCounter.sum();
makeCounter.sum();
makeCounter.sum();
makeCounter.sayI();    // 3

看这两个例子:

var fn = function() {console.log(1)};

function() {console.log(2)};               // SyntaxError: Unexpected token (

第二个函数报错了,这是为何?

原文解释:在javascript代码解释时,当遇到function关键字时,会默认把它当做是一个函数声明,而不是函数表达式,如果没有把它显视地表达成函数表达式,就报错了,因为函数声明需要一个函数名,而上面的代码中函数没有函数名。以上代码,也正是在执行到第一个左括号(时报错,因为(前理论上是应该有个函数名的。

简单直接,解析到function关键字,是一个函数声明,而函数声明需要函数名。JS引擎认为它“不完整”,所以报错了。

那么我们加上函数名,并他们都立即执行。

var fn = function() {console.log(1)}();     // 1

function fn2() {console.log(2)}();          // SyntaxError: Unexpected token )

还是报错了,不过这次报错的不是左括号,而是右括号。why?

表达式后面加上()表示该表达式立即执行,在JS引擎逐行解释代码时,匿名函数就已声明好,当到function() {console.log(1)}(),解释器就会默认()前的内容为表达式,而不是语句
实际情况是,第一个函数被识别为了表达式,第二个函数依旧是语句。
而对于第二个函数,后面加括号等价于:

function fn2() {console.log(2)}
()

原文解释:相当于先声明了一个叫foo的函数,之后进行()内的表达式运算,但是()(分组操作符)内的表达式不能为空,所以报错。(也就是执行到右括号时,发现表达式为空,所以报错)

因为()和语句搭配时,()只有一个意义:运算中的优先级(小括号里的先运算)

那么对于第一个函数,根据上面的结论,我们可知,var fn =这一部分,神奇的将后面的函数语句转化为了表达式,使得后面的括号有意义(作为表达式执行)。

所以,如若想使第二个函数后面的括号有意义,那么我们必须将函数语句转化为函数表达式。

( function fn2() {console.log(2)} )();    // 2

并且只要不加;号(表示语句或表达式结束),还可以空行执行。

( 
    function fn2() {console.log(2)} 
)

(

)

当然没什么用。

我们也知道了,立即执行函数表达式为什么有这么多种写法:

// 最常用的两种写法
(function(){ /* code */ }()); // 推荐写法
(function(){ /* code */ })(); // 当然这种也可以

// 括号和JS的一些操作符(如 = && || ,等)可以在函数表达式和函数声明上消除歧义
// 如下代码中,解析器已经知道一个是表达式了,于是也会把另一个默认为表达式
// 但是两者交换则会报错
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

// 如果你不怕代码晦涩难读,也可以选择一元运算符
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

// 你也可以这样
new function(){ /* code */ }
new function(){ /* code */ }() // 带参数
  • 无论何时,给立即执行函数加上括号是个好习惯
    通过以上的介绍,我们大概了解通过()可以使得一个函数表达式立即执行。
    有的时候,我们实际上不需要使用()使之变成一个函数表达式,啥意思?比如下面这行代码,其实不加上()也不会保错:
// 可以不加括号
var i = function(){ console.log(10) }();
// 但是推荐还是加上
var i = ( function(){console.log(10)}() );  

匿名函数表达式+闭包

这个用一个经典例子说明吧:

var nodes = document.querySelectorAll("a");

// alert出的都是3
for (var i=0;i<nodes.length;i++) {
    nodes[i].addEventListener("click",function(e) {
        e.preventDefault();
        alert("i'am link #" + i);
    })
}
//  正常
for (var i=0;i<nodes.length;i++) {
    (function(num) {
        nodes[i].addEventListener("click",function(e) {
            e.preventDefault();
            alert("i'am link #" + num);
        })
    })(i)
}
// 另一种改写:
var fn = function(num) {
    return function(e) {
        e.preventDefault();
        alert("i'am link #" + num);            
    }
};

for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener("click",fn(i),false)
}

// 但是无疑问,立即执行的函数表达式可读性更佳。

匿名函数表达式+递归

对于有函数名的函数表达式可以:

var count = 0;

function foo() {
    console.log(count);
    count++;
    if (count === 10) {
        return;
    }
    foo();
}
foo();

对于没有函数名的函数表达式递归,需要借用arguments.callee

var count = 0;
(function () {
    console.log(count);
    count++;
    if (count === 10) {
        return;
    }
    arguments.callee();
})()

当然ES5后禁止使用callee()方法。

警告:在严格模式下,第5版 ECMAScript (ES5) 禁止使用 arguments.callee()。当一个函数必须调用自身的时候, 避免使用arguments.callee()。 通过要么给函数表达式一个名字,要么使用一个函数声明。
————MDN


匿名函数表达式 or 模块化

原文代码:

// 创建一个立即执行的匿名函数
// 该函数返回一个对象,包含你要暴露的属性
// 如下代码如果不使用立即执行函数,就会多一个属性i
// 如果有了属性i,我们就能调用counter.i改变i的值
// 对我们来说这种不确定的因素越少越好

var counter = (function(){
 var i = 0;

 return {
   get: function(){
     return i;
   },
   set: function( val ){
     i = val;
   },
   increment: function() {
     return ++i;
   }
 };
}());

// counter其实是一个对象

counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5

counter.i; // undefined i并不是counter的属性
i; // ReferenceError: i is not defined (函数内部的是局部变量)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,195评论 0 13
  •   函数表达式是 JavaScript 中的一个既强大有容易令人困惑的特性。定义函数的的方式有两种: 函数声明; ...
    霜天晓阅读 831评论 0 1
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,630评论 0 5
  • 我很久没有时间静下心来去看一本书,抑或一部电影,我匆匆地途径很多地方,它们甚至不曾存在。 但我还是在看...
    萧北笙烟阅读 415评论 3 3
  • 突然意识到一件事,你也想靠写文章吃饭穿衣发家致富吗?太可怕了,写可以,靠这个吃饭别想了,起码很长很长的一段时间内都...
    L勤劳阅读 385评论 4 2