4. 现代 javascript class 专题 和 异步专题
class 专题
定义 class
//es5 类的定义 属性定义在 function 上， 方法定义在原型链上
function foobar(){
this.foo_ = 'foo';
this.bar_ = 'bar';
}
foobar.prototype.sayHello = function(){ console.log('hello') }
const fb = new foobar();
fb.sayHello();
// es6 class 语法
class foobar2{
constructor(){
this.foo_ = 'foo';
this.bar_ = 'bar';
}
sayHello(){ console.log('hello') }
}
const fb2 = new foobar2();
fb2.sayHello();
继承
class father {
sayHi(){ console.log('Hi') }
}
class son extends father{
constructor () {
super();
this.me='son'
}
sayHello(){ console.log('hello') }
}
const son1 = new son();
// 调用 father 类的 sayHi 方法时 找自己的原型 son.prototype 是否含有这个 方法
// 通过查看父类的原型判断 是否调用的父类的方法 其中 son.prototype.__proto__=father.prototype
// 通过 类名.hasOwnProperty('方法的名称') 判断是否含有该方法
son1.sayHi();
异步专题
javascript 中的事件循环 (不限制时间)
物理线程的事件循环是有事件限制的
用事件提交器 将 事件 推入事件 队列 然后 通过事件循环 处理到当前 事件时 然后处理 事件处理函数 （回调函数）
Promise 语法糖 使用
把多重的 函数 嵌套请求 写得更简单
链式调用
eg：多次 发起 fetch 请求
window.fetch('//xx.com/1').then(data=>{
window.fetch('//xx.com/2');
}).then(data=>{
window.fetch('//xx.com/3');
}).then(_=>{
console.log('ok');
})
eg: 异步 多次 发起 延时3s 执行函数
function fn (){
console.log(Date.now())
}
function delay3sPromise( fn ){
return new Promise( (resolve, reject) =>{
// resolve 通知 promise 业务代码 成果 并 返回结果
// reject 函数执行失败 并返回错误
setTimeout(_ => {
try{
const ret = fn();
resolve(ret);
}catch(err){
reject(err); //发生了错误
}
}, 3000)
} )
}
// 调用
delay3sPromise(fn).then(_=>{
return delay3sPromise(fn);
}).then(_=>{
return delay3sPromise(fn);
}).catch(err => {
console.log(err);
})
eg: 同步 请求 处理
function delaySame(fn){
return new Promise(_ => {
try{
return Promise.resolve(data)
}catch(err){
return Promise.reject(err)
}
})
}
//调用
dedelaySame(fn).then(data=>{
console.log(data);
}).catch(err){
console.log(err);
}
要点
Promise 一旦创建是 一定会执行的
创建一个 Promise 只能调用一次
Promise的 三个状态： pending (执行代码前)-> fulfilled(执行成功) | rejected(执行失败)
try/catch 不能捕获 Promise 中的 异常(是使用 Promise 后的 catch 方法进行捕获)
eg: new Promise(fn).catch(err=>{ console.log(err) })
链式调用
三种异步
macro task 宏任务
micro task 微任务 (优先级 比 宏任务高)
物理线程
eg: 同步代码先执行 同步代码后的 异步代码先执行 后执行 异步代码
console.log(0)
setTimeout(_=> console.log(1)) // 异步代码 宏任务
new Promise((resolve, reject)=>{ // 该回调为 同步执行
console.log(2)
resolve()
console.log(3)
}).then(_=>{ // 异步代码 微任务
console.log(4)
}).then(_=>{ // 异步代码 微任务
console.log(5)
})
console.log(6)
结果： 0 2 3 6 4 5 1
async 和 await 用法
一种比 Promise 更好用的语法
Promise 语法
eg:
function copyFile(src, dst) {
return readFile(src).then(content => {
return writeFile(dst, content)
})}
copyFile('src', 'dst')
.then(_ => console.log('finished'))
.catch(err => console.error(err))
async 和 await 语法
1. async 函数 只有在 async 函数内使用
2. wait 是 .then 的 语法糖
3. async await 函数内 能使用 try catch
async function copyFile (src, dst) {
const content = await readFile(src) // await 等同于使用 .then
writeFile(dst, content)
}
async function writeFile(dst, content){
console.log(dst, content);
}
async function readFile(src){
console.log(src);
return 'readFile content'
}
async function main () {
try {
await copyFile('src', 'dst')
console.log('finished')
} catch (err) {
console.error(err)
}
}
console.log(1);
main();
console.log2;
结果: 1 src 2 (src readFile content) finishd
// 解析 main 函数 内的 copyFile 会 先解析成 一个 Promise 的 同步代码 然后拼接成 .then 的 异步代码 所以会有 1 后 先输出 src 再输出 2 Promise 代码 在上面
拓展
callback 转 promise
eg:
function ajax(url, callback){ //... } // callback
function ajaxPromise(url){ // promise
return new Promise((resolve, reject)=>{
ajax(url, (err, content)=>{
if(err){ reject(err); return }
resolve(content)
})
})
}
ajaxPromise('xxx.com').then((content)=>{
// 调用成功 处理
}).catch((err)=>{
// 调用失败 处理
})
promise 转 async
sync function main(){
try{
const content = await ajaxPromise('xxx.com');
}catch(err){
console.log(err);
}
}
callback 转 async
