拓展对象

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 节点
  • 如果新线程已被关闭,则主线程发送的消息将丢失
Last Updated 2024/3/14 09:51:53