又到了金三銀四面試季了，想必很多同學已經躍躍欲試，提前開始準備面試了，本文就列舉了面試過程中一些常見的手寫代碼實現供參考。或許很多人會問，這些手寫代碼實現意義何在，社區已經有很多poly-fill或者函數庫供選擇，何必要自己費力去折騰呢？我的理解是，在真實業務開發場景中，我們真的用不上這些自己寫的方法，一個lodash庫完全可以滿足我們的需求，但此時你僅僅只是一個API Caller ，你經常使用到它，但對它實現原理卻一無所知，哪怕它實現起來是非常簡單的。所以親自動手寫出它的實現過程，對你理解其中原理是很有幫助的。另外，不要覺得用ES6語法，或者最新的語法去實現ES5甚至是ES3的方法是件可笑的事情，相反，它更能體現出你對ES6語法的掌握程度以及對JS發展的關注度，在面試中說不定會成為你的一個亮點。

模擬call

• 第一個參數為null或者undefined時，this指向全局對象window，值為原始值的指向該原始值的自動包裝對象，如 String、Number、Boolean
• 為了避免函數名與上下文(context)的屬性發生衝突，使用Symbol類型作為唯一值
• 將函數作為傳入的上下文(context)屬性執行
• 函數執行完成後刪除該屬性
• 返回執行結果

<code>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
}
複製代碼/<code>

注： 代碼實現使用了ES2020新特性Null判斷符 ??， 詳細參考阮一峰老師的ECMAScript 6 入門

模擬apply

• 前部分與call一樣
• 第二個參數可以不傳，但類型必須為數組或者類數組

<code>Function.prototype.myApply = function(context) {
    context =  (context ?? window) || new Object(context)
    const key = Symbol()
    const args = arguments[1]
    context[key] = this
    const result= args ? context[key](...args) : context[key]()
    delete context[key]
    return result
}
複製代碼/<code>

注：代碼實現存在缺陷，當第二個參數為類數組時，未作判斷（有興趣可查閱一下如何判斷類數組）

模擬bind

• 使用 call / apply 指定 this
• 返回一個綁定函數
• 當返回的綁定函數作為構造函數被new調用，綁定的上下文指向實例對象
• 設置綁定函數的prototype 為原函數的prototype

<code>Function.prototype.myBind = function(context, ...args) {
    const fn = this
    const bindFn = function (...newFnArgs) {
        return fn.call(
            this instanceof bindFn ? this : context,
            ...args, ...newFnArgs
        )
    }
    bindFn.prototype = Object.create(fn.prototype)
    return bindFn
}
複製代碼/<code>

模擬new

• 創建一個新的空對象
• 把this綁定到空對象
• 使空對象的__proto__指向構造函數的原型(prototype)
• 執行構造函數，為空對象添加屬性
• 判斷構造函數的返回值是否為對象，如果是對象，就使用構造函數的返回值，否則返回創建的對象

<code>const createNew = (Con, ...args) => {
    const obj = {}
    Object.setPrototypeOf(obj, Con.prototype)
    let result = Con.apply(obj, args)
    return result instanceof Object ? result : obj
}
複製代碼/<code>

模擬instanceof

• 遍歷左邊變量的原型鏈，直到找到右邊變量的 prototype，如果沒有找到，返回 false

<code>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__
    }
}
複製代碼/<code>

深拷貝（簡單版）

• 判斷類型是否為原始類型，如果是，無需拷貝，直接返回
• 為避免出現循環引用，拷貝對象時先判斷存儲空間中是否存在當前對象，如果有就直接返回
• 開闢一個存儲空間，來存儲當前對象和拷貝對象的對應關係
• 對引用類型遞歸拷貝直到屬性為原始類型

<code>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(target[key], cache))
    return copy
}
複製代碼/<code>

缺點：無法拷貝函數、Map、Set、正則等其他類型

深拷貝（尤雨溪版）

vuex源碼

• 原理與上一版類似

<code>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
}
複製代碼/<code>

深拷貝（複雜版）

如何寫出一個驚豔面試官的深拷貝?

<code>const mapTag = '[object Map]';
const setTag = '[object Set]';
const arrayTag = '[object Array]';
const objectTag = '[object Object]';
const argsTag = '[object Arguments]';

const boolTag = '[object Boolean]';
const dateTag = '[object Date]';
const numberTag = '[object Number]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
const errorTag = '[object Error]';
const regexpTag = '[object RegExp]';
const funcTag = '[object Function]';

const deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];


function forEach(array, iteratee) {
    let index = -1;
    const length = array.length;
    while (++index < length) {
        iteratee(array[index], index);
    }
    return array;
}

