JavaScript中的函数分类和讲解：普通函数（含对象的方法）、generator函数、async函数、async generator函数使用讲解

在ES6之前，JS中主要只有一种函数，ES6之后，加入了其他的一些函数，方便了很多其他场景的处理，尤其是异步场景的处理，用的合适，能大大的简化异步代码的处理。

一、普通函数：

这里所说的普通函数，包含普通函数、函数表达式定义的函数、对象中的方法，箭头函数等。普通函数是比较常见、常用的，这里描述一下涉及的调用方式：

// 1.1， 直接函数调用方式:
Person("迪丽热巴", 18, "直接函数调用");
// 1.2， 方法调用
obj.doSomeThing()

// 2， 构造函数方式
let person = new Person("杨超越", 18, "构造函数方式调用");

// 3， call和applay
Person.call(null, "刘亦菲", 19, "call调用");
Person.apply(null, ["汤唯", 20, "apply调用"]);

// 4， Reflect调用
Reflect.apply(Person, null, ["蔡依林", 20, "Reflect调用"]);

// 5，bind this之后再调用
let fn = Person.bind(null, "杨幂");
fn(18, "bind后调用")

注意：

1，箭头函数不能当构造函数。

2，对象的简写形式的方法不能用作构造函数，会报错。

const obj = {
    // 简写形式的方法，不能用作构造函数
    Cat(){
        this.type = "cat";
    },

    Dog: function(){
        this.name = "dog";
    }
}
new obj.Dog();
new obj.Cat();

// 以下是运行结果
new obj.Cat();
^

TypeError: obj.Cat is not a constructor
    at Object.<anonymous> (/~~~/object-test1.js:71:1)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
    at internal/main/run_main_module.js:17:11

二、generator函数

初接触使用这种函数的时候，感觉理解比较晦涩。看了N遍官方文档，各种练习之后，大致了解了它的使用和运转方式了。关于generator函数的使用场景，单独起一片文章介绍，这里先留个链接坑吧： https://blog.youkuaiyun.com/yangxinxiang84/article/details/106968137

关于该种类型的函数的详细介绍，参考 https://es6.ruanyifeng.com/#docs/generator

这里简要的描述和汇总下：

function testGenerator(){
    console.log(`testGenerator :: enter.`);
    let g = generator()
    for(let rst of g){
        console.log(`testGenerator :: rst = ${rst}`);
    }
}
testGenerator();


// generator函数
function* generator2(){
    let x = yield 5;
    console.log(`generator2 :: x = ${x}`);
    let y = yield 6;
    console.log(`generator2 :: y = ${y}`);
    let z = yield 7;
    console.log(`generator2 :: z = ${z}`);
    return x + y + z;
}
function testGenerator2(){
    console.log(`testGenerator2 :: enter.`);
    let g = generator2();
    let rst1 = g.next().value;
    let rst2 = g.next(100).value; // 将参数替换进入 generator函数 上一个 yield 的返回值 x的地方。
    let rst3 = g.next().value;
    let rst4 = g.next().value;
    console.log(`testGenerator2 :: end, rst1 = ${rst1}, rst2 = ${rst2}, rst3 = ${rst3}, rst4 = ${rst4}`);
}
 testGenerator2();

三、async 函数

async函数本质上是generator函数的语法糖，但是使用更清晰和简单。尤其在处理异步函数的时候，非常方便。

let {log} = require("../../util/logger");
function sleep(ms){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(`sleep end :: ms = ${ms}`)
        },ms || 300);
    })
}
function mockFetch(url, ms){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            // 模拟resove和reject场景
            if(ms % 2 ===0){
                resolve(`mockFetch end :: url = ${url}, ms = ${ms}`);
            }else{
                reject(new Error("mockFetch :: error, not support!!"))
            }
        },ms || 600);
    })
}

async function testNormalAsync(){
    log(`testNormalAsync :: enter.`);
    // 同步的方式写异步，但是如果被reject，要写try catch捕获
    try{
        let rst1 = await sleep(1000); 
        log(`testNormalAsync :: after sleep, rst1 = ${rst1}`);

        let rst2 = await mockFetch("baidu.com", 201);
        log(`testNormalAsync :: after mockFetch, rst2 = ${rst2}`);
    }catch(e){
        log(`testNormalAsync :: error, ${e}.`);
    }
    log(`testNormalAsync :: end.`);
}
testNormalAsync();

// 以下是输出内容，注意看时间点
[12:12:56:182] testNormalAsync :: enter.
[12:12:57:208] testNormalAsync :: after sleep, rst1 = sleep end :: ms = 1000 //1秒后输出的
[12:12:57:414] testNormalAsync :: error, Error: mockFetch :: error, not support!!.// 又过了200毫秒输出的
[12:12:57:414] testNormalAsync :: end.

四、async generator函数

 

参看：https://blog.youkuaiyun.com/yangxinxiang84/article/details/106974312