本篇文章次要记录了前端口试中常考的根底手写题,对源码进行了一点缩减,也是为了能在口试中能更快的写进去。

防抖节流:

//防抖function debounce(fn, time) {  let timer;  return function () {    clearTimeout(timer);    timer = setTimeout(() => {      fn.call(this, ...arguments);    }, time);  };}//节流function throttle(fn, delay) {  var prev = Date.now();  return function () {    var now = Date.now();    if (now - prev >= delay) {      fn.call(this, ...arguments);      prev = Date.now();    }  };}

继承:

//组合继承function Parent(name){    this.name = name;}Parent.prototype.getName = function(){    console.log(this.name)}function Child(name){Parent.call(this,name);}Child.prototype = new Parent();//寄生组合function Parent(name){    this.name = name;}Parent.prototype.getName = function () { console.log(this.name) }function Child(name){    Parent.call(this,name);}Child.prototype = Object.create(Parent.prototype,{    constructor:{        value:Child,        writable:true,        enumerable:false,        configurable:true    }})

call、apply、bind实现:

//callFunction.prototype.myCall = function (content, ...args) {  content = content || window;  content.fn = this;  let result = content.fn(...args);  delete content.fn;  return result;};//applyFunction.prototype.myApply = function (content, arr) {  content = content || window;  content.fn = this;  let result = arr && content.fn(...arr);  delete content.fn;  return result;};//bindFunction.prototype.myBind = function (content, ...args) {  const that = this;  return  function F() {    if (this instanceof F) {      return new that(...args, ...arguments); // 因为返回了一个函数,咱们能够 new F(),所以须要判断    }    return that.apply(content, [...args, ...arguments]);  };};

柯里化:

//定长柯里化function curry(fn, ...presetArgs) {  return function (...args) {    let allargs = [...presetArgs, ...args];    if (allargs.length >= fn.length) {      fn.apply(this, allargs);    } else {      return curry(fn, ...allargs);    }  };}//累加函数function add(){    let  args= [...arguments];    let adder = function(){        args.push(...arguments);        return adder;    }    adder.toString = function (){        return args.reduce((a,b)=>a+b)    }    return adder;}

new、instanceof、object.create实现:

//newfunction myNew(Con, ...args) {  let obj = {};  obj.__proto__ = Con.prototype;  let result = Con.call(obj, ...args);  return result instanceof Object ? result : obj;}//instanceoffunction myInstanceof(left, right) {  let prototype = right.prototype;  left = left.__proto__;  while (true) {    if (left === null || left === undefined) return false;    if (prototype === left) return true;    left = left.__proto__;  }}//object.createfunction myCreate(p) {    function F(){}    F.prototype = p;    return new F();}

其余:

//数组mapfunction map(arr,callback) {     if(Array.isArray(arr)){        let newArr = [];        for(let i = 0 ;i<arr.length;i++){            newArr[i] = callback(arr[i],i,arr);        }        return newArr;    }    return []; }//深拷贝const deepCopy = function (obj) {  let newObj = obj instanceof Array ? [] : {};  for (let key in obj) {    if (obj.hasOwnProperty(key)) {      newObj[key] =        typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key];    }  }  return newObj;};//冒泡排序const popSort = (arr)=>{  for(let i=0;i<=arr.length-1;i++){      for(let j=i+1;j<=arr.length;j++){             if (arr[i] > arr[j]) {               [arr[i], arr[j]] = [arr[j], arr[i]];             }      }   }}

50行简略版Promise实现:

//以后执行栈执行结束时会立即先解决所有微工作队列中的事件,而后再去宏工作队列中取出一个事件。同一次事件循环中,微工作永远在宏工作之前执行const PENDING = "pending",  RESOLVED = "fulfilled",  REJECTED = "rejected";function myPromise(fn) {  this.val = null;  this.state = PENDING;  this.resolvedCallback = [];  this.rejectedCallback = [];  try {    fn(resolve.bind(this), reject.bind(this));  } catch (e) {    this.reject(e);  }  function resolve(val) {    if (this.state === PENDING) {      setTimeout(() => {        this.state = RESOLVED;        this.val = val;        this.resolvedCallback.forEach((cb) => cb(val));      });    }  }  function reject(val) {    if (this.state === PENDING) {      setTimeout(() => {        this.state = REJECTED;        this.val = val;        this.rejectedCallback.forEach((cb) => cb(val));      });    }  }}myPromise.prototype.then = function (onResolve, onReject) {  onResolve = typeof onResolve === "function" ? onResolve : (v) => v;  onReject =    typeof onReject === "function"      ? onResolve      : (r) => {          throw r;        };  if (this.state === PENDING) {    this.resolvedCallback.push(onResolve);    this.rejectedCallback.push(onReject);  }  if (this.state === RESOLVED) {    setTimeout(() => {      onResolve(this.val);    });  }  if (this.state === REJECTED) {    setTimeout(() => {      onReject(this.val);    });  }};