2020-12-08

2020-12-11 本文已影响0人二荣xxx

总结

一、闭包

闭包：当一个函数使用作用域外部变量，这个函数就是闭包
例：

let a=1
function fn(x){
  return  x=a+1
}

闭包的用途：

1. 储存变量：保存外部函数的变量，内部函数保留了对外部函数的活动变量的引用，所以变量不会被释放

2. 封装私有变量：函数内部的变量，在外部无法引用，可以通过闭包的特点来访问函数的变量

3. 模仿块级作用域：避免命名冲突和污染全局环境

缺点：容易内存泄露（本身闭包并不会造成内存泄露，真实原因是 JS 引擎的实现有问题）

二、call、apply、bind 的用法

1. call显示传递

function fn(n){
  return console.log(n)
}
fn.call(null,9) //9

1. apply显示传递

function fn(x){
  return console.log(x)
}
fn.apply(null,[2]) //2

3. bind方法绑定this，让this不被改变

fn.bind(x,y,z) 不会执行 fn，而是会返回一个新的函数
新的函数执行时，会调用 fn，调用形式为 fn.call(x, y, z)，其中 x 是 this，y 和z 是其他参数

function fn(p1,p2){
    console.log(this,p1,p2)
}
let f2=fn.bind({'name':'xxx'})
fn(1,2) //Window 1 2
f2(1,2) //{'name':'xxx'} 1 2  this为fn.bind绑定的值

三、HTTP 状态码

状态码是服务端向客户端发送的反映响应结果的标识码

100~199 信息性状态码
100 ：表示已收到请求的第一部分，正在等待其余部分
200~299 请求成功
200 ：响应成功
300~399 重定向（地址A跳转到地址B）
301：URL，永久性转移
302：URL，暂时性转移
304 ：资源未修改
400~499 客户端错误
400 ：语法错误
401 ：当前请求需要用户验证
403 ：禁止访问，服务器拒绝了你的地址请求，没权限访问网站
406：表示无法使用请求的内容特性来响应请求的网页
404：请求的网页不存在（服务器上无法找到请求的资源）
500~599 服务器误
500：服务器遇到错误，无法完成请求（服务器内部错误）
503：服务器目前无法使用（由于超载或停机维护），通常为暂时状态

四、数组去重

let arr=[]
function fn(array){
    for(let i=0;i<array.length;i++){
        if(arr.indexOf(array[i])===-1){
            arr.push(array[i])
        }
    }
return arr
}

function fn(array){
    let mySet = new Set(array)
    let set = Array.from(mySet)
    return set
}

五、事件

事件委托：把一个元素响应事件的函数委托到另一个元素，一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

**阻止默认动作：**preventDefault()
**阻止事件冒泡：**stopPropagation()

六、JS 的继承

原型的继承：每一个实例对象都有一个原型proto指向它构造函数的原型对象（prototype），该原型对象也有一个自己的原型proto，层层向上直到一个对象的原型对象为 null，null没有原型，是原型链的最后一个环节。每一个实例对象也都有其构造函数的所有属性和Object的共有属性。

例：aaa继承了父元素的call方法

function Phone(x,y){
    this.x=x
    this.y=y
}
Phone.prototype.call=function(){
    return console.log('打电话')
}
let aaa=new Phone(1,2)

class继承：

class Animal{
     constructor(color){  //构造方法
         this.color = color
     }
     move(){}
 }
 class Dog extends Animal{ //extends继承的关键字
     constructor(color, name){
         super(color) //调用父类方法
         this.name = name
     }
     say(){}
 }

七、通同源策略

同源：如果两个URL协议、域名、端口号完全一致，这两个URL就是同源
跨域：让一个URL可以访问不同源URL的数据
JSONP 跨域：某些浏览器不兼容CORS，JSONP就是为这些浏览器打造的，原理：将数据写入JS再通过JS拿数据，缺点：读不到状态码，只能发GET请求，不能发POST请求在
CORS 跨域：通过设置允许访问的URL来实现跨域

response.setHeader('Access-Control-Allow-Origin','url') 
//允许被这儿URL访问

八、Promise

Promise 的用途：Promise是一个对象，它代表了一个异步操作的最终完成或者失败，用于解决异步问题，成功和失败的统一方案（避免回调地域，让代码看起来更同步）

创建一个 new Promise

function fn(){
    return new Promise((resolve, reject)=>{
        成功时调用 resolve(data)
        失败时调用 reject(reason)
    })
}

Promise.prototype.then：then()方法返回一个 Promise。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。

const promise1 = fn(){}
promise1.then(success, fail).then(success2, fail2).catch(fail3)

Promise.all：Promise.all([promise1, promise2]) 并行，等待所有 promise 成功。如果都成功了，则 all 对应的 promise 也成功；如果有一个失败了，则 all 对应的 promise 失败。

Promise.race：Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

九、数组排序

let mergeSort=(arr)=>{
    if (arr.length ===1){return arr}else{
        let left=arr.slice(0,Math.floor(arr.length*1/2))
        let right=arr.slice(Math.floor(arr.length*1/2))
        return merge(mergeSort(left),mergeSort(right))
    }
}
let merge = (a, b) =>{
    if (a.length === 0){return b}
    if (b.length === 0){return a}
    if(a[0]>b[0]){return [b[0]].concat(merge(a,b.slice(1)))}
    else{return [a[0]].concat(merge(a.slice(1),b))}
}
mergeSort.call(null,[1,2,3,4,5,5,8,9])