初、中级前端应该要掌握的手写代码实现

过完年马上又要到金三银四面试季了，想必很多同学已经跃跃欲试，提前开始准备面试了，本文就列举了面试过程中一些常见的手写代码实现供参考。或许很多人会问，这些手写代码实现意义何在，社区已经有很多poly-fill或者函数库供选择，何必要自己费力去折腾呢？我的理解是，在真实业务开发场景中，我们真的用不上这些自己写的方法，一个lodash库完全可以满足我们的需求，但此时你仅仅只是一个API Caller ，你经常使用到它，但对它实现原理却一无所知，哪怕它实现起来其实是非常简单。所以亲自动手写出它的实现过程，对理解其中原理是很有帮助的。另外，不要觉得用ES6语法，或者最新的语法去实现ES5甚至是ES3的方法是件可笑的事情，相反，它更能体现出你对ES6语法的掌握程度以及对JS发展的关注度，在面试中说不定会成为你的一个亮点。

“我自己是一名从事了6年web前端开发的老程序员（我的微信：web-xxq），今年年初我花了一个月整理了一份最适合2019年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“2020”即可领取）。

模拟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
}
复制代码

注：代码实现使用了ES2020新特性Null判断符 ??，详细参考阮一峰老师的ECMAScript 6 入门

模拟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
}
复制代码

模拟new

创建一个新的空对象
把this绑定到空对象
使空对象的__proto__指向构造函数的原型(prototype)
执行构造函数，为空对象添加属性
判断构造函数的返回值是否为对象，如果是对象，就使用构造函数的返回值，否则返回创建的对象

const createNew = (Con, ...args) => {
    const obj = {}
    Object.setPrototypeOf(obj, Con.prototype)
    let result = Con.apply(obj, args)
    return result instanceof Object ? result : obj
}
复制代码

模拟instanceOf

遍历左边变量的原型链，直到找到右边变量的 prototype，如果没有找到，返回 false

const myInstanceOf = (left, right) => {
    let leftValue = left.__proto__
    let rightValue = right.prototype
    while(true) {
        if(leftValue === null) return false
        if(leftValue === rightValue) return true
        leftValue = leftValue.__proto__
    }
}
复制代码

深拷贝（简单版）

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

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
}
复制代码

深拷贝(尤雨溪版)

vuex源码

原理与上一版类似

function find(list, f) {
    return list.filter(f)[0]
}

function deepCopy(obj, cache = []) {
    // just return if obj is immutable value
    if (obj === null || typeof obj !== 'object') {
        return obj
    }

    // if obj is hit, it is in circular structure
    const hit = find(cache, c => c.original === obj)
    if (hit) {
        return hit.copy
    }

    const copy = Array.isArray(obj) ? [] : {}
    // put the copy into cache at first
    // because we want to refer it in recursive deepCopy
    cache.push({
        original: obj,
        copy
    })
    Object.keys(obj).forEach(key => copy[key] = deepCopy(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
    }
}
复制代码

函数节流(定时器)

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)
        }
    }
}
复制代码

函数节流实现方法区别

方法	使用时间戳	使用定时器
开始触发时	立刻执行	n秒后执行
停止触发后	不再执行事件	继续执行一次事件

数组去重

const uniqBy = (arr, key) => {
    return [...new Map(arr.map(item) => [item[key], item])).values()]
}

const singers = [
    { id: 1, name: 'Leslie Cheung' },
    { id: 1, name: 'Leslie Cheung' },
    { id: 2, name: 'Eason Chan' },
]
console.log(uniqBy(singers, 'id'))

//  [
//    { id: 1, name: 'Leslie Cheung' },
//    { id: 2, name: 'Eason Chan' },
//  ]
复制代码

原理是利用Map的键不可重复

数组扁平化（技巧版）

const flatten = (arr) => arr.toString().split(',').map(item => +item)
复制代码

数组扁平化

const flatten = (arr, deep = 1) => {
  return arr.reduce((cur, next) => {
    return Array.isArray(next) && deep > 1 ?
      [...cur, ...flatten(next, deep - 1)] :
      [...cur, next]
  },[])
}
复制代码

函数柯里化

const currying = (fn) {
    _curry = (...args) => 
        args.length >= fn.length
        ? fn(...args)
        : (...newArgs) => _curry(...args, ...newArgs)
}
复制代码

原理是利用闭包把传入参数保存起来，当传入参数的数量足够执行函数时，就开始执行函数

发布订阅EventEmitter

class EventEmitter {
    #subs = {}
    emit(event, ...args) {
        if (this.#subs[event] && this.#subs[event].length) {
            this.#subs[event].forEach(cb => cb(...args))
        }
    }
    on(event, cb) {
        (this.#subs[event] || (this.#subs[event] = [])).push(cb)
    }
    off(event, offCb) {
    if (offCb) {
        if (this.#subs[event] && this.#subs[event].length)
            this.#subs[event] = this.#subs[event].filter(cb => cb !== offCb)
      } else {
        this.#subs[event] = []
      }
    }
}
复制代码

subs是EventEmitter私有属性(最新特性参考阮一峰老师的ECMAScript 6 入门)，通过on注册事件，off注销事件，emit触发事件

寄生组合继承

  function Super(foo) {
    this.foo = foo
  }
  Super.prototype.printFoo = function() {
    console.log(this.foo)
  }
  function Sub(bar) {
    this.bar = bar
    Super.call(this)
  }
  Sub.prototype = Object.create(Super.prototype)
  Sub.prototype.constructor = Sub
复制代码

ES6版继承

  class Super {
    constructor(foo) {
      this.foo = foo
    }
    printFoo() {
      console.log(this.foo)
    }
  }
  class Sub extends Super {
    constructor(foo, bar) {
      super(foo)
      this.bar = bar
    }
  }
复制代码

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

web前端学习圈

发布了184 篇原创文章 · 获赞 276 · 访问量 16万+

私信关注

初、中级前端应该要掌握的手写代码实现

猜你喜欢