手写函数

9 天前(已编辑)

手写函数

1.模拟call


Function.prototype.mycall = function(context = window, ...args){
    if(this == Function.prototype){
        return undefined;
    }
    context = context || window;
    const fn = Symbol();
    context[fn] = this;
    const result = context[fn](...args);
    delete context[fn]
    return result
}

2.模拟apply

Function.prototype.myapply = function(context = window, args){
    if(this == Function.prototype){
        return undefined;
    }
    context = context || window;
    const fn = Symbol();
    context[fn] = this;
    if (Array.isArray(args)) {
        result = context[fn](...args);
    }else {
        result = context[fn]();
    }
    delete context[fn]
    return result
}

3.手写防抖

function debounce(handleEvent, time, flag){
    let timeout = null;
    return function(...agrs){
        clearTimeout(timeout)
        if(flag && !timeout){
            handleEvent.apply(this, args)
        }
        timeout = setTimeout(()=>{
            handleEvent.apply(this, args)
        },time)
    }
}

4.手写节流

function throttle(handleEvent, time){
    let timer = null;
    return function(...args){
        if(!timer){
            timer = setTimeout(() => {
                timer = null;
                handleEvent.apply(this, args)
            }, time);
        }
    }
}

5.手写深克隆

function copy(data){
    let obj = data instanceof Array ? [] : {}
    for (const [k,v] of Object.entries(data)) {
        obj[k] = typeof v == "object" ? copy(v) : v;
    }
    return obj
}

6.手写数组去重

const unique = (array)=>{
    let container = {}
    return array.filter((item)=>{
        return container.hasOwnProperty(item) ? false : (container[item] = true);
    })
}

7.手动实现ES5的继承

function People() {
    this.type = 'prople'
  }

People.prototype.eat = function () {
    console.log('吃东西啦');
}

function Man(name) {
    this.name = name;
    this.color = 'black';
}

No.1原型继承

Man.prototype = new People();
let a = new Man()
console.log(a.__proto__)

No.2构造函数继承

function Man(name){
    People.call(this)
}

No.3组合继承

function Man(name){
    People.call(this)
}
Man.prototype = People.prototype

No.4寄生组合继承

function Man(name){
    People.call(this)
}
Man.prototype = Object.create(People.prototype, {
    constructor: {
        value: Man
    }
})

8.手动实现一个instanceof

function myinstanceof(target, origin){
    let proto = target.__proto__
    if(proto){
        if(proto === origin.prototype){
            return true
        }else{
            return myinstanceof(proto, origin)
        }
    }else{
        return false
    }
}

9.手动实现一个Ajax

function myAjax(config){
    let {
        url,
        method = 'get',
        data = {},
        async = true,
        success,
        fail
    } = config

    let xml = new XMLHttpRequest()
    xml.onreadystatechange = function(){
        if(xml.readyState == 4){
            if((xml.status >= 200 && xml.status < 300) && xml.status == 304){
                const response = xml.responseText;
                success(response)
            }else{
                const error = xml.status
                fail(error)
            }
        }
    }
    xml.open(method, url, async)
    xml.send(data)
}

10.基于Promise封装一个Ajax

function promiseAjax(config){
    let {
        url,
        method = 'get',
        data = {},
        async = true,
        success,
        fail
    } = config

    return new Promise((resolve, reject)=>{
        let xml = new XMLHttpRequest();

        xml.open(method, url, async)
        xml.send(data)
        xml.onreadystatechange = function() {
            if(xml.readyState == 4){
                if((xml.status >= 200 && xml.status < 300) && xml.status == 304){
                    const response = xml.responseText
                    resolve(response)
                }else{
                    const error = xml.status
                    reject(error)
                }
            }
        }
        xml.onerror = function(){
            reject(new TypeError("请求出错"))
        }
        xml.timeout = function(){
            reject(new TypeError("请求超时"))
        }

    })
}

11.实现一个单例设计模式

class Unit{
    static getInstance(){
        if(!this.instance){
            this.instance = new Unit()
        }
        return this.instance
    }
}

12.图片懒加载


let imgs = document.getElementsByTagName("img");
let n = 0

lazyload()

//节流函数
function throttle(handleEvent,time){
    let timer
    return function(...args){
        if(timer){
            timer = setTimeout(() => {
                timer = null
                handleEvent.apply(this,args)
            }, time);
        }
    }
}
function lazyload(){
    let seeHight = window.innerHeight
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    for(let i = n; i < imgs.length; i++){
        if(imgs[i].offsetTop < seeHight + scrollTop){
            if(imgs[i].getAttribute('src') == 'loading.gif'){
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
            n = i + 1;
        }
    }
}

window.addEventListener('scroll',throttle())

13.JS实现LRU算法

class LRUCache{
    constructor(capacity){
        this.capacity = capacity;
        this.cache = new Map();
    }

    get(key){
        //如果没有,返回-1
        if(!this.cache.has(key)) return -1;

        const value = this.cache.get(key);
        this.cache.delete(key);
        this.cache.set(key,value)
        return value
    }

    set(key,value){
        if(this.cache.has(key)){
            this.cache.delete(key)
        }else{
            if(this.cache.size == this.capacity){
                const delKey = this.cache.keys().next().value;
                this.cache.delete(delKey)
            }
        }
        this.cache.set(key,value)
    }
}

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...