20道JS原理题助你面试一臂之力!
链接:https://juejin.im/post/5d2ee123e51d4577614761f8
本文针对目前常见的面试题,实现了相应方法的核心原理,部分边界细节未处理。后续也会持续更新,希望对你有所帮助。
1、实现一个call函数
// 思路:将要改变this指向的方法挂到目标this上执行并返回Function.prototype.mycall = function (context) { if (typeof this !== 'function') { throw new TypeError('not funciton') } context = context || window context.fn = this let arg = [...arguments].slice(1) let result = context.fn(...arg) delete context.fn return result}
2、实现一个apply函数
// 思路:将要改变this指向的方法挂到目标this上执行并返回Function.prototype.myapply = function (context) { if (typeof this !== 'function') { throw new TypeError('not funciton') } context = context || window context.fn = this let result if (arguments[1]) { result = context.fn(...arguments[1]) } else { result = context.fn() } delete context.fn return result}
3、实现一个bind函数
// 思路:类似call,但返回的是函数Function.prototype.mybind = function (context) { if (typeof this !== 'function') { throw new TypeError('Error') } let _this = this let arg = [...arguments].slice(1) return function F() { // 处理函数使用new的情况 if (this instanceof F) { return new _this(...arg, ...arguments) } else { return _this.apply(context, arg.concat(...arguments)) } }}
4、instanceof的原理
5、Object.create的基本实现原理
// 思路:将传入的对象作为原型function create(obj) { function F() {} F.prototype = obj return new F()}
6、new本质
function myNew (fun) { return function () { // 创建一个新对象且将其隐式原型指向构造函数原型 let obj = { __proto__ : fun.prototype } // 执行构造函数 fun.call(obj, ...arguments) // 返回该对象 return obj }}function person(name, age) { this.name = name this.age = age}let obj = myNew(person)('chen', 18) // {name: "chen", age: 18}
7、实现一个基本的Promise
8、实现浅拷贝
// 1. ...实现let copy1 = {...{x:1}}// 2. Object.assign实现let copy2 = Object.assign({}, {x:1})
9、实现一个基本的深拷贝
// 1. JOSN.stringify()/JSON.parse()let obj = {a: 1, b: {x: 3}}JSON.parse(JSON.stringify(obj))// 2. 递归拷贝function deepClone(obj) { let copy = obj instanceof Array ? [] : {} for (let i in obj) { if (obj.hasOwnProperty(i)) { copy[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i] } } return copy}
10、使用setTimeout模拟setInterval
// 可避免setInterval因执行时间导致的间隔执行时间不一致setTimeout (function () { // do something setTimeout (arguments.callee, 500)}, 500)
11、js实现一个继承方法// 借用构造函数继承实例属性
// 借用构造函数继承实例属性function Child () { Parent.call(this)}// 寄生继承原型属性(function () { let Super = function () {} Super.prototype = Parent.prototype Child.prototype = new Super()})()
12、实现一个基本的Event Bus
13、实现一个双向数据绑定
let obj = {}let input = document.getElementById('input')let span = document.getElementById('span')// 数据劫持Object.defineProperty(obj, 'text', { configurable: true, enumerable: true, get() { console.log('获取数据了') }, set(newVal) { console.log('数据更新了') input.value = newVal span.innerHTML = newVal }})// 输入监听input.addEventListener('keyup', function(e) { obj.text = e.target.value})
完整实现可前往之前写的:这应该是最详细的响应式系统讲解了
https://juejin.im/post/5d26e368e51d4577407b1dd7
14、实现一个简单路由
15、实现懒加载
<ul> <li><img src="./imgs/default.png" data="./imgs/1.png" alt="">li> <li><img src="./imgs/default.png" data="./imgs/2.png" alt="">li> <li><img src="./imgs/default.png" data="./imgs/3.png" alt="">li> <li><img src="./imgs/default.png" data="./imgs/4.png" alt="">li> <li><img src="./imgs/default.png" data="./imgs/5.png" alt="">li> <li><img src="./imgs/default.png" data="./imgs/6.png" alt="">li> <li><img src="./imgs/default.png" data="./imgs/7.png" alt="">li> <li><img src="./imgs/default.png" data="./imgs/8.png" alt="">li> <li><img src="./imgs/default.png" data="./imgs/9.png" alt="">li> <li><img src="./imgs/default.png" data="./imgs/10.png" alt="">li>ul>
let imgs = document.querySelectorAll('img')// 可视区高度let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeightfunction lazyLoad () { // 滚动卷去的高度 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop for (let i = 0; i < imgs.length; i ++) { // 图片在可视区冒出的高度 let x = clientHeight + scrollTop - imgs[i].offsetTop // 图片在可视区内 if (x > 0 && x < clientHeight+imgs[i].height) { imgs[i].src = imgs[i].getAttribute('data') } } }// addEventListener('scroll', lazyLoad) or setInterval(lazyLoad, 1000)
16、rem实现原理
// 原始配置function setRem () { let doc = document.documentElement let width = doc.getBoundingClientRect().width let rem = width / 75 doc.style.fontSize = rem + 'px'}// 监听窗口变化addEventListener("resize", setRem)
17、手写实现AJAX
// 1. 简单流程// 实例化let xhr = new XMLHttpRequest()// 初始化xhr.open(method, url, async)// 发送请求xhr.send(data)// 设置状态变化回调处理请求结果xhr.onreadystatechange = () => { if (xhr.readyStatus === 4 && xhr.status === 200) { console.log(xhr.responseText) }}// 2. 基于promise实现 function ajax (options) { // 请求地址 const url = options.url // 请求方法 const method = options.method.toLocaleLowerCase() || 'get' // 默认为异步true const async = options.async // 请求参数 const data = options.data // 实例化 const xhr = new XMLHttpRequest() // 请求超时 if (options.timeout && options.timeout > 0) { xhr.timeout = options.timeout } // 返回一个Promise实例 return new Promise ((resolve, reject) => { xhr.ontimeout = () => reject && reject('请求超时') // 监听状态变化回调 xhr.onreadystatechange = () => { if (xhr.readyState == 4) { // 200-300 之间表示请求成功,304资源未变,取缓存 if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { resolve && resolve(xhr.responseText) } else { reject && reject() } } } // 错误回调 xhr.onerror = err => reject && reject(err) let paramArr = [] let encodeData // 处理请求参数 if (data instanceof Object) { for (let key in data) { // 参数拼接需要通过 encodeURIComponent 进行编码 paramArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])) } encodeData = paramArr.join('&') } // get请求拼接参数 if (method === 'get') { // 检测url中是否已存在 ? 及其位置 const index = url.indexOf('?') if (index === -1) url += '?' else if (index !== url.length -1) url += '&' // 拼接url url += encodeData } // 初始化 xhr.open(method, url, async) // 发送请求 if (method === 'get') xhr.send(null) else { // post 方式需要设置请求头 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8') xhr.send(encodeData) } })}
18、实现拖拽
window.onload = function () { // drag处于绝对定位状态 let drag = document.getElementById('box') drag.onmousedown = function(e) { var e = e || window.event // 鼠标与拖拽元素边界的距离 = 鼠标与可视区边界的距离 - 拖拽元素与边界的距离 let diffX = e.clientX - drag.offsetLeft let diffY = e.clientY - drag.offsetTop drag.onmousemove = function (e) { // 拖拽元素移动的距离 = 鼠标与可视区边界的距离 - 鼠标与拖拽元素边界的距离 let left = e.clientX - diffX let top = e.clientY - diffY // 避免拖拽出可视区 if (left < 0) { left = 0 } else if (left > window.innerWidth - drag.offsetWidth) { left = window.innerWidth - drag.offsetWidth } if (top < 0) { top = 0 } else if (top > window.innerHeight - drag.offsetHeight) { top = window.innerHeight - drag.offsetHeight } drag.style.left = left + 'px' drag.style.top = top + 'px' } drag.onmouseup = function (e) { this.onmousemove = null this.onmouseup = null } }}
19、实现一个节流函数
// 思路:在规定时间内只触发一次function throttle (fn, delay) { // 利用闭包保存时间 let prev = Date.now() return function () { let context = this let arg = arguments let now = Date.now() if (now - prev >= delay) { fn.apply(context, arg) prev = Date.now() } }}function fn () { console.log('节流')}addEventListener('scroll', throttle(fn, 1000))
20、实现一个防抖函数
// 思路:在规定时间内未触发第二次,则执行function debounce (fn, delay) { // 利用闭包保存定时器 let timer = null return function () { let context = this let arg = arguments // 在规定时间内再次触发会先清除定时器后再重设定时器 clearTimeout(timer) timer = setTimeout(function () { fn.apply(context, arg) }, delay) }}function fn () { console.log('防抖')}addEventListener('scroll', debounce(fn, 1000))
20道JS原理题助你面试一臂之力!相关推荐
- 这些面试题助你面试一臂之力
前端面试题助你面试一臂之力 1.SPA(单页应用)首屏加载速度慢怎么解决? 2.什么是强缓存和协商缓存? 3.说说React jsx转换成真实DOM的过程? 4.bind.call.apply 区别? ...
- 看你能答对几道JS代码题
有些代码题前面打了问号?本人是有点不是很清楚,但结果都是一个一个在VScode上试过的,就是不知道怎么解析结果,欢迎大家在评论区评论!!! 目录 No.1 No.2 No.3 No.4 No.5 扩展 ...
- 前端技巧|vue双向绑定原理,助你面试成功
在面试一些大厂的时候,面试官可能会问到你vue双向数据绑定的原理是什么?有些小伙伴不知道是什么东西,这样你在面试官的眼里就大打折扣了.今天小千就来给大家介绍一下vue的双向绑定原理,千万不要错过啦. ...
- 紧急整理了 20 道 Spring Boot 面试题,我经常拿来面试别人
转载自 紧急整理了 20 道 Spring Boot 面试题,我经常拿来面试别人 面试了一些人,简历上都说自己熟悉 Spring Boot, 或者说正在学习 Spring Boot,一问他们时,都只 ...
- 金三银四面试季—20道精选JVM重点面试问题!
JVM 是小白 Java 程序员成长路上的一道坎也是很多工作2到3年程序员的一个重点面试问题之一,学习JVM之前,只需要知道代码编译成 Class,虚拟机加载 Class 运行就可以了,学习 JVM ...
- k8s相关面试问题_最常被问到的20道Kubernetes面试题
原标题:最常被问到的20道Kubernetes面试题 近一年参与了多场面试,设计了多道面试题,觉得可以综合考察应聘人对Kubernetes的掌握情况.笔者一般会在面试前,将题目直接发给候选人,以便其有 ...
- c语言红酒编程题,20道葡萄酒小测试题,你都做对了吗
大家对葡萄酒的认识有多少?都掌握了多少关于葡萄酒的知识呢?葡萄酒的历史可以算得上悠久的,而且还蕴含了不同的文化.小编现在有20道测试题,每一题都是5分,大家做看看,看一下大家都能得到多少分?由此来检验 ...
- js相关面试题20道
21. for in.Object.keys 和 Object.getOwnPropertyNames 对属性遍历有什么区别? for in 会遍历自身及原型链上的可枚举属性 Object.keys ...
- 20道经典C语言编程题(初级)
编者按:以下20道题目为自己练习所写的代码,均已提交检测通过,其中有些题也许有更优的解法,所以写的不好望读者包涵,由于个人练习,所以没有写注释,有什么问题的地方,可以留言一起交流学习. ------- ...
最新文章
- 把自己分支的内容合并到主分支上
- MongoDB分布式原理以及read-preference和readConcern解决读写一致性问题
- 算法学习之路|完美数列
- EditText 中文文档
- go语言基础之递归函数的调用流程
- 【留用】C#的一些好的书籍
- PostgreSQL 前世今生
- 【TweenMax】实例TimelineMax
- 利用数据的商业智能分析工具
- Unreal、CryEngine、Gamebryo引擎介绍
- 李宏毅机器学习——线性回归
- PTA 程序设计天梯赛(141~160题)
- 网页怎么调用云服务器资源,如何将网页资源放到云服务器
- 2019年计算机二级考试mysql_2019年下半年计算机二级MySQL试题
- 【经验分享】58个硬件工程师基础知识面试题
- mingw+msys windows下配置
- 计算机视觉-图像的SIFT特征(尺度空间)
- 计算机系统的储存单位及换算关系,计算机储存单位和换算关系
- 赛普拉斯PSoC6正式接入阿里云Link TEE加强物联网应用的安全设计...
- dtoj#4259. 越野赛车问题
热门文章
- Alsa中PCM参数设置
- Linux下c开发 之 线程通信(转)
- 运放的主要参数详细介绍
- 玩转C#窗体-属性、方法和事件详细说明
- Visual Studio 快捷键使用方法
- python从date目录导入数据集_使用python划分数据集
- wpf window 不执行show 就不能load执行_Numpy反序列化命令执行漏洞分析(CVE-2019-6446)附0day...
- SDM For Face Alignment 流程介绍及Matlab代码实现之训练篇
- 1加6投屏_6月1日起驾考要加项目?真相是这样
- 计算机意外重启或遇错误无法继续,计算机意外地重新启动或遇到错误如何解决?...