function isObject(target) {
    const type = typeof target;
    return target !== null && (type === 'object' || type === 'function');
}

function getType(target) {
    return Object.prototype.toString.call(target);
} 


function getInit(target) {
    const Ctor = target.constructor;
    return new Ctor();
}

function cloneSymbol(targe) {
    return Object(Symbol.prototype.valueOf.call(targe));
}

function cloneReg(targe) {
    const reFlags = /\\w*$/;
    const result = new targe.constructor(targe.source, reFlags.exec(targe));
    result.lastIndex = targe.lastIndex;
    return result;
}

function cloneFunction(func) {
    const bodyReg = /(?<={)(.|\\n)+(?=})/m;
    const paramReg = /(?<=\\().+(?=\\)\\s+{)/;
    const funcString = func.toString();
    if (func.prototype) {
        const param = paramReg.exec(funcString);
        const body = bodyReg.exec(funcString);
        if (body) {
            if (param) {
                const paramArr = param[0].split(',');
                return new Function(...paramArr, body[0]);
            } else {
                return new Function(body[0]);
            }
        } else {
            return null;
        }
    } else {
        return eval(funcString);
    }
}

function cloneOtherType(targe, type) {
    const Ctor = targe.constructor;
    switch (type) {
        case boolTag:
        case numberTag:
        case stringTag:
        case errorTag:
        case dateTag:
            return new Ctor(targe);
        case regexpTag:
            return cloneReg(targe); 

        case symbolTag:
            return cloneSymbol(targe);
        case funcTag:
            return cloneFunction(targe);
        default:
            return null;
    }
}

function clone(target, map = new WeakMap()) {

    // 克隆原始類型
    if (!isObject(target)) {
        return target;
    }

    // 初始化
    const type = getType(target);
    let cloneTarget;
    if (deepTag.includes(type)) {
        cloneTarget = getInit(target, type);
    } else {
        return cloneOtherType(target, type);
    }

    // 防止循環引用
    if (map.get(target)) {
        return map.get(target);
    }
    map.set(target, cloneTarget);

    // 克隆set
    if (type === setTag) {
        target.forEach(value => {
            cloneTarget.add(clone(value, map));
        });
        return cloneTarget;
    }

    // 克隆map
    if (type === mapTag) {
        target.forEach((value, key) => {
            cloneTarget.set(key, clone(value, map));
        });
        return cloneTarget;
    }

    // 克隆對象和數組 

    const keys = type === arrayTag ? undefined : Object.keys(target);
    forEach(keys || target, (value, key) => {
        if (keys) {
            key = value;
        }
        cloneTarget[key] = clone(target[key], map);
    });

    return cloneTarget;
}
複製代碼/<code>

深拷貝（高性能版）

頭條面試官：你知道如何實現高性能版本的深拷貝嘛？

<code>const MY_IMMER = Symbol('my-immer1')

const isPlainObject = value => {
  if (
    !value ||
    typeof value !== 'object' ||
    {}.toString.call(value) != '[object Object]'
  ) {
    return false
  }
  var proto = Object.getPrototypeOf(value)
  if (proto === null) {
    return true
  }
  var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor
  return (
    typeof Ctor == 'function' &&
    Ctor instanceof Ctor &&
    Function.prototype.toString.call(Ctor) ===
      Function.prototype.toString.call(Object)
  )
}

const isProxy = value => !!value && !!value[MY_IMMER]

function produce(baseState, fn) {
  const proxies = new Map()
  const copies = new Map()

  const objectTraps = {
    get(target, key) { 

      if (key === MY_IMMER) return target
      const data = copies.get(target) || target
      return getProxy(data[key])
    },
    set(target, key, val) {
      const copy = getCopy(target)
      const newValue = getProxy(val)
      // 這裡的判斷用於拿 proxy 的 target
      // 否則直接 copy[key] = newValue 的話外部拿到的對象是個 proxy
      copy[key] = isProxy(newValue) ? newValue[MY_IMMER] : newValue
      return true
    }
  }

  const getProxy = data => {
    if (isProxy(data)) {
      return data
    }
    if (isPlainObject(data) || Array.isArray(data)) {
      if (proxies.has(data)) {
        return proxies.get(data)
      }
      const proxy = new Proxy(data, objectTraps)
      proxies.set(data, proxy)
      return proxy
    }
    return data
  }

  const getCopy = data => {
    if (copies.has(data)) {
      return copies.get(data)
    }
    const copy = Array.isArray(data) ? data.slice() : { ...data }
    copies.set(data, copy)
    return copy
  }

  const isChange = data => {
    if (proxies.has(data) || copies.has(data)) return true
  }

  const finalize = data => {
    if (isPlainObject(data) || Array.isArray(data)) {
      if (!isChange(data)) {
        return data
      }
      const copy = getCopy(data) 

      Object.keys(copy).forEach(key => {
        copy[key] = finalize(copy[key])
      })
      return copy
    }
    return data
  }

  const proxy = getProxy(baseState)
  fn(proxy)
  return finalize(baseState)
}
複製代碼/<code>

函數防抖

函數防抖是在事件被觸發n秒後再執行回調，如果在n秒內又被觸發，則重新計時。 函數防抖多用於input輸入框

• 箭頭函數的this繼承自父級上下文，這裡指向觸發事件的目標元素
• 事件被觸發時，傳入event對象
• 傳入leading參數，判斷是否可以立即執行回調函數，不必要等到事件停止觸發後才開始執行
• 回調函數可以有返回值，需要返回執行結果

<code> 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
    }
}
複製代碼/<code>

