拓展对象
yuhuo2021-05-16JavaScriptJavaScript对象
Promise 类
1. 创建对象
let promise = new Promise(function(resolve, reject) {
// 初始状态,进行异步操作
// 进入成功状态,执行成功处理(onFulfilled)
resolve(data);
// 进入失败状态,执行失败处理(onRejected)
reject(data);
});
2. 静态方法
静态方法 | 描述 |
---|---|
reject(obj) | 创建一个失败状态的 promise 实例 |
resolve(obj) | 创建一个成功状态的 promise 实例 参数如果是 promise 实例,则直接返回该参数 |
all([promise1, promise2...]) | all 批量处理 |
race([promise1, promise2...]) | race 批量处理 |
allSettled([promise1, promise2...]) | allSettled 批量处理 |
3. 原型方法
原型方法 | 描述 |
---|---|
then(onFulfilled[, onRejected]) | 成功和失败处理 |
catch(onRejected) | 失败处理 |
链式处理
promise.then(function(res){
// 成功处理
return new Promise(function(){...});
return Promise.reject('xx');
return Promise.resolve('xx');
// 等同 return Promise.resolve('xx');
return "xx";
// 无返回值等同 return Promise.resolve();
}, function(err) {
// 失败处理
// 成功处理返回的实例是失败状态时,
// 是不会进入同个then的失败处理的,直接进入后续的失败处理
}).catch(function(err) {
// 失败处理
// 失败处理后,也会根据返回值继续执行后续的then或catch
}).then(function(){
});
批量处理
Promise.all([p1, p2, p3]).then(function(res){
// 所有实例都进入成功状态时,执行成功处理
// res 是所有实例的返回值组成的数组
}).catch(function(err) {
// 当某个实例率先出现失败状态时,执行失败处理
// 其他实例的状态则不再处理
});
Promise.race([p1, p2, p3]).then(function(res){
// 当某个实例的状态率先改变时,执行其成功或失败处理
// 其他实例的状态则不再处理
}).catch(function(err) {
});
Generator 函数
// 定义 Generator 函数
function* gen() {
console.log("one");
try {
yield '1'
} catch (error) {
console.log("yield1异常")
}
console.log("two");
let three = yield '2';
// 遍历返回
yield* ["a","b","c","d"];
console.log(three + " three");
return '你好';
}
// 返回遍历器,此时函数未开始执行
var g = gen();
// next() 分段执行(开始 - yield1 - yield2 - 结束)
var result = g.next();
// 返回值格式
{
value: '1', // yield 或 return 的返回值
done: false, // 函数是否执行结束
}
// 在函数体外抛异常,在函数体内捕获
g.throw("异常");
// 传递参数给 yield
// 注意:第一次使用 next 方法时,携带的参数无效
g.next("hello");
// 使用 for...of 自动遍历 Generator 函数,代替next()
for(g of gen()) {
// g 是所有 yield 的返回值,不包括 return
}
// 使用return直接结束,返回 {value: return参数, done: true}
g.return("参数");
// 作为对象属性定义
let obj = {
* gen1() { },
gen2: function*() { }
};
async/await
本质上是 Promise + Generator 的升级版
async function asyncFun() {
try {
// 当实例进入失败状态,又没有 try...catch 时,则直接结束当前方法,返回该实例
let res1 = await new Promise(function(resolve, reject) {
resolve("成功1");
});
let res2 = await new Promise(function(resolve, reject) {
resolve("成功2");
});
} catch (err) {
// 在内部捕捉 await 的 prmoise 实例的失败状态
}
// 等同 return Promise.resolve('xx');
return "xx";
// 无返回值等同 return Promise.resolve();
}
asyncFun().then(function(res){
// return 的 promise 实例的成功处理
}).catch(function(err) {
// 在外部捕捉 await 或 return 的 prmoise 实例的失败状态
});
Proxy 类
1. 创建对象
// 目标对象
var target= { name: "Tom" }
// 处理方法
var handler = {
// Object.getPrototypeOf 方法的捕捉器
getPrototypeOf(target) {},
// Object.setPrototypeOf 方法的捕捉器
setPrototypeOf()(target, prototype) {},
// Object.isExtensible 方法的捕捉器
isExtensible(target) {},
// Object.preventExtensions 方法的捕捉器
preventExtensions(target) {},
// Object.getOwnPropertyDescriptor 方法的捕捉器
getOwnPropertyDescriptor(target) {},
// Object.defineProperty 方法的捕捉器
defineProperty(target, key, descriptor) {},
// Object.getOwnPropertyNames 和 Object.getOwnPropertySymbols 方法的捕捉器
ownKeys() {target},
// delete 操作符的捕捉器
deleteProperty(target, key) {},
// in 操作符的捕捉器
has(target, key) {},
// new 操作符的捕捉器
construct(target, args) {},
// 函数调用操作的捕捉器
apply(target, thisArg, argArray){},
// 属性读取操作的捕捉器
get(target, key, proxy) {
return target[key];
},
// 属性设置操作的捕捉器
set(target, key, value, proxy) {
target[key] = value;
},
}
// 创建代理对象,该对象与目标对象是同类型,不存在 Proxy 对象
var proxy = new Proxy(target, handler);
2. 静态方法
静态方法 | 描述 |
---|---|
revocable(target: T, handler: ProxyHandler): { proxy: T; revoke: () => void; } | 创建并返回一个可撤销的代理对象 |
Worker 类
继承了 EventTarget 类。
1. 创建对象
<script id="worker" type="javascript/worker">
console.log("新线程");
</script>
<script>
// 创建线程对象,并在新线程运行js
// new Worker(url: string | URL, options?: WorkerOptions)
// 外部worker:使用外部js(必须与当前页面同源)
var worker = new Worker("./worker.js", {
name: "名称", // 线程名称
type: "classic", // 类型:classic(默认),module
credentials: "omit", // 凭证(不知干嘛用的):omit,same-origin,include
});
// 行内workder:使用当前页面js
var codeStr = document.getElementById("worker").textContent;
var url = URL.createObjectURL(new Blob([codeStr]));
var worker = new Worker(url);
</script>
2. 原型属性
原型属性 | 描述 |
---|---|
onmessage | 接收消息事件回调 |
onerror | 错误事件回调 |
onmessageerror | 消息的数据无法序列化错误事件回调 |
3. 原型方法
原型方法 | 描述 |
---|---|
postMessage(message: any, transfer: Transferable[]): void | 给新线程发送消息 |
terminate(): void | 关闭新线程 |
// 发送消息传数据时默认是拷贝
// 当传大文件时需要转移,转移后主线程不能再使用该对象
var buffer = new ArrayBuffer(1);
worker.postMessage(buffer, [buffer]);
3. 在webpack中使用
// (1) 安装worker-loader插件到devDependencies
// (2) 创建对象
var workerCode = require("worker!./worker.js"); // 外部worker
var workerCode = require("worker?inline!./worker.js"); // 行内worker
var worker = new workerCode(jsUrl);
// (3) 在新线程中引用其他脚本
import xx from "./xx.js";
DedicatedWorkerGlobalScope 类
继承了 EventTarget 类。
对象作为新线程的全局上下文,通过 self 获取。大部分属性方法同 window 对象,以下列出不一样的属性方法。
1. 原型属性
原型属性 | 描述 |
---|---|
name | 线程名称,在主线程创建 Worker 对象时定义 |
onmessage | 接收消息事件回调 |
onerror | 错误事件回调 |
onmessageerror | 消息的数据无法序列化错误事件回调 |
3. 原型属性
原型属性 | 描述 |
---|---|
postMessage(message: any, transfer: Transferable[]): void | 给主线程发送消息 |
close(): void | 关闭当前线程 |
importScripts(...url: string[]): void | 加载其他 js |
注意
- 新线程中无法使用 document,window,alert,confirm,prompt 等对象
- 新线程中无法访问 DOM 节点
- 如果新线程已被关闭,则主线程发送的消息将丢失