前端 P5 最基本应该掌握的代码实现

前景

疫情无情人有情,在去年经历互联网一系列的风波以后，我相信你们有不少的小伙伴想在今年金三银四的面试季中为本身的将来找一个好一点的公司。那么今天咱们来说解一下身为 P5 工程师须要知道的一些原理及其如何亲自手写出它的实现过程，有可能咱们平常开发业务的时候用不上这些本身写的方法，可是咱们咱们对原理一无所知，那么在面试的时候一旦被深挖那么可能离本身心念的公司就会又远一步。

模式 call

• 第一个参数为 null或者 undefined 时，this 指向全局对象 window，值为原始值的指向改原始值的自动包装对象，如 String、number、boolean
• 为了不函数名与上下问(context)的属性发生冲突，使用 Symbol 类型做为惟一值
• 将函数做为传入的上下文(context)属性执行
• 函数执行完后删除改属性
• 返回执行结果

Function.prototype.myCall = function(context,...args){
    context = (context ?? window) || new Object(context);
    const key = Symbol();
    context[key] = this;
    const result = context[key](...args);
    delete context[key];
    return result;
}

模式 apply

• 前部分与call同样
• 第二个参数能够不传，但类型必须为数组或者类数组

Function.prototype.myApply = function(context) {
    context =  (context ?? window) || new Object(context)
    const key = Symbol()
    const args = arguments[1]
    context[key] = this
    let result
    if(args) {
        result = context[key](...args)
    } else {
        result = context[key]
    }
    delete context[key]
    return result
}

模式 bind

• 使用 call / apply 指定 this
• 返回一个绑定函数
• 当返回的绑定函数做为构造函数被new调用，绑定的上下文指向实例对象
• 设置绑定函数的prototype 为原函数的prototype

Function.prototype.myBind = function(context, ...args) {
    const fn = this
    const bindFn = function (...newFnArgs) {
        fn.call(
            this instanceof bindFn ? this : context,
            ...args, ...newFnArgs
        )
    }
    bindFn.prototype = Object.create(fn.prototype)
    return bindFn
}

深拷贝

• 判断类型是否为原始类型，若是是，无需拷贝直接返回
• 为避免出现循环引用，拷贝对象时先判断存储空间中是否存在当前对象，若是有就直接返回
• 开辟一个存储空间，来存储当前对象和拷贝对象的对应关系
• 对引用类型递归拷贝直到属性为原始类型

const deepClone = (target, cache = new WeakMap()) => {
    if(target === null || typeof target !== 'object') {
        return target
    }
    if(cache.get(target)) {
        return target
    }
    const copy = Array.isArray(target) ? [] : {}
    cache.set(target, copy)
    Object.keys(target).forEach(key => copy[key] = deepClone(obj[key], cache))
    return copy
}

函数防抖

• this继承自父级上下文，指向触发事件的目标元素
• 事件被触发时，传入event对象
• 传入leading参数，判断是否能够当即执行回调函数，没必要要等到事件中止触发后才开始执行
• 回调函数能够有返回值，须要返回执行结果

const debounce = (fn, wait = 300, leading = true) => {
    let timerId, result
    return function(...args) {
        timerId && clearTimeout(timerId)
        if (leading) {
            if (!timerId) result = fn.apply(this, args)
            timerId = setTimeout(() => timerId = null, wait)
        } else {
            timerId = setTimeout(() => result = fn.apply(this, args), wait)
        }
        return result
    }
}

函数节流(定时器)

函数中止触发后 n妙后开始执行，中止触发后继续执行一次事件
const throttle = (fn, wait = 300) => {
    let timerId
    return function(...args) {
        if(!timerId) {
            timerId = setTimeout(() => {
                timerId = null
                return result = fn.apply(this, ...args)
            }, wait)
        }
    }
}

函数节流(时间戳)

函数触发后马上执行，中止触发后不在执行事件

const throttle = (fn, wait = 300) => {
    let prev = 0
    let result
    return function(...args) {
        let now = +new Date()
        if(now - prev > wait) {
            prev = now
            return result = fn.apply(this, ...args)
        }
    }
}

ES6版继承

ES5的继承，实质是先创造子类的实例对象，而后将再将父类的方法添加到this上。ES6的继承，先创造父类的实例对象（因此必须先调用super方法，而后再用子类的构造函数修改this。

class Super {    constructor(foo) {      this.foo = foo    }    printFoo() {      console.log(this.foo)    }  }       class Sub extends Super {    constructor(foo, bar) {      super(foo)      this.bar = bar    }  }js

上面做为一部分都是做为一个 P5应该具备基本技能，同时我这边会陆续的更新一些列的面试题，对于 call、apply、bind 有什么不清楚很差理解的地方能够查看我以前的文章，让你一篇文章完全搞清楚,这里说了ES6继承那么后续我会结合面向对象编程和设计模式依次为你们讲解,关注 tu 老师说前端带你玩转全栈