學習-JS進階知識點

前言

本篇文章介紹面試中常常問的JS進階知識點，主要是模擬實現JS中的經常使用函數。後續會持續推出HTML知識點、CSS知識點、webpack知識點、react知識點、組件設計相關知識點、瀏覽器相關知識點、網絡相關知識點、算法相關知識點等文章進行全面的知識梳理。

call簡單實現

Function.prototype.myCall = function(context) {
  if (typeof this !== 'function') {
    throw new Error('Error');
  }
  context = context || window;
  context.fn = this;
  const args = [...arguments].slice(1);
  const result = context.fn(...args);
  delete context.fn;
  return result;
}
複製代碼

apply簡單實現

Function.prototype.myApply = function(context, arr) {
  if (typeof this !== 'function') {
    throw new Error('Error');
  }
  context = context || window;
  context.fn = this;
  let result;
  if (!arr) {
    result = context.fn();
  } else {
    result = context.fn(...arr);
  }
  delete context.fn;
  return result;
}
複製代碼

bind簡單實現

Function.prototype.myBind = function(context) {
  if (typeof this !== 'function') {
    throw new Error('Error');
  }
  const self = this;
  const args = [...arguments].slice(1);
  const fNOP = function() {};
  const f = function() {
    const bindArgs = [...arguments].slice(1);
    return self.apply(this instanceof f ? this : context, args.concat(bindArgs))
  }
  fNOP.prototype = this.prototype;
  f.prototype = new fNOP();
  return f;
}
複製代碼

new簡單實現

function myNew() {
  let obj = {};
  const Con = [].shift.call(arguments);
  obj.__proto__ = Con.prototype;
  const result = con.apply(obj, arguments);
  return typeof result === 'object' ? result : obj; 
}
複製代碼

instanceof簡單實現

function myInstanceof(left, right) {
  while(true) {
    if (left === null || left === undefined) return false
    if (left.__proto__ === right.prototype) return true
    left = left.__proto__
  }
}
複製代碼

debounce簡單實現

function debounce(func, wait, immediate) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    if (timeout) clearTimeout(timeout)
    if (immediate) {
      const callNow = !timeout;
      timeout = setTimeout(function() {
        timeout = null;
      }, wait)
      if (callNow) func.apply(context, args)
    } else {
      timeout = setTimeout(function() {
        func.apply(context, args)
      }, wait);
    }
  }
}
複製代碼

throttle簡單實現

function throttle(func, wait, options) {
  var timeout, context, args, result;
  var previous = 0;
  if (!options) options = {};

  var later = function() {
    previous = options.leading === false ? 0 : new Date().getTime();
    timeout = null;
    func.apply(context, args);
    if (!timeout) context = args = null;
  }

  return function() {
    var now = new Date().getTime();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now-previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null
      }
      previous = now;
      func.apply(contet, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
  }
}
複製代碼

亂序簡單實現

function shuffle(a) {
  for (let i = a.length; i; i--) {
    let j = Math.floor(Math.random() * i);
    [a[i - 1], a[j]] = [a[j], a[i - 1]];
  }
  return a;
}
複製代碼