js 进阶知识点总结

原型：prototype、proto和constructor

1. prototype　
2. proto
3. constructor

对象：defineProperty()和defineProperties()

1. defineProperty
2. defineProperties

window.history: pushState、replaceState 和 popstate事件

1. pushState
2. replaceState
3. popstate

window.URL

1. window.URL
2. searchParams
3. toString
4. createObjectURL
5. revokeObjectURL

 Window.Storage

1. localStorage
2. sessionStorage

promise的用法

1. 创建Promise实例
2. then方法
3. 执行顺序
4. Promise与异步
5. ajax和promise的结合使用
6. Promise 方法
7. Promise 原型方法

blob

1. 通过Blob的构造函数创建Blob对象
2. slice方法
3. Blob对象能够添加到表单中 

buffer

fromdata

1. 基本方法
2. 通过XMLHttpRequest发送数据
3. 通过ajax发送数据

Worker

创建 Web Worker 对象
创建 web worker 文件
终止 Web Worker

原型：prototype、proto和constructor

prototype 属性使您有能力向对象添加属性和方法。

function employee(name,job,born)
{
    this.name=name;
    this.job=job;
    this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

employee.prototype.salary=null;
bill.salary=20000;

document.write(bill.salary);

proto是构造函数初始化后产生的对象的一个属性，指向构造函数的prototype

function Car(){}
var car = new Car();
// car.__proto__  =====> Car.prototype

function Car(){}

var p = {
    name: 'Mazda'
}
Car.prototype.name = 'Benz';
var car = new Car();
console.log(car.name); // Benz
car.__proto__ = p;   // 更改了__proto__
console.log(car.name);  // Mazda

constructor 是一种用于创建和初始化class创建的对象的特殊方法

// 使用属性
var test=new Array();

if (test.constructor==Array)
{
    document.write("This is an Array");
}

// 调用
class Polygon {
  constructor() {
    this.name = "Polygon";
  }
}

const poly1 = new Polygon();

console.log(poly1.name);
// expected output: "Polygon"

相关文章： 一张图理解prototype、proto和constructor的三角关系

对象：defineProperty()和defineProperties()

Object.defineProperty()

方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。如果不指定configurable, writable, enumerable ，则这些属性默认值为false，如果不指定value, get, set，则这些属性默认值为undefined。

语法: Object.defineProperty(obj, prop, descriptor)

obj: 需要被操作的目标对象
prop: 目标对象需要定义或修改的属性的名称
descriptor: 将被定义或修改的属性的描述符

var obj = new Object();

Object.defineProperty(obj, 'name', {
    configurable: false,
    writable: true,
    enumerable: true,
    value: '张三'
})

console.log(obj.name)  //张三

Object.defineProperties()

方法直接在一个对象上定义一个或多个新的属性或修改现有属性，并返回该对象。

语法: Object.defineProperties(obj, props)

obj: 将要被添加属性或修改属性的对象
props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

var obj = new Object();
Object.defineProperties(obj, {
    name: {
        value: '张三',
        configurable: false,
        writable: true,
        enumerable: true
    },
    age: {
        value: 18,
        configurable: true
    }
})

console.log(obj.name, obj.age) // 张三, 18

 相关文章：JavaScript中的Object.defineProperty()和defineProperties()

window.history: pushState、replaceState 和 popstate事件

pushState 和 replaceState

可以改变网址(存在跨域限制)而不刷新页面，仅改变网址，网页不会真的跳转，也不会获取到新的内容，本质上网页还停留在原页面，如果设置了一个跨域网址，则会报错。

window.history.pushState(data, title, targetURL);
@状态对象：传给目标路由的信息,可为空
@页面标题：目前所有浏览器都不支持,填空字符串即可
@可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data

window.history.replaceState(data, title, targetURL);
@类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录

popstate事件
popstate事件会在点击后退、前进按钮(或调用history.back()、history.forward()、history.go()方法)时触发。前提是不能真的发生了页面跳转,而是在由history.pushState()或者history.replaceState()形成的历史节点中前进后退
注意：用history.pushState()或者history.replaceState()不会触发popstate事件。

window.onpopstate = function(event) {
  console.log(event.state);
  console.log(window.history.state;);
};
@以上两种log效果相同,皆可获取之前在pushState和replaceState中传入的data

window.URL

window对象的URL为图片/文件创建一个Blob URL

window.URL.createObjectURL(file / blob)

文件或者是blob来自可以是在本地硬盘中通过<input type ='file'>选择的文件，也可以是通过ajax请求后某个不知名的服务器请求到内存的。

searchParams属性

searchParams属性返回一个URLSearchParams对象，这样就可以对url对象中的参数进行遍历或者其他操作

var urlSearchParams = URL.searchParams;

// https://cn.bing.com?id=123
var parsedUrl = new URL('https://cn.bing.com?id=123v');
console.log('parsedUrl' , parsedUrl, parsedUrl.searchParams.get("id")); // 123
console.log('parsedUrl' , parsedUrl.toString(), parsedUrl.searchParams.set("name" , 'alexandra')); // https://cn.bing.com/?id=123v&name=alexandra

toString（）方法

URL的toString（）方法可以将URL转换成URL字符串

let url = new URL('http://www.example.com/démonstration.html')
let test = url.toString() === url.href;
console.log('url.href', url.href, 'url.toString()' , url.toString() , 'test' , test);
// url.href http://www.example.com/d%C3%A9monstration.html url.toString() http://www.example.com/d%C3%A9monstration.html test true

URL对象静态方法createObjectURL（object）

URL.createObjectURL（object）是URL对象的静态方法，用于创建一个DOMString（是UTF-16字符串），其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象，生成的这个url字符串会在当前页面的文档被销毁的时候失效。
参数：用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​

返回值：一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。

URL对象静态方法revokeObjectURL（objectURL）

URL对象的静态方法revokeObjectURL（）用于通过销毁之前通过URL.createObjectURL（object）方法创建的URL。

window.URL.revokeObjectURL(objectURL);

Window Storage

localStorage定义

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除，localStorage 属性是只读的。

var storage=window.localStorage || localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",3);
//第一种方法读取
var a=storage.a;
//第二种方法读取
var b=storage["b"];
//第三种方法读取
var c=storage.getItem("c");
删除指定数据语法：
storage.removeItem("key");
将localStorage的所有内容清除
storage.clear();

json 类型数据的存取

一般我们会将 JSON 存入 localStorage 中，但是在 localStorage 会自动将 json 数据转换成为字符串形式。可以使用 JSON.stringify() 这个方法，来将 JSON 转换成为 JSON 字符串。

var storage=window.localStorage;
var data={
        name:'xiecanyong',
        sex:'man',
        hobby:'program'
 };
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);

