侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

20道JS原理题助你面试一臂之力(必看)

前端  /  管理员 发布于 5年前   179

前言

本文针对目前常见的面试题,仅提供了相应的核心原理及思路,部分边界细节未处理。后续会持续更新,希望对你有所帮助。

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的原理

// 思路:右边变量的原型存在于左边变量的原型链上function instanceOf(left, right) { let leftValue = left.__proto__ let rightValue = right.prototype while (true) { if (leftValue === null) {  return false } if (leftValue === rightValue) {  return true } leftValue = leftValue.__proto__ }}

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

// 未添加异步处理等其他边界情况// ①自动执行函数,②三个状态,③thenclass Promise { constructor (fn) { // 三个状态 this.state = 'pending' this.value = undefined this.reason = undefined let resolve = value => {  if (this.state === 'pending') {  this.state = 'fulfilled'  this.value = value  } } let reject = value => {  if (this.state === 'pending') {  this.state = 'rejected'  this.reason = value  } } // 自动执行函数 try {  fn(resolve, reject) } catch (e) {  reject(e) } } // then then(onFulfilled, onRejected) { switch (this.state) {  case 'fulfilled':  onFulfilled()  break  case 'rejected':  onRejected()  break  default: } }}

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

// 组件通信,一个触发与监听的过程class EventEmitter { constructor () { // 存储事件 this.events = this.events || new Map() } // 监听事件 addListener (type, fn) { if (!this.events.get(type)) {  this.events.set(type, fn) } } // 触发事件 emit (type) { let handle = this.events.get(type) handle.apply(this, [...arguments].slice(1)) }}// 测试let emitter = new EventEmitter()// 监听事件emitter.addListener('ages', age => { console.log(age)})// 触发事件emitter.emit('ages', 18) // 18

13. 实现一个双向数据绑定

let obj = {}let input = document.getElementById('input')let span = document.getElementById('span')// 数据劫持Object.defineProperty(obj, 'text', { configurable: true, enumerable: true, get() { console.log('获取数据了') return obj['text'] }, set(newVal) { console.log('数据更新了') input.value = newVal span.innerHTML = newVal }})// 输入监听input.addEventListener('keyup', function(e) { obj.text = e.target.value})

完整实现可前往之前写的:这应该是最详细的响应式系统讲解了

14. 实现一个简单路由

// hash路由class Route{ constructor(){ // 路由存储对象 this.routes = {} // 当前hash this.currentHash = '' // 绑定this,避免监听时this指向改变 this.freshRoute = this.freshRoute.bind(this) // 监听 window.addEventListener('load', this.freshRoute, false) window.addEventListener('hashchange', this.freshRoute, false) } // 存储 storeRoute (path, cb) { this.routes[path] = cb || function () {} } // 更新 freshRoute () { this.currentHash = location.hash.slice(1) || '/' this.routes[this.currentHash]() } }

15. 实现懒加载

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;')  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个必会的JavaScript面试题(小结)
  • 送你43道JS面试题(收藏)
  • 一些可能会用到的Node.js面试题
  • JS面试题大坑之隐式类型转换实例代码
  • 13道关于JavaScript正则表达式的面试题
  • 详解JS中的this、apply、call、bind(经典面试题)
  • 关于javascript作用域的常见面试题分享
  • JS搜狐面试题分析


  • 上一条:
    javascript自定义日期比较函数用法示例
    下一条:
    jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客