在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.csdn.net/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.csdn.net/yangxinxiang84/article/details/106974312