localStorage 的优势

•  1、localStorage 拓展了 cookie 的 4K 限制。
•  2、localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。

localStorage 的局限

•  1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
•  2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
•  3、localStorage在浏览器的隐私模式下面是不可读取的。
•  4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
•  5、localStorage不能被爬虫抓取到。

sessionStorage 语法

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据，返回值是 一个 Storage 对象。

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

promise的用法

• 对象的状态不受外界影响 （3种状态）
  • Pending状态（进行中）
  • Fulfilled状态（已成功）
  • Rejected状态（已失败）
• 一旦状态改变就不会再变 （两种状态改变：成功或失败）
  • Pending -> Fulfilled
  • Pending -> Rejected

创建Promise实例

var promise = new Promise(function(resolve, reject){
    // ... some code
    
    if (/* 异步操作成功 */) {
        resolve(value);
    } else {
        reject(error);
    }
})

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。
resolve作用是将Promise对象状态由“未完成”变为“成功”，也就是Pending -> Fulfilled，在异步操作成功时调用，并将异步操作的结果作为参数传递出去；而reject函数则是将Promise对象状态由“未完成”变为“失败”，也就是Pending -> Rejected，在异步操作失败时调用，并将异步操作的结果作为参数传递出去。

 

then方法

Promise实例生成后，可用then方法分别指定两种状态回调参数。then 方法可以接受两个回调函数作为参数：

1. Promise对象状态改为Resolved时调用 （必选）
2. Promise对象状态改为Rejected时调用 （可选）

promise对象必须实现then方法，可以说then是promise的核心，而且then方法必须返回一个promise对象，同一个promise对象可以注册多个then方法，并且回调的执行顺序和他们注册的顺序一致

value值表示的是异步执行成功之后在promise函数中获取的值，不确切的说就是可以获取该函数的私有变量，将promise的值获取过来之后在then中可以实现值的相应应用。

以下示例表示promise的不可逆性和链式调用：

执行顺序

let promise = new Promise(function(resolve, reject){
    console.log("AAA");
    resolve()
});
promise.then(() => console.log("BBB"));
console.log("CCC")

// AAA
// CCC
// BBB

//与定时器混用
let promise = new Promise(function(resolve, reject){
    console.log("1");
    resolve();
});
setTimeout(()=>console.log("2"), 0);
promise.then(() => console.log("3"));
console.log("4");

// 1
// 4
// 3
// 2

