前端入门学习笔记（二十五）JavaScript入门（八）函数闭包（以及坑）、generator（函数多个返回值）

函数闭包

在面向对象的程序设计语言里，比如Java和C++，要在对象内部封装一个私有变量，可以用private修饰一个成员变量。

在没有class机制，只有函数的语言里，借助闭包，同样可以封装一个私有变量。我们用JavaScript创建一个计数器：

'use strict';

function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    }
}

它用起来像这样：

var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3

var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13

---

闭包还可以把多参数的函数变成单参数的函数。例如，要计算xy可以用Math.pow(x, y)函数，不过考虑到经常计算x2或x3，我们可以利用闭包创建新的函数pow2和pow3：

'use strict';

function make_pow(n) {
    return function (x) {
        return Math.pow(x, n);
    }
}

// 创建两个新函数:
var pow2 = make_pow(2);
var pow3 = make_pow(3);

console.log(pow2(5)); // 25
console.log(pow3(7)); // 343

---

闭包的坑

返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。否则你可能会出现以下的情况：

function count() {
    var arr = [];
    var i = 1;
    for (; i<=3; i++) {
        //此处的数组为函数数组
        arr.push(function () {
            return i * i;
        });
    }
    i = 5;
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

console.log(f1());//25
console.log(f2());//25
console.log(f3());//25

原本我们所预想的结果是
f1() = 1
f2() = 4
f3() = 9

原因就在于返回的函数引用了变量i，但它并非立刻执行。等到这3个函数返回时，它们所引用的变量i已经变成了5，因此最终结果为25。

若是要立即执行函数，可考虑使用“创建一个匿名函数并立刻执行”的语法：

(function (x) {
    return x * x;
})(3); // 9

上文中的count可修改为如下所示：

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

---

generator(ES6)

generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。

• function：函数的声明
• function*：generator的声明

使用方法如下

function* generateSequence() {
    yield 1;
    yield 2;
    return 3;
}

let generator = generateSequence();
for (let value of generator) {
    console.log(value); // 1, 2
}

发现输出的值只有1,2并没有3，因为3为return，而1、2为yield，可以考虑使用yield返回3（推荐）
也可以采用另一种办法来获取值

let generator = generateSequence();
let one = generator.next();
let two = generator.next();
let three = generator.next();

console.log(one, two, three);
//{ value: 1, done: false } { value: 2, done: false } { value: 3, done: true }

//可以对其进行JSON格式化
console.log(JSON.stringify(one) + JSON.stringify(two) + JSON.stringify(three));
//{"value":1,"done":false}{"value":2,"done":false}{"value":3,"done":true}

若两者混用会如何呢？

function* generateSequence() {
    yield 1;
    yield 2;
    return 3;
}

let generator = generateSequence();

for (let value of generator) {
    console.log(value); // 1, 2
}
let one = generator.next();
let two = generator.next();
let three = generator.next();
console.log(one, two, three);
//{ value: undefined, done: true } { value: undefined, done: true } { value: undefined, done: true }

可发现one、two、three全为undefined