js中匿名函数的N种写法

接下来我将为您详细讲解 “js中匿名函数的N种写法” 的攻略。该攻略将介绍匿名函数的基本写法、立即执行函数、闭包、箭头函数、生成器函数和ES6中的模板字符串等多种写法，下面进行详细说明。

基本写法

匿名函数最基本最常见的写法如下：

(function(){
    //代码块
})();

这其实是一个立即执行函数的写法，将一个匿名函数用小括号括起来，并在最后加上一个小括号来立即执行该函数。这种写法常用来实现一些初始化的操作。

立即执行函数

除了基本写法，立即执行函数常用的写法还有如下几种：

方式一

!function () {
    //代码块
}();

这种写法利用 !、+、-、~、void等运算符来将函数转换成表达式，从而实现立即执行。

方式二

(function f() {
    //代码块
})()

这种写法将匿名函数赋值给一个变量f，这个变量只能在函数内部使用，除了这一点之外，和基本写法是一样的。

方式三

(function () {
    //代码块
}).call(this);

这种写法利用了call方法来改变函数内部 this 的指向，让它指向全局对象。

闭包

闭包是指函数访问了它所在的函数的作用域。闭包有很多应用场景，例如在函数中定义私有变量和方法、模拟块级作用域等。

function counter() {
    var n = 0;
    return {
        count: function() { return ++n; },
        reset: function() { n = 0; }
    };
}
var c = counter();
console.log(c.count()); //1
console.log(c.count()); //2
console.log(c.reset());
console.log(c.count()); //1

这段代码使用了闭包来实现一个计数器，记录了函数调用的次数。

箭头函数

箭头函数是ES6中新加入的函数表达式，它的特点是内部没有this、arguments和super指针，能够自动继承外部函数的this。箭头函数不需要function关键字和return关键字，具体用法如下：

//单个参数时，可以省略小括号
var f1 = x => x * x;

//多个参数时，使用小括号括起来
var f2 = (x, y) => x + y;

//多行代码块时，使用大括号括起来
var f3 = (x, y) => {
    x++;
    y--;
    return x + y;
};

生成器函数

生成器函数是ES6中新加入的语法，可以使用 yield关键字来实现暂停函数执行和恢复函数执行，以及生成一个遍历器对象。生成器函数有点类似于协程，它可以让函数自身来控制执行的顺序，非常灵活。具体用法如下：

function* helloWorldGenerator() {
    yield 'hello';
    yield 'world';
    return 'ending';
}
var hw = helloWorldGenerator();
console.log(hw.next()); //Object{value: "hello", done: false}
console.log(hw.next()); //Object{value: "world", done: false}
console.log(hw.next()); //Object{value: "ending", done: true}
console.log(hw.next()); //Object{value: undefined, done: true}

这段代码实现了一个简单的生成器函数，每次调用 next() 方法，函数会暂停执行，并返回一个遍历器对象。遍历器对象有两个属性，分别是 value 和 done，value 表示当前状态的返回值，done 表示函数是否执行完毕。

ES6中的模板字符串

ES6中新引入的模板字符串可以将字符串与表达式混合在一起，方便实现字符串的拼接和格式化输出。其中关于模板字符串中${}的表达式可以为任意类型，可以是一个函数，也可以是一段任意的 JS 代码。具体用法如下：

var name = 'Tom';
var age = 18;
console.log(`My name is ${name}, and I'm ${age} years old.`);

这段代码使用了模板字符串来输出字符串与变量的拼接。在反引号 `` 中，通过 ${} 来引入变量或者表达式，并且可以任意换行，非常方便。