在Promise新建后会立即执行，then方法指定的回调函数将在当前脚本所有同步任务执行完后才会执行，Promise属于JavaScript引擎内部任务，而setTimeout则是浏览器API，而引擎内部任务优先级高于浏览器API任务

Promise与异步

Promise是异步的。js异步操作是通过 js的事件循环机制EventLoop 实现的。这里引用以下文章所写的内容，这篇文章很详细的写了 什么叫异步  

当JS解析执行时，会被引擎分为两类任务，同步任务（synchronous） 和 异步任务（asynchronous）。

JS的执行机制是一个主线程和一个任务队列(Eventqueue)：

对于同步任务来说，会被推到执行栈（主线程）按顺序去执行这些任务。
对于异步任务来说，当其可以被执行时，会被放到一个 任务队列（task queue） 里等待JS引擎去执行。

当执行栈中的所有同步任务完成后，JS引擎才会去任务队列里查看是否有任务存在，并将任务放到执行栈中去执行，执行完了又会去任务队列里查看是否有已经可以执行的任务。这种循环检查的机制，就叫做事件循环(Event Loop)。

对于任务队列，其实是有更细的分类。其被分为 微任务（microtask）队列 & 宏任务（macrotask）队列

宏任务: setTimeout、setInterval等，会被放在宏任务（macrotask）队列。

微任务: Promise的then、Mutation Observer等，会被放在微任务（microtask）队列。

Event Loop的执行顺序是：

首先执行执行栈里的任务。
执行栈清空后，检查微任务（microtask）队列，将可执行的微任务全部执行。
取宏任务（macrotask）队列中的第一项执行。
回到第二步。 
注意： 微任务队列每次全执行，宏任务队列每次只取一项执行。

js引擎对程序的执行顺序是：

　　1、先执行同步任务的程序

       2、在执行异步任务里的微任务

       3、所有微任务都执行完了后就执行异步的宏任务，但这里是一个一个宏任务去执行，不是一下子执行完。

var testFn = function(){
    console.log("promise before"); //同步任务
    //异步宏任务
    setTimeout(function(){
        console.log("异步宏任务");
    },300);
    //异步微任务
    getCloth.then(function(fulfilled){
        console.log(fulfilled);
    }).catch(function(rejected){
        console.log(rejected.message);
    });
    console.log("promise after");//同步任务
}
testFn();

 

ajax和promise的结合使用

Promise 方法

Promise.all(iterable)

　　Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

　　需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})

Promise.race(iterable)

　　Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})

Promise.reject(reason)

　　当我们在函数中调用resolve方法时，Promise的状态就变成fulfilled，即操作成功状态。then方法里面有两个参数，onfulfilled(Promise为fulfilled状态时执行) 和onrejected（Promise为rejected状态时执行）。

Promise.resolve(value)

 　　调用reject方法后，Promise状态变为rejected，即操作失败状态，此时执行then方法里面onrejected操作。

var p = new Promise(function (resolve, reject) {
          var flag = false;
          if(flag){
            resolve('这是数据2');
          }else{
            reject('这是数据2');
          }
        });
        p.then(function(data){//状态为fulfilled时执行
            console.log(data);
            console.log('这是成功操作');
        },function(reason){ //状态为rejected时执行
            console.log(reason);
            console.log('这是失败的操作');
        });

分别调用

let  p = Promise.resolve('success');
p.then(function (s){
  console.log(s)
})
// success
let p2=Promise.reject('error');
p2.catch(function(s){
    console.log(s)
})
// error

Promise 原型方法

Promise.prototype.catch(onRejected)，只有当 promise 失败时才会调用，当then 捕捉到 Promise的状态为rejected，就执行catch方法里面的操作
Promise.prototype.then(onFulfilled, onRejected)，Promise 不论成功或失败都会调用 then
Promise.prototype.finally(onFinally)，promise的状态是完成时调用

相关文章：怎么理解JS Promise 

  JS执行——Promise

  理解和使用Promise.all和Promise.race

  ES6之promise(resolve与reject)

 

blob

Blob 对象表示一个不可变、原始数据的类文件对象。在Web领域，Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob，并扩展它用于支持用户系统的本地文件。

构建一个Blob对象通常有三种方式：

1. 通过Blob对象的构造函数来构建。
2. 从已有的Blob对象调用slice接口切出一个新的Blob对象。
3. canvas API toBlob方法，把当前绘制信息转为一个Blob对象。

 

通过Blob的构造函数创建Blob对象

Blob(blobParts[, options])

