20道JS原理题助你面试一臂之力！

前端张大胖-好文推荐

原文链接：https://juejin.im/post/5d2ee123e51d4577614761f8

前言

本文针对目前常见的面试题，实现了相应方法的核心原理，部分边界细节未处理。后续也会持续更新，希望对你有所帮助。

1. 实现一个call函数

2. 实现一个apply函数

3. 实现一个bind函数

4. instanceof的原理

5. Object.create的基本实现原理

6. new本质

7. 实现一个基本的Promise

8. 实现浅拷贝

9. 实现一个基本的深拷贝

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('获取数据了')	
    return obj.text	
  },	
  set(newVal) {	
    console.log('数据更新了')	
    input.value = newVal	
    span.innerHTML = newVal	
  }	
})	
input.addEventListener('keyup', function(e) {	
  obj.text = e.target.value	
})

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

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>

16. rem实现原理

17. 手写实现AJAX

18. 实现拖拽

19. 实现一个节流函数

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))