原生JS

1. 必考：ES6语法知道那些，分别怎么用？

举例（let,const）
fangyinghang.com/es-6-tutori…

2. 必考：Promise,Promise.all,Promise.race分别怎么用？（举例，ES6必考）

用promise来写一个异步的ajax

ajax = (method,url,option) => {
    terurn ne4w Promise((resolve,reject) => {
        const{success,fail} = options
        const requ est = new XMLHttpRequest()
        request.open(method,url)
        request.onreadystatechange = () =>{
            if(request.readyState === 4){
            //成功就调用resolve，失败就调用reject
                if(request.status < 400){
                    resolve.call(null,request.response)
                }else if (request.status >= 400){
                    reject.call(null,request)
                }
            }
        }
        request.send()
    })
}
复制代码

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。

3. 必考：手写函数防抖和函数节流（代码）

节流：

当持续触发事件是，保证一定时间段内只调用一次事件处理函数。（常见的就是在游戏中的：冷却时间）

function fn(){}
var cd = false//是否在冷却状态
button.onclick = function(){
    if(cd){
    //什么也不做
    }else{
        fn()
        cd = true
        var timerId = setTimeout(()=>{
            cd = false
        },3000)
    }
}
复制代码

防抖：

当持续触发事件时，一定时间段内没有再出发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时（带着一起做）

function fn(){}
var timerId = null
button.onclick = function(){
    if(timerId){//来第二单了
        window.clearTimeout(timerId)//第一份先不送
    }
    timerId = setTimeout(()=>{
        fn()//五秒钟后两份一起送
        timerId = null
    },5000)
}
复制代码

4. 必考：手写AJAX

mdn，背背背！

var request = new XMLHttpRequest()
request.open('GET','/XXXX')
request.onreadystatechange = function(){
    if(request.readyState === 4){
        console.log('请求完成')
        if(request.status >= 200){
            console.log('请求成功')
        }else{
        }
    }
}
request.send()

//简易版
var request = new XMLHttpRequest()
request.open('GET','/XXXX')
request.onload = () =>{console.log('请求成功')}
request.send()
复制代码

5. 必考：代码中的this指的是什么？

this的最终指向的是那个调用它的对象

方应杭this

fn()
    this => window/global
    
var x = 1;
function test() {
   console.log(this);
}
test();   
复制代码

obj.fn()
 this => obj
 
var x = {
    user:'pp',
    fn:function(){
        console.log(this.user);
        console.log(this);
    }
}
x.fn();
复制代码

fn.call(xx)
   this => xx
   
   
var a = {
   user:"追梦子",
   fn:function(){
       console.log(this.user); //追梦子
       console.log(this);
   }
}
var b = a.fn;
b.call(a);
复制代码

通过call方法，给第一个参数添加要把b添加到哪个环境中，简单来说，this就会指向那个对象。call方法除了第一个参数以外还可以添加多个参数。

fn.apply(xx)
    this=> xx
    
var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
        console.log(this);
    }
}
var b = a.fn;
b.apply(a);
复制代码

apply和call的方法相似。同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组。注意如果call和apply的第一个参数写的是null，那么this指向的是window对象

fn.bind(xx)
    this => xx
    
var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
        console.log(this);
    }
}
var b = a.fn;
var c = b.bind(a);
c();
复制代码

bind方法返回的是一个修改过后的函数。

new Fn()
    this => 新的对象
    
    
function test() {
　this.x = 1;
}
var obj = new test();
obj.x // 1
复制代码

new关键字可以改变this的指向，将这个this指向对象obj，为什么obj是对象，因为用了new关键字就是创建一个对象实例。

fn = () => {}
    this => 外面的this
    
function foo(){
    setTimeout(() => {
        console.log('id',this.id);
        console.log(this);
    },1000);
}
id='23';
foo();
复制代码

必考：闭包/立即执行函数是什么？

方应杭闭包、立即执行函数

必考：什么是JSONP，什么是CORS，什么是跨域？

搜博客，举例，难

常考：async/await怎么用，如何捕获异常？

mdn，await遇到了异常怎么办，捕获异常try，catch

常考：如何进行深拷贝？

代码。1.递归2.判断类型，不同的类型有不同的方法3.检查循环引用（环），如果某一个对象引用了自己，递归是出不来

常考：如何用正则实现trim()？

代码，

function trim(string){
    return string.replace(/^\s+|\s+$/g/,'')
}
复制代码

常考：不用class如何实现继承？用class又如何实现？

代码，

function Animal(){
    this.a = 1
}
Animal.prototype.move = function(){}//1

function Dog(){
    Animal.apply(this,arguments)
    this.s = 2
}

let f = function(){}//2
f.prototype = Animial.prototype//2
Dog.prototype = new f()//2

Dog.prototype.constructor = Dog//3

Dog.say = function(){}

class Dog extends Animal{
    constructor(){
        super()
    }
}
复制代码

常考：如何实现数组去重

hash

[...new Set(array)]//z这个记下来大致就可以了

WeakMap//支持所有类型
复制代码

放弃：== 相关题目（反着答）
送命题：手写一个 Promise

了解思路

DOM

必考：事件委托

//不考虑在li里面有span
ul.addEventListener('click',function(e){
    if(e.target.tagName.toLowrCase() === 'li'){
        console.log('点击了li')
    }
})

//考虑li里面有span时
function(elemenr,eventType,selector,fn){
    element.addEventListener(eventType,e => {
        let el = e.target
        while (!el.matches(selector)){
            if(element === el){
                el = null
                break
            }
            el = el.parentNode
        }el && fn.call(el,e,el)
    })
    return element
}
复制代码

事件冒泡

用mouse事件写一个可拖拽的div

var deagging = false
var position = null

xxx.addEventLister('mousedown',function(e){
    dragging = true
    position = [e.clientX,e.clientY]
})

document.addEventLister('mousemove',function(e){
    if(dragging === false){return}
    console.log('hi')
    const x =e.clientX
    const y = e.clientY
    const deltaX = e.clientX
    const deltaY = y - position[1]
    const left = parseInt(xxx.style.left || 0)
    const top = parseInt(xxx.style.top || 0)
    xxx.style.left = left +delatX + 'px'
    xxx.style.top = top + deltaY + 'px'
    position = [x,y]
})
document.addEventListener('mouseup',function(e){
    dragging = flase
})
复制代码