参数说明：
blobParts： 数组类型， 数组中的每一项连接起来构成Blob对象的数据，数组中的每项元素可以是ArrayBuffer(二进制数据缓冲区), ArrayBufferView,Blob,DOMString。或其他类似对象的混合体。
options： 可选项，字典格式类型，可以指定如下两个属性：

• type，默认值为""，它代表了将会被放入到blob中的数组内容的MIME类型。
• endings， 默认值为"transparent"，用于指定包含行结束符 的字符串如何被写入。 它是以下两个值中的一个： "native"，表示行结束符会被更改为适合宿主操作系统文件系统的换行符； "transparent"，表示会保持blob中保存的结束符不变。

    var data1 = "a";
    var data2 = "b";
    var data3 = "<div style='color:red;'>This is a blob</div>";
    var data4 = { "name": "abc" };

    var blob1 = new Blob([data1]);
    var blob2 = new Blob([data1, data2]);
    var blob3 = new Blob([data3]);
    var blob4 = new Blob([JSON.stringify(data4)]);
    var blob5 = new Blob([data4]);
    var blob6 = new Blob([data3, data4]);

    console.log(blob1);  //输出：Blob {size: 1, type: ""}
    console.log(blob2);  //输出：Blob {size: 2, type: ""}
    console.log(blob3);  //输出：Blob {size: 44, type: ""}
    console.log(blob4);  //输出：Blob {size: 14, type: ""}
    console.log(blob5);  //输出：Blob {size: 15, type: ""}
    console.log(blob6);  //输出：Blob {size: 59, type: ""}

size代表Blob 对象中所包含数据的字节数。这里要注意，使用字符串和普通对象创建Blob时的不同，blob4使用通过JSON.stringify把data4对象转换成json字符串，blob5则直接使用data4创建，两个对象的size分别为14和15。blob4的size等于14很容易理解，因为JSON.stringify(data4)的结果为："{"name":"abc"}"，正好14个字节(不包含最外层的引号)。blob5的size等于15是如何计算而来的呢？实际上，当使用普通对象创建Blob对象时，相当于调用了普通对象的toString()方法得到字符串数据，然后再创建Blob对象。所以，blob5保存的数据是"[object Object]"，是15个字节(不包含最外层的引号)。type 表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

slice方法

Blob对象有一个slice方法，返回一个新的Blob对象，包含了源Blob对象中制定范围内的数据。
参数说明：

start： 可选，代表 Blob 里的下标，表示第一个会被会被拷贝进新的 Blob 的字节的起始位置。如果传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。

end： 可选，代表的是 Blob 的一个下标，这个下标-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。如果你传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。

contentType： 可选，给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。

var data = "abcdef";
var blob1 = new Blob([data]);
var blob2 = blob1.slice(0,3);
    
console.log(blob1);  //输出：Blob {size: 6, type: ""}
console.log(blob2);  //输出：Blob {size: 3, type: ""}

Blob对象能够添加到表单中，作为上传数据使用

const content = '<a id="a"><b id="b">hey!</b></a>';
const blob = new Blob([content], {type: 'text/xml'});

formData.append('webmasterfile', blob);

相关文章：JS中的Blob对象

  　　         [HTML5] Blob对象

buffer

在Node.js中，引入了Buffer类,该类是创建一个专门用来储存二进制数据的缓冲区。

ArrayBuffer 类型化数组，分配的是一段可以存放数据的连续内存区域，类型化数组是JavaScript操作二进制数据的一个接口。最初为了满足JavaScript与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，ArrayBuffer对象（js 中）表示内存中一段原始的二进制数据容器（缓冲区）。

相关文章：ArrayBuffer与类型化数组

  Buffer详解

  聊聊JS的二进制家族：Blob、ArrayBuffer和Buffer

 JS中的Blob和ArrayBuffer

fromdata

FromData是XMLHttpRequest2级对象提供的新接口。我们可以通过FromData对象进行对键值对的来模式表单控件的提交。现在，主流的浏览器在web应用中，频繁使用的一项功能，就是表单数据的序列化，为序列化表单创建与表单的格式相同的数据。这个好处的是可以轻松的通过ajax来提交上传文件。使用FromData的方便之处，不必明确的XHR对象设置请求头部。XHR对象能够识别传入的数据类型是FromData的实例，并配置适当的头部信息。

基本方法

// 创建FromData对象
var data = new FromData();
// 调用FromData对象的append方法,追加数据
data.append('name','Nichloas');
// 获取key为age的第一个值
data.get("age"); 
 // 获取key为age的所有值，返回值为数组类型
data.getAll("age");
//如果key的值不存在会为数据添加一个key为name值为laoliu的数据，存在会修改
data.set("name","laoli");
//判断是否包含key为name的数据，返回布尔值
data.has("name")
//删除key为name的值
data.delete("name");

