[深入20] 手写函数 javascript前端

导航 [[深入01] 执行上下文](https://juejin.im/post/684490...
[[深入02] 原型链](https://juejin.im/post/684490...
[[深入03] 继承](https://juejin.im/post/684490...
[[深入04] 事件循环](https://juejin.im/post/684490...
[[深入05] 柯里化偏函数函数记忆](https://juejin.im/post/684490...
[[深入06] 隐式转换和运算符](https://juejin.im/post/684490...
[[深入07] 浏览器缓存机制（http缓存机制）](https://juejin.im/post/684490...
[[深入08] 前端安全](https://juejin.im/post/684490...
[[深入09] 深浅拷贝](https://juejin.im/post/684490...
[[深入10] Debounce Throttle](https://juejin.im/post/684490...
[[深入11] 前端路由](https://juejin.im/post/684490...
[[深入12] 前端模块化](https://juejin.im/post/684490...
[[深入13] 观察者模式发布订阅模式双向数据绑定](https://juejin.im/post/684490...
[[深入14] canvas](https://juejin.im/post/684490...
[[深入15] webSocket](https://juejin.im/post/684490...
[[深入16] webpack](https://juejin.im/post/684490...
[[深入17] http 和 https](https://juejin.im/post/684490...
[[深入18] CSS-interview](https://juejin.im/post/684490...
[[深入19] 手写Promise](https://juejin.im/post/684490...
[[深入20] 手写函数](https://juejin.im/post/684490...
[[react] Hooks](https://juejin.im/post/684490...
[[部署01] Nginx](https://juejin.im/post/684490...
[[部署02] Docker 部署vue项目](https://juejin.im/post/684490...
[[部署03] gitlab-CI](https://juejin.im/post/684490...
[[源码-webpack01-前置知识] AST抽象语法树](https://juejin.im/post/684490...
[[源码-webpack02-前置知识] Tapable](https://juejin.im/post/684490...
[[源码-webpack03] 手写webpack - compiler简单编译流程](https://juejin.im/post/684490...
[[源码] Redux React-Redux01](https://juejin.im/post/684490...
[[源码] axios ](https://juejin.im/post/684490...
[[源码] vuex ](https://juejin.im/post/684490...
[[源码-vue01] data响应式和初始化渲染 ](https://juejin.im/post/684490...
[[源码-vue02] computed 响应式 - 初始化，访问，更新过程 ](https://juejin.im/post/684490...
前置知识包装对象

包装对象：Number，String，Boolean三个对象可以把原始类型的值变成对象 -> new 调用
number,string,boolean三个原始类型的值，在一定的条件下也会自动转为对象，也就是原始类型的包装对象
包装对象的目的
- 使得js中的对象涵盖所有的值
- 使得 ( 原始类型 ) 的值，可以方便的 ( 调用某些方法 )
  - 比如 toString valueOf
总结 Nubmer，String，Boolean
- 作为构造函数：通过new命令调用，可以将 ( 原始类型 ) 的值转为 ( 对象 )
- 作为普通函数：可以将 ( 任何类型 ) 的值，转换成 ( 原始类型 ) 的值

构造函数

特点：
- 构造函数首字母通常大写
- 使用 new 命令调用，new命令调用时，可以在函数名后面加小括号，也可以不加
- 构造函数内部的this指向实例对象
- 使用构造函数，属性和方法都生成在实例上的，彼此之间不共享
- new 命令总会返回一个对象，要么是实例对象，要么是return后指定的对象
  - 如果构造函数内 ( return ) 返回的是一个 ( 对象 )，new命令就会返回回这个 ( 对象 )
  - 如果构造函数内 ( return ) 返回的是 ( 原始类型的值 )，new命令就会返回 ( this对象 )
  - ( 普通函数 ) 使用 ( new )命令，会返回一个 ( 空对象 )
new命令的原理
- 创建一个空对象，即是需要返回的那个实例对象
- 将空对象的原型，指向构造函数的prototype属性
- 将构造函数内部的this绑定到这个空对象上
- 执行构造函数

一些单词

immediate: 立即的 shuffle: 洗牌flatten：扁平的 infinity：无穷recursive：递归

call 模拟实现

call方法的作用
- 绑定函数的 this 指向
- 执行该函数 ( 在指定的作用域中执行该函数 )
call的参数
- 应该是一个 ( 对象 )
- 如果传入 ( null，undefined，空 )，则默认传入 ( 全局对象 ) window/global
- 如果参数是 ( 原始值 ) 那么这个原始值会自动转成对应的 ( 包装对象 )，然后传入call方法
- 可以接收多个参数
  - 第一个参数是 this 要绑定的对象
  - 后面的参数是函数调用时需要的参数
call方法的作用应用 ( 重要 )
- call方法的一个应用就是 - 调用对象的原生方法
- 当一个对象调用继承的属性时，如果该对象自身也有一个同名的属性时，将会发生覆盖
- call方法可以把继承的方法的原始定义放在该对象上执行，这样无论该对象是否有同名的属性，都不会受影响
[1] // call方法的应用 // - call方法的一个应用就是 - 调用对象的原生方法 -------var obj = {}; obj.hasOwnProperty('toString') // false，注意toString是继承的方法，空对象自身并没有该方法 // hasOwnProperty 表示是否含有自身属性// 覆盖掉继承的 hasOwnProperty 方法 // 通过在obj自己定义一个方法，这样就会覆盖原型链上的同名方法，并且这样就是自身属性 obj.hasOwnProperty = function () { return true; }; obj.hasOwnProperty('toString') // true，调用时先找自身是否有该方法，而本意是调用原型链上的hasOwnProperty方法 // 这样就造成了结果偏差，可以用call方法解决 // call方法的一个主要应用 - 调用对象的原生方法Object.prototype.hasOwnProperty.call(obj, 'toString') // false上面代码中，hasOwnProperty是obj对象继承的方法，如果这个方法一旦被覆盖，就不会得到正确结果。 - call方法可以解决这个问题 - 调用对象的原生方法 - 它将hasOwnProperty方法的原始定义放到obj对象上执行，这样无论obj上有没有同名方法，都不会影响结果。
call方法的模拟实现 - es5

### call方法的模拟实现 - es5注意点： 1. fn.call() 的参数 - 当为空，null，undefined时，表示传入全局对象window或者global - 当为原始类型的值时，会被转为包装对象再传入fn - 第一个参数是fn中this指向的对象，其他参数将作为调用fn时的参数 2. fn可以有返回值 3. 实现思路 - 在对象上 (添加) 函数 (方法) - 在该对象上(执行)该函数，此时this的指向就是该对象（运行时确定this指向） - 因为fn.call()是可以接收不定个数的参数的，怎么办？ - 可以用arguments对象获取所有参数，这里需要去除第一个参数即this绑定的对象，后面的才是传入fn函数的参数 - 记得注意下 fn 也可以有返回值 - (删除)该函数 4. eval(string) - 将字符串当作语句来执行 - 注意：参数必须是字符串代码： const obj = { name: 'woow_wu7', age: 18 } function fn(address, sex) { return this.name + this.age + sex + address }Function.prototype._call = function(obj) { const context = obj || window // 相当于 context = context ? context : window; // 相当于 const context = obj ? obj : window; // fn.call() 当参数为空，null，undefined时，默认是传入window对象 // 空，null，unfined的布尔值都是falseconst params = [] // 用于收集arguments中出去第一个参数外，剩下的每一个参数for(let i = 1; i < arguments.length; i++) { params.push('arguments[' + i + ']') } // 注意：循环是从 1 开始的，因为arguments[0] 是fn中this绑定的对象，这里是收集传入fn的参数 // arguments是类似数组的对象，具有length属性 // params相当于 ['arguments[1]', 'argument[2]']context.fn = this // --- 第一步：在对象上添加一个函数属性fn（对象中应该叫做方法） // 函数的值是this，即 fn 函数 // this这里指的是 fn 函数，因为this就是函数调用时所在的对象，fn._call()是fn在调用，所以this指向fnconst res = eval('context.fn(' + params + ')') // fn函数可能有返回值 // + 号是存在（重载）的，即可以是（相加）或者（相连） // 当 + 运算子存在对象时，会先将对象转成原始类型的值，即先执行 valueOf -> 对象本身 -> toStirng -> 出object外，都是返回该类型对象的字符串形式 // params数组会被转成 'arguments[1],arguments[2]'这样的形式 // 例如：[1,'2',3,'4'].toString() -> "1,2,3,4"->数组返回数组的字符串形式 // 最终是这样的： const res = eval('context.fn(arguments[1],arguments[2])')Reflect.deleteProperty(context, 'fn') // delete context.fn // 删掉对象上的函数 // 注意：delete context.fn 这样的旧的写法会逐渐被抛弃return res // fn可能有返回值，需要返回结果 }const res = fn._call(obj, 'chongqing', 'man') console.log(res, 'res')

call方法的模拟实现 - es6

### call方法的模拟实现 - es6const obj = { name: 'woow_wu7', age: 18 } function fn(address, sex) { return this.name + this.age + sex + address }Function.prototype._call = function(context) { context = context ? context : window; context.fn = this; const res = context.fn(...[...arguments].slice(1)); Reflect.deleteProperty(context, 'fn') //delete context.fn; return res; } const res = fn._call(obj, 'chongqing', 'man') console.log(res, 'res')

apply模拟实现

const obj = { name: 'wang', }; function fn(name) { return { name: name || this.name } } Function.prototype._apply = function (context, arr) { context = context ? context : window; context.fn = this; let res = null; if (!arr) { //_apply第二个参数不存在，就不给fn传参，直接执行fn res = context.fn() } else { arr instanceof Array ? res = context.fn(...arr) : console.log('第二个参数只能是数组') } delete context.fn; return res; } const result = fn._apply(obj, ['woow-wu']); console.log(result)

bind模拟实现

bind函数的作用
- 返回一个新的函数
- 绑定this的指向
bind函数的参数
- 第一个参数：需要绑定的对象
- 后面的参数：作为函数的参数
注意点：
- 当第一个参数是null，undefined时，相当于讲this绑定到全局对象上( window|global )
- 除去第一个参数外，剩余的参数作为 ( 需要绑定this的函数的全部或者部分参数 )
  - bind时可以只传部分参数
  - 剩余的参数在返回的新函数被调用时传入
- 返回的新函数，可以使用new命令调用，即返回的新函数可以作为 ( 构造函数 )，这种情况下
  - bind时绑定的this失效，因为在构造函数中，this指向的是实例对象
  - 但是传入的参数有效
代码模拟实现

Document - 锐客网

new命令的模拟实现

new命令的作用
- 执行构造函数
- 返回实例对象
构造函数返回值
- return 后跟一个对象，new命令返回这个对象
- return 后跟一个简单数据类型，new命令会不管这个值，返回this对象
继承相关
- 构造函数中的属性和方法，都是直接生成在实例上的，实例之间不共享，造成资源浪费
- 实例能继constructor.prototype上的属性和方法，多个实例可以共享，修改则相互影响
arguments
- 使用argumetns的好处是在参数个数不确定的情况下，获取任意多的参数
手写原理
- 1.新建一个空对象
- 2.将空对象的隐式原型指向构造函数的显示原型
- 3.将构造函数中的this绑定到空对象上
- 4.执行构造函数
- 5.判断返回值，如果构造函数return一个对象，就返回构造函数返回的对象，否则返回空对象即this对象
  
  Document - 锐客网

Debounce 防抖函数

功能：
- 延时执行，如果在延时的时间内多次触发，则从新计时
- 可以获取event事件对象作为参数和传入其他参数
- 第一点击立即触发，而不是延时执行
- 可以取消debounce的执行
Document - 锐客网 Debounce Debounce-cancel

Throttle 节流函数

功能:
- 每隔一段时间，只执行一次
- 即在外层函数添加标志位，根据标志位的情况决定是否进入闭包
基础版 Document - 锐客网 Throttle

时间戳版 Document - 锐客网 Throttle

数组乱序

sort
- 默认会按照字典进行排序，数字会先被转成字符串，在排序
- 改变原数组，没有返回值
- 2021/03/18更正，sort改变原数组，有返回值，返回值就是排序过后的数组即被改变过后的数组
- 参数
  - 可以没有
  - 也可以是一个函数（自定义方式排序就接受函数为参数），参数函数又有两个参数
    - 返回值大于0，表示比较的第一个成员排在第二个成员的后面（a-b>0表示升序）
    - 返回值小于0，表示比较的第一个成员排在第二个成员的前面（a-b<0表示降序）
    - 返回值等于0，位置不变
乱序的应用
- 换一批
- 猜你喜欢
- 中奖方案
方法1 arr.sort(() => Math.random() - .5)const arr = [1, 3, 7, 2, 5, 4, 6] arr.sort(() => Math.random() - .5) // 因为：Math.random() 的值得范围区间是 [0, 1) // 所以：Math.random() - 0.5===> 大于0或小于0的概率都是50% // Math.random()参数参数的返回值： // 函数返回值大于0，表示两个比较的成员，第一个排在第二个的后面 // 函数返回值小于0，表示两个比较的成员，第一个排在第二个的前面 // 函数返回值等于0，表示两个比较的成员，位置不变 // 当小数是0点几时，可以省略前面的0 console.log(arr, 'arr')

---- 方法1存在的问题： 1. 概率不均等 2. 造成概率不均等的原因： - 因为sort()方法底层因为不同浏览器实现方式不一样，v8中 - 当数组长度小于10时，用的是插入排序 - 否则，使用的是插入排序和快速排序的混合排序 - 插入排序就会造成概率不均等 - 因为把无序部分的元素插入到有序部分中时，如果一旦找到了位置，剩下的元素就没有在和缓存的值就行比较了 - 即没有机会比较所有元素，造成概率不均等，就得不到完全随机的结果3. 如何知道sort()排序造成概率不均等呢？可以用下面的方法统计 const countArr = [0, 0, 0, 0, 0] // 用来存放数组arr最后一个位置，各数字出现的次数 for (let i = 0; i < 100000; i++) { const arr = [0, 1, 2, 3, 4] arr.sort(() => Math.random() - .5) // 随机打乱 countArr[arr[4]]++ // arr[4] 的可能值是 0 1 2 3 4 // 如果出现过一个值，就在countArr相对应的位置加1，用来统计各数字出现的次数 } console.log(countArr) // [24977, 6951, 20999, 18784, 28289] // 从结果中可以看出：arr数组的最后一个位置，出现1的概率明显要小很多，即arr[4] = 1的概率明显小很多 // 其他位置上也会得出相应的结果 arr[x] = 1 的概率都比其他数字出现的概率小

---- 直接插入排序复习插入排序 - 思想：将一个数组分成有序部分和无序部分，将无序部分的一个值插入到有序部分，有序部分仍然有序 (联想打牌时插牌) - 原理： - 1. 将数组分成两个部分，左边是有序部分(初始成员个数为1)，右边是无序部分(下标从1开始，有序数组中取了一个) - 2. 从右边的无序部分依次取出一个值，插入到有序部分，直到取完无序部分 - 3. 如何找有序部分的插入位置？ 1. 先缓存需要插入的无序部分的值，用一个变量来缓存 let temp = arr[i] 2. 从有序部分的最后位置找（arr[i-1]），如果arr[i-1] > arr[i] 则该元素往后移动一位 3. 如果有序该位置仍然比需要插入的值大，有序中该位置的值，也后移动一位，直到 j>=0const arr = [1, 4, 3, 2] const insert_sort = (arr) => { for(let i = 1, len = arr.length; i < len; i++) { // 循环数组的无序部分，从1开始，因为假设初始化时有序部分有一个元素 let temp = arr[i] // 缓存需要插入有序部分的这个无序部分的值，因为有序部分可能会往后移动位置，将其覆盖 let j = i - 1 // j = i - 1 表示有序部分的最后一个元素的位置，有序部分从最后的位置依次往前查找需要插入的位置 // 这里采用有序部分从后往前寻找，也可以从前往后找 while(j >= 0 && arr[j] > temp) { // 有序部分循环条件，如果有序的位置的值比无序中的大并且要保证j>=0，就把有序的值往后移动一位 arr[j+1] = arr[j] // 有序该位置值大于temp，则往后移动一位 j-- // 依次往前查找 } arr[j+1] = temp // 循环完后，j+1就是需要插入的位置，因为条件是大于temp，不满足时，j+1就是要插入的位置 } return arr // 最后返回数组 } console.log(insert_sort(arr))

---- 乱序改进版Fisher–Yates1. 使用sort(() =>Math.random() - .5)存在的问题就是不能完全实现全部元素的比较，造成概率不均等 2. 为什么叫 Fisher–Yates 呢？ - 因为这个算法是由 Ronald Fisher 和 Frank Yates 首次提出的。 3.shuffle：是洗牌的意思4.Fisher–Yates的原理： - 首先选取（数组最后一个位置）的元素和（数组长度随机位置）上的元素交换 - 接着选取（数组倒数第二个位置）的元素和（除去最后一个位置剩下的数组位置，即倒数第二到第一个元素）上的元素交换 - 重复以上步骤，直到length >= 15.代码 // 数组乱序 const arr = [1, 2, 3, 4, 5, 6] function shuffle(arr) { let length = arr.length while(length > 1) { const pivot = Math.floor(Math.random() * length--) // 1. 注意这里是先赋值，再减 1，即Math.floor(Math.random() * 6) // (Math.random() * 6的区间[0, 6) // Math.floor(Math.random() * 6) 区间是 [0-5]// 2. 语句以分号结尾，一个分号就表示一个语句结束。所以这里赋值语句后面记得加分号 // 3. ; [arr[pivot], arr[length]] = [arr[length], arr[pivot]]这里条语句前加上分号，因为前面也是语句 // 在小括号开头，或者中括号开头的语句，前面的语句末尾需要加分号，或者加到本条语句前面 //4. const pivot = Math.floor(Math.random() * length--); 这样也行 ; [arr[pivot], arr[length]] = [arr[length], arr[pivot]] // 这里的length是减1之后的length // const temp = arr[length] // arr[length] = arr[pivot] // arr[pivot] = temp } return arr } console.log(shuffle(arr))

数组扁平化

Array.prototype.flat(拉平的层数)
- 参数
  - 整数，表示拉平的层数
  - Infinity：表示任意层数的数组都拉平，都展开成一元数组
- 返回值：
  - 一个新数组，不改变原数组
前置知识
- concat
  - 作用：用于多个数组的合并，将新数组的成员添加到原数组的尾部
  - 返回值：新的数组
  - 不改变原数组
    
    方法1 Array.prototype.flat(Infinity)------- 2021/03/18 更新如下 Array.prototype.flat.call(arr, Infinity)
    
    方法2 递归 - recursiveconst arr = [1, [2, [3, 4, 5, [6]]], 7, 8] function flat(arr) { let result = [] for (let i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) { // 如果每一项还是数组，就递归，最终把数据都收集到result中 result = result.concat(flat(arr[i])) } else { // 递归结束条件 result.push(arr[i]) } } return result } const res = flat(arr) console.log(res, 'res')
toString
如果数组元素都是数值（注意所有的数组中的所有元素都要是数字），可以使用toString()
然而这种方法使用的场景却非常有限，如果数组是 [1, '1', 2, '2'] 的话，这种方法就会产生错误的结果。
【[深入20] 手写函数】const arr = [1, [2, 3, [4, [5]]]]
function flat(arr) {
return arr.toString().split(',').map(item => +item)
// arr.toString()数组的字符串形式，会展平。 => 1,2,3,4,5
// arr.toString().split(',')以，为分隔符，将字符串转成数组 ["1", "2", "3", "4", "5"]
// +item相当于Number(item)
}
const res = flat(arr)
console.log(res)
reduce((累积变量, 当面变量，当前位置index, 原数组), 累计变量的初始值)
参数
- 函数
  - 参数
  - 累积变量prev：如果reduce()没有第二个参数，就是数组的第一个元素
  - 当前变量next：如果reduce()没有第二个参数，就是数组的第二个元素
- 累计变量初始值
  - 累计变量初始值，即赋值给prev，此时next就是数组的第一个成员
const arr = [1, [2, [3, 4, 5, [6]]], 7, 8, 9]
function flat(arr) {
return arr.reduce((prev, next) => {
return prev.concat(Array.isArray(next) ? flat(next) : next)
// 返回拼接后的数组，如果当前变量是数组，recursive执行
}, [])
// 这里指定了初始值是 []
// prev = []
// next = 1，因为prev初始值是空数组，所以next的初始值是 1
// reduce((accumulate, currentValue, index, arr) => {....}, [])
// 第一个参数：是一个函数
// 第一个参数：累积变量，默认是数组的第一个元素
// 第二个参数：当前变量，默认是数组的第二个元素
// 第三个参数：当前位置（当前变量在数组中的位置）
// 第四个参数：原数组
// 第二个参数：累积变量的初始值，注意如果指定了初始值，那么当前变量就从数组的第一个元素开始
}
const res = flat(arr)
console.log(res, 'res')
// [1, 2, 3, 4, 5, 6, 7, 8, 9] "res"
使用 ...展开运算符
let arr = [1, [2, [3, 4]]];
function flat(arr) {
while (arr.some(item => Array.isArray(item))) { // 循环判断是不是数组，是数组就展开
arr = [].concat(...arr); // 每次都扁平一层
}
return arr;
}
console.log(flat(arr))

XMLHttpRequest

如何获取response???
- xhr.response
- xhr.responseText
- xhr.responseXML
- xhr.responseText
  - 在 xhr.responseType = 'text' ， ''，不设置时，xhr实例对象上才有此属性，此时才能调用
- xhr.response
  - 在 xhr.responseType = 'text' ，'' 时，值是 ( '' )
  - 在 xhr.resposneType 是其他值时，值是 ( null )
xhr.responseType
- text
- document
- json
- blob
- arrayBuffer
const xhr = new XMLHttpRequest() // new 命令总是返回一个对象，要么是this对象，要么是return后面跟的对象 // new 调用的是构造函数，说明XMLHttpRequest是一个构造函数
初始化 HTTP 请求参数，比如url,http请求方法等，但并 ( 不发送请求 )
xhr.open() 方法主要供 xhr.send() 方法使用
xhr.open(method, url, async, username, password)
参数
- method：http请求的方法，包括 GET POST HEAD
- url：请求的地址
- async：是否异步
  - true，默认值，异步请求，通常需要调用 onreadystatechange() 方法
  - false，对 send() 方法的调用将阻塞，直到响应完全接收
(2) xhr.send()
发送一个http请求
xhr.send(body)
get请求：get请求的参数可以直接写在 open() 方法中
post请求：post请求的参数写在 send() 方法中
- 注意：
  - body参数的数据类型会影响 requestHeader 中的 Content-Type 的默认值，如何手动指定则会覆盖默认值
  - 如果data是 Document 类型，同时也是HTML Document类型，则content-type默认值为text/html; charset=UTF-8; 否则为application/xml; charset=UTF-8；
  - 如果data是 DOMString 类型，content-type默认值为text/plain; charset=UTF-8；
  - 如果data是 FormData 类型，content-type默认值为multipart/form-data; boundary=[xxx]
  - 如果data是其他类型，则不会设置content-type的默认值
(3) xhr.setRequestHeader()
指定一个http请求的头部，只有在 readState = 1 时才能调用
setRequestHeader可以调用的时机
- 1. 在 readyStaet = 1 时
- 1. 在 open() 方法之后，send() 方法之前
- 1. 其实 1 2 是一个意思
xhr.setRequestHeader('name', 'value')
参数
- name：头部的名称
- value：头部的值
注意
- setRequestHeader() 方法可以 ( 多次调用 ) ，值不是 ( 覆盖override ) 而是 ( 追加append )
- setRequestHeader() 只有在 readyState = 1 时才能调用，即 open() 方法之后，send() 方法之前
(4) xhr.getResponseHeader()
指定http响应头部的值
(5) xhr.abort()
取消当前响应，关闭连接并且结束任何未决的网络活动
xhr.abort()会将 readyState 重置为0
应用：取消请求，在请求耗时太长，响应不再有必要时，调用该方法
abort：是终止的意思
(6) xhr.onreadystatecange()
在 readyState 状态改变时触发
xhr.onreadystatechange() 在 readyState = 3 时，可能多次调用
onreadystatechange 都是小写
readyState 驼峰
readyState状态
UNSENT ------------- xhr对象成功构造，open() 方法未被调用
OPEND ------------- open() 方法被调用，send() 方法未被调用，setRequestHeader() 可以被调用
HEADERS_RECEIVED --- send() 方法已经被调用，响应头和响应状态已经返回
LOADING ------------ 响应体 ( response entity body ) 正在下载中，此状态下通过 xhr.response 可能已经有了响应数据
NODE ------------- 整个数据传输过程结束，不管本次请求是成功还是失败
(7) xhr.onload
请求成功时触发，此时 readyState = 4
注意：重点！！！
- 1.除了在 xhr.onreadystatechange 指定的回调函数的 readyState = 4 时取值
- 2.还可以在 xhr.onload事件中取值
  xhr.onload = function() {
  
  // 请求成功 if (xhr.status === 200 ) { // do successCallback }
  
  }
- 3.判断 xhr.status === 200 是有坑的，因为成功时返回的状态码不只有200，下面的写法更靠谱
  xhr.onload = function () {
  
  //如果请求成功 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { // 304 not modified 资源未被修改协商缓存 // 2开头的状态码，表示请求成功 //do successCallback }
  
  }
(8) xhr.timeout
设置过期时间
问题1：请求的开始时间怎么确定？是 ( xhr.onloadstart ) 事件触发的时候，也就是xhr.send()调用的时候
解析：因为xhr.open()只是创建了链接，当并没有真正传输数据，只有调用xhr.send()时才真正开始传输
问题2：什么时候是请求结束？
解析：( xhr.loadend ) 事件触发时结束
(9) xhr.onprogress 下载进度信息
(10) xhr.upload.onprogress 上传进度信息
xhr.upload.onprogress = function(e) {
if ( e.lengthComputable ) {

const present = e.loaded / e.total * 100;

}
}
XMLHttpRequest请求案例

XMLHttpRequest请求案例---- Document - 锐客网

文章图片

资料 call，apply 模拟实现 https://github.com/mqyqingfen...
bind模拟实现 https://juejin.im/post/684490...
new模拟实现 https://github.com/mqyqingfen...
new 模拟实现
1.https://github.com/mqyqingfen...
2.https://segmentfault.com/a/11...
3.https://segmentfault.com/a/11...
Throttle Debounce 我的掘金 https://juejin.im/post/684490...
数组乱序 https://juejin.im/post/684490...
数组扁平化 https://github.com/mqyqingfen...