一、webWorker
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。大佬的博客
我的项目是用vue-cli搭建的，在项目中不能用相对路径的方式，创建worker对象。
new Worker('./worker.js') // 这样不行
1、npm下载loader
npm install worker-loader
2、改变webpack配置，引入worker-loader。这个步骤具体怎么做可以在网上搜一下，我也不记得了。如果对webpack了解的同学都明白的，就跟配置url-loader等一样。
3、写一个js文件，代表工作线程
onmessage = (ev) => {
const data = ev.data;
......//一系列逻辑处理
postMessage(newData); // 向主线程发送处理后的数据
}
其实在函数前省略了this / self，也可以写成 this.postMessage 或 self.postMessage，前面省略的对象即子线程的全局对象
4、主线程
const worker = new Worker();
worker.postMessage(data); // 向工作线程发送数据
worker.onMessage = (ev) => { // 监听工作线程发送过来的数据
cosnt data = ev.data;
......//直接拿到处理后的数据做一波操作
worker.terminate(); // 关闭子线程
}
简单的使用基本就是这个样子，更多的等以后用到再学习总结吧。
二、函数中的this指向
1、一般函数执行时，其内部this指向全局对象window
2、作为对象的方法被执行，this指向方法的直接调用者
3、箭头函数中的this指向函数定义时所处的作用域
4、call，apply执行的函数中，this指向第一个实参
5、构造函数被执行时，this指向实例化出的对象
网友评论