通过XMLHttpRequest发送数据

var formdata=new FormData(document.getElementById("advForm"));
    var xhr=new XMLHttpRequest();
    xhr.open("post","http://127.0.0.1/adv");
    xhr.send(formdata);
    xhr.onload=function(){
        if(xhr.status==200){
            //...
        }
    }

通过ajax发送数据

$.ajax({
       url: 'b.php',
       type: 'POST',
       cache: false,
       data: formData,
       //dataType: 'json',
       //async: false,
       processData: false,
       contentType: false,
 }).done(function(res) {
       console.log(res)
 }).fail(function(res) {
       console.log(res)
});

注意：

1、当async属性的值为false时是同步的，Ajax请求将整个浏览器锁死，只有ajax请求返回结果后，才执行ajax后面的alert语句；当async属性的值为true时是异步的，即不会等待ajax请求返回的结果，会直接执行ajax后面的alert语句。

2、processData 上传文件时设置为false,数据不做处理；contentType 上传文件时设置为 false,不要设置Content-Type请求头。

3、在PHP中通过print_r($_FILES)打印时，有时候formData里面的参数type会为空，而在前端打印的formData.get('file')里是有type的值的，原因是PHP导入文件(我是导的图片)有大小限制

解决方法：在php.ini中，搜索upload_max_filesize（默认为2M），修改这个值，重启服务器即可。

4、在通过ajax进行数据请求时，console.log(formData)对象为空，而且在append后还是为空，是因为属性不是直接挂载在你这个FormData，可以通过get方法进行获取。

　　参考：https://segmentfault.com/q/1010000010087308

5、在一般情况下使用ajax请求，processData（默认为true）不需要设置，但是当使用fromdata上传文件时，发送的对象不需要转化为对象，所以必须设置为true。

FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

属性

• FileReader.error 表示在读取文件时发生的错误
• FileReader.readyState 表示FileReader状态的数字，取值如下：　　

EMPTY        0         还没有加载任何数据.
LOADING    1         数据正在被加载.
DONE          2         已完成全部的读取请求.

• FilerReader.result 读取到的结果

事件

FileReader.onabort
　　处理abort事件。该事件在读取操作被中断时触发。
FileReader.onerror
　　处理error事件。该事件在读取操作发生错误时触发。
FileReader.onload
　　处理load事件。该事件在读取操作完成时触发。
FileReader.onloadstart
　　处理loadstart事件。该事件在读取操作开始时触发。
FileReader.onloadend
　　处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。
FileReader.onprogress
　　处理progress事件。该事件在读取Blob时触发。

注意：因为 FileReader 继承自EventTarget，所以所有这些事件也可以通过addEventListener方法使用。

方法
FileReader.abort()
　　中止读取操作。在返回时，readyState属性为DONE。
FileReader.readAsArrayBuffer(blob/file) 
　　开始读取指定的 Blob中的内容, 一旦完成，会变成已完成DONE，并触发 loadend 事件，同时 result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
FileReader.readAsBinaryString(blob/file)  
　　已废弃，开始读取指定的Blob中的内容。一旦完成，会变成已完成DONE，并触发 loadend 事件，同时result属性中将包含所读取文件的原始二进制数据。
FileReader.readAsDataURL(blob/file)
　　开始读取指定的Blob中的内容。一旦完成，会变成已完成DONE，并触发 loadend 事件，同时result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
FileReader.readAsText(blob/file)
　　开始读取指定的Blob中的内容。一旦完成，会变成已完成DONE，并触发 loadend 事件，同时result属性中将包含一个字符串以表示所读取的文件内容。

相关文章：FileReader 方法 实现预览图片

Worker

创建 Web Worker 对象

当我们使用这个类的时候，它就会向浏览器申请一个新的线程。这个线程就用来单独执行一个js文件。

if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}

创建 web worker 文件

var i=0;

function timedCount()
{
    i=i+1;
//postMessage(msg) 方法把在新线程执行的结果发送到浏览器的js引擎线程里(它用于向 HTML 页面传回一段消息)
    postMessage(i); 
    setTimeout("timedCount()",500);
}

timedCount();

终止 Web Worker

worker.terminate(); //terminate方法用于关闭worker线程

在新线程中使用postMessage()方法可以向主线程中发送一些数据，主线程中使用worker的onmessage事件来接收这些数据，这样就实现了js的多线程执行和多线程之间数据的传递。

相关文章：js多线程的实现

   H5 worker 系列一 基础知识

   Web Worker 使用教程