高级前端面试100问(必会)_高级前端面试题,前端从入门到精通

145 阅读3分钟

react和vue的比较

相同 1)vitual dom 2)组件化 3)props,单一数据流

不同点 1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作) 2)状态管理(react) 3)对象属性(vue) 4)vue:view——medol之间双向绑定 5)vue:组件之间的通信(props,callback,emit)

开源分享:docs.qq.com/doc/DSmRnRG… const newObj = Object.create(ctor.prototype) const args = [].slice.call(arguments, 1) const returnObj = ctor.apply(newObj, args)

const isObj = typeof returnObj==='object' && returnObj !== null;
const isFunction = typeof returnObj === 'function'
if (isObj || isFunction) {
    return returnObj
}
return newObj

}


实现bind


1. 基本结论: bind是函数原型对象上,每个函数都可以调用 函数使用bind后,被调用对象是传入bind的第一个参数 当new  
 被bind后的函数时,this指向了新生成的对象



Function.prototype.bindMock = function(target) {

const originalFun = this;//this是调用bind的函数 const args = [].slice.call(arguments,1) return function bound() { const boundArgs = [].slice.call(arguments) const finalArgs = args.concat(boundArgs) //this是new生成的对象 if(this instanceof bound) { // new bound这种情况 // orginalFun要绑定到新生成对象上调用 const result = orginalFun.apply(this, finalArgs) const isObject = typeof result ==='object' && result!==null const isFunction = typeof result ==='function' if (isObject || isFunction) { return result } return this } else { return orginalFun.apply(target, finalArgs) }

} }


3、实现apply, call



function getGlobalObject() { return this } Function.prototype.applyFn = function(target, argsArray) { //check if (typeof this !== 'function') { throw new TypeError(this+"is not function") }

if (argsArray === null ||typeof argsArray === 'undefined') { argsArray =[] }

if (argsArray !== new Object(argsArray)) { throw new TypeError('createListFromArrayLike called on non-object') }

if (typeof target === 'undefined') { target = getGlobalObject() }

var original = target['_fn'] var hasOriginal = target.hasOwnProperty('_fn') target['_fn'] = this; var result = target'_fn'//这一步可以通过生成函数兼容旧浏览器 if (hasOriginal) { target['_fn'] = original; } return result; }


4、实现一下es6的extends



function extends(child, parent) { if (typeof child !== 'function' && parent !== null) { throw new TypeError("super expression must either be null or a function") }

child.prototype=Object.create(parent.prototype, { constructor: { value: child, writable: true, configurable: true } }) if (parent) { child._proto == parent } }


5Object.create实现, Object.createnull和{} 有啥区别吗



function createFun(o){ //错误检查 function Empty(){} Empty.prototype=o return new Empty() } //developer.mozilla.org/zh-CN/docs/…


存在弊端: 所有通过Object.create出来的对象共享原始obj属性


Object.create(null) 会创建一个真正的空对象,并没有继承Object原型链上的方法


6、实现数组扁平化函数flat



function reduceDim(arr, depth){ let curQueue=[] let nextQueue=[] curQueue = curQueue.push(arr) let curDepth =0 let hasNext=true while(hasNext) { hasNext=false while(curQueue.length) { let item = curQueue.shift() if (item instanceof Array) { for (i of item){ nextQueue.push(i) hasNext=true }
}else { nextQueue.push(item) } } curDepth++ if (curDepth===depth) return nextQueue let tmp = curQueue curQueue = nextQueue nextQueue = tmp } return curQueue; } Array.prototype.flatFn = function (depth) { let result =[]

if (depth===undefined) depth=1 if (depth ==0) return this const originArray = this; const length = originArray.length for (let i=0;i<length;i++) { let item = originArray[i] if (item instanceof Array) { let sub = reduceDim(item, depth) console.log() result=result.concat(sub)

最后

除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。