本篇文章次要记录了前端口试中常考的根底手写题,对源码进行了一点缩减,也是为了能在口试中能更快的写进去。
防抖节流:
//防抖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); }); }};