手写源码部分

[zhh10]

手写Call方法

Function.prototype.myCall = function(context,...args){
    context = context === undefined ? window : context;
    let type = typeof context;
    if(type !== 'function' || type !== 'object'){
        context = Object(context)
    }else{
        context = new Object.constructor(context)
    }
    let key = Symbol('key'),result
    context[key] = this 
    result = context[key](...args)
    delete context[key] 
    return result 
}

手写bind方法

Function.prototype.mybind(context,...args){
    let self = this 
    context = context === undefined ? window : context 
    let type = typeof context
    if(type !== 'function' || type !== 'object'){
        context = Object(context)
    }else{
        context = new Object.constructor(context)
    }
    return function anonymous(...innerargs){
        self.call(self,args.concat(innerargs))
    }
}

手写new方法

• 创建一个实例对象，原型指向FUNC.prototype
• 执行代码，this指向实例对象
• 分析结果，如果结果是函数或者对象，直接返回结果

  function _new(func,...args){
  let obj = {} 
  obj.__proto__ = func.prototype 
  const result = func.call(obj,...args)
  if(result !== null && /^(object|function)$/.test(typeof func)){
    return result
  }else{
    return obj
  }
  }

Object.create的基本实现

function create(obj){
    function F(){} 
    F.prototype = obj 
    return new F()
}

instanceof实现

function my_instanceof(L,R){
    var O = R.prototype 
    L = L.__proto__ 
    while(true){
      if(L === null){
          return false 
      }else if(O === L){
          return true
      }
       L = L.__proto__
    }
}

防抖函数debounce

function debounce(fn,apply){
    let timer = null;
    return (...args)=>{
        clearTimeout(timer);
        timer = setTimetout(()=>{
            fn.apply(this,args)
        },delay)
    }
}

节流函数throttle

function throttle(fn,delay = 500){
    let flag = true;
    return (...args)=>{
        if(!flag) return ;
        flag = false;
        setTimeout(()=>{
            fn.applay(this,args)
            flag = true
        },delay)
    }
}

实现lazy-load懒加载

let imgs = document.getElementByTags('img')
let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
let scrollTop = window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop;
for(let i = 0;i<imgs.length;i++){
    let x = clientHeight + scrollTop - imgs[i].offsetTop;
    if(x>0){
        imgs[i].src = imgs[i].getAttribute('data')
    }
}

实现拖拽

window.onload = function(){
    let div = document.getElementById('app')
    div.onmousedown = function(e){
        let e = e || window.event;
        let diffX = e.clientX - div.offsetLeft;
        let diffY = e.clentY - div.offsetTop;
        document.onmouseover = function(e){
            let e = e || window.event;
            let left = e.clentX - diffX;
            let top = e.clientY - diffY;
            if(left < 0){
                left = 0;
            }else if(left > window.innerWidth - div.offsetWidth){
                left = window.innerWidth - div.offsetWidth
            }
            if(top < 0){
                top = 0;
            }esle if(top > window.innerHeight - div.offetHeight){
                top = window.innerHeight - div.offetHeight
            }
            div.style.left = `${left}px`;
            div.style.top = `${top}px`;
        }
        document.onmouseup = function(e){
            document.onmouseonver = null;
            document.onmouseup = null;
        }
    }
}

实现基于Promise的Ajax

function ajax(url,method,fn,type){
    return new Promise((resolve,reject)=>{
        var xhr = new XMLHttpRequest()
        xhr.onreadyState = function(){
            if(xhr.readyState==4){
                if(xhr.status===200){
                    resolve(JSON.parse(xhr.responseText).count);
                }
            }
        };
        xhr.open(method,url+'?'+type,true);
        if(method === 'post'){
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        }
        if(method === 'get'){
            xhr.send(url)
        }else if(method === 'post'){
            xhr.send(type)
        }
    })
}

实现一个浅克隆

function clone(obj){
    let newObj = {};
    for(let key in obj){
        newObj[key] = obj[key]
    }
    return newObj
}

实现一个深克隆deepClone

function deepClone(obj){
    if(obj === null){
        return null
    };
    if(Object.toString.call(obj)=='[object Array]'){
        let newArr = [];
        newArr = obj.slice();
        return newArr
    }
    let newObj = {}
    for(let key in obj){
        if(typeof key !== 'object'){
            newObj[key] = obj[key]
        }else{
            newObj[key] = deepClone(obj[key])
        }
    }
}