高级前端面试100问（必会）

文章目录
一、JS基础-原理实现
二、Promise
一、JS基础-原理实现
实现new

function newOperator(ctor) {if (typeof ctor !== 'function') {throw new Error('Constructor not a function')}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

基本结论： 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!==nullconst 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) {//checkif (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'](...argsArray)//这一步可以通过生成函数兼容旧浏览器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}
}

5、Object.create实现， Object.create传null和{} 有啥区别吗

function createFun(o){//错误检查function Empty(){}Empty.prototype=oreturn new Empty()
}
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create#polyfill

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

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

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


function reduceDim(arr, depth){let curQueue=[] let nextQueue=[]curQueue = curQueue.push(arr)let curDepth =0let hasNext=truewhile(hasNext) {hasNext=falsewhile(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 nextQueuelet tmp = curQueue curQueue = nextQueuenextQueue = tmp}return curQueue;
}
Array.prototype.flatFn = function (depth) {let result =[]if (depth===undefined) depth=1if (depth ==0) return thisconst originArray = this;const length = originArray.lengthfor (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)} else {result.push(item)}}return result
}

7、防抖节流区分,手写

// throttle
function throttle(fn, delay) {let timer = nulllet busy=falsereturn function(){if (!busy){busy=truetimer=setTimeout(()=>{fn()busy=false}, delay)}  }
}
// debounce
function debounce(fn,delay){let timer =null// let busy=falsereturn function () {// if (busy) {clearTimeout(timer)// }// busy=truetimer =setTimeout(()=>{fn()// busy=false}, delay)}
}

分享一款面试题库

高级前端面试100问（必会）相关推荐

高级前端面试100问
文章目录一.JS基础-原理实现二.Promise 一.JS基础-原理实现实现new function newOperator(ctor) {if (typeof ctor !== 'functi ...
java 重定向到某个页面并弹出消息_前端面试100问之浏览器从输入URL到页面展示发生了什么...
点击蓝字,关注我们『浏览器从输入URL到页面渲染发生了什么』作为一个经典题目,在前端面试中高频出现,很多大厂的面试都会从这个面试题出发,考察候选人对知识的掌握程度,这其中涉及到了网络.操作系统.We ...
java除了框架还需要什么_除了框架，前端面试还问什么
原标题:除了框架,前端面试还问什么现在的web前端技术的发展很快,各种新技术层出不穷.前后端分离的开发模式也让前端开发者的地位日益提升,自然有很多小伙伴慕名入了前端开发的坑,希望能在前端领域大展宏图 ...
2018年中高级前端面试题目小结
2018年中高级前端面试题目小结前言关于前端面试,及面试题目,我之前有很多文章总结过,可以在右侧搜索面试,进行查找.其实面试中可以问的问题很多,最近几年,我也面试过很多工作2-4年的前端,我一般会 ...
大厂前端面试都问些什么问题？入职爱奇艺年薪48万，面试经验总结
前言 "金九银十"跳槽季,又到了面试求职的高峰期.好多小伙伴都会跳槽去找工作.如果你不跳槽,也建议把这篇文章看完,毕竟金九银十之后,就是金三银四了,总是逃不掉的? 你在面试的时候, ...
【转】MySQL 三万字精华总结 + 面试100 问，吊打面试官绰绰有余（收藏系列）
MySQL 三万字精华总结 + 面试100 问,吊打面试官绰绰有余(收藏系列) 本文公众号来源:JavaKeeper作者:派大新写在之前:不建议那种上来就是各种面试题罗列,然后背书式的去记忆,对技术 ...
自动化测试面试100问
自动化测试面试100问基于python+Selenium+Unittest+BeatifulReport框架实现 1.等待相关 1)隐式等待:imlpicitlyWait:webdriver 会在指 ...
前端面试被问到性能优化该肿么办！
性能优化1 前端面试被问到性能优化该肿么办! 1.1 页面重构怎么操作? 网站重构:在不改变外部行为的前提下,简化结构.添加可读性,而在网站前端保持一致的行为. 也就是说是在不改变UI的情况下,对网站 ...
数字后端面试100问（校招版）
上次发布面试100问以后,应读者强烈要求,抽空写了一篇校招版的后端100问,希望对各位应届生面试有用.题目难度类型更偏向基础概念的理解.对于校招,由于在校学生缺乏实际项目经验,考官通常会更加注重学生对 ...
世界顶级公司的前端面试都问些什么
在过去的几年里,我在亚马逊和雅虎面试过许多前端工程师.在这篇文章中,我想分享一些技巧,帮助大家做好准备. 免责声明: 本文的目的并不是为你列出在前端面试中可能会被问到的问题,但是可以将其视为知识储备. ...

高级前端面试100问（必会）

分享一款面试题库

高级前端面试100问（必会）相关推荐

最新文章

热门文章