函數節流（定時器）

函數節流是指連續觸發事件，但是在 n 秒中只執行一次函數，適合應用於動畫相關的場景

<code>const throttle = (fn, wait = 300) => {
    let timerId
    return function(...args) {
        if(!timerId) {
            timerId = setTimeout(() => {
                timerId = null
                return result = fn.apply(this, ...args)
            }, wait)
        }
    }
}
複製代碼/<code>

函數節流（時間戳）

<code>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)
        }
    }
}
複製代碼/<code>

函數節流實現方法區別

方法 使用時間戳 使用定時器 開始觸發時 立刻執行 n秒後執行 停止觸發後 不再執行事件 繼續執行一次事件

函數節流（雙劍合璧版）

<code> const throttle = (fn, wait = 300,  {
    // 參數解構賦值
    leading = true,
    trailing = true,
} = {}) => {
    let prev = 0
    let timerId
    const later = function(args) {
        timerId && clearTimeout(timerId)
        timerId = setTimeout(() => {
            timerId = null
            fn.apply(this, args)
      }, wait)
    }
    return function (...args) {
        let now = +new Date()
        if(!leading) return later(args)
        if(now - prev > wait) {
            fn.apply(this, args)
            prev = now
        } else if(trailing) {
            later(args)
        }
    }
 }
複製代碼/<code>

leading：false 表示禁用第一次執行

trailing: false 表示禁用停止觸發的回調

注意：leading：false 和 trailing: false 不能同時設置。

數組去重

<code>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' },
//  ]
複製代碼/<code>

原理是利用Map的鍵不可重複

數組扁平化（技巧版）

利用 toString 把數組變成以逗號分隔的字符串，遍歷數組把每一項再變回原來的類型。缺點：數組中元素必須是 Number類型，String類型會被轉化成Number

<code>const str = [0, 1, [2, [3, 4]]].toString()
// '0, 1, 2, 3, 4'
const arr = str.split(',')
// ['0','1','2', '3', '4']
const newArr = arr.map(item => +item)
// [0, 1, 2, 3, 4]

const flatten = (arr) => arr.toString().split(',').map(item => +item)
複製代碼/<code>

數組扁平化

reduce + 遞歸

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

const arr = [1, [2], [3, [4]]]
flatten(arr, 1)     // [1, [2], [3, [4]]]
flatten(arr, 2)     // [1，2, [3, 4]] 

flatten(arr, 3)     // [1，2, 3, 4]


複製代碼/<code>

函數柯里化

<code>const currying = fn =>
    _curry = (...args) => 
        args.length >= fn.length
        ? fn(...args)
        : (...newArgs) => _curry(...args, ...newArgs)
複製代碼/<code>

原理是利用閉包把傳入參數保存起來，當傳入參數的數量足夠執行函數時，就開始執行函數

發佈訂閱EventEmitter

<code>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] = []
      }
    }
}
複製代碼/<code>

subs是EventEmitter私有屬性(最新特性參考阮一峰老師的ECMAScript 6 入門)，通過on註冊事件，off註銷事件，emit觸發事件

寄生組合繼承

<code>  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
複製代碼/<code>

ES6版繼承

<code>  class Super {
    constructor(foo) {
      this.foo = foo
    }
    printFoo() {
      console.log(this.foo)
    }
  }
  class Sub extends Super {
    constructor(foo, bar) {
      super(foo)
      this.bar = bar
    }
  }
複製代碼/<code>

ES5的繼承，實質是先創造子類的實例對象，然後將再將父類的方法添加到this上。 ES6的繼承，先創造父類的實例對象（所以必須先調用super方法，然後再用子類的構造函數修改this

閱讀更多 Echa攻城獅 的文章

關鍵字: 跳槽那些事兒 手寫 前端