前端js面试真题，前端开发今年最常考JavaScript面试题
前端js面试真题，前端开发今年最常考JavaScript面试题
马上就是毕业季了，很多同学都准备实习面试找工作了，今天来分享我在面试的毕业生的时候，会经常考察的16道JavaScript原理题，仅提供相应的核心原理和思路，具体细节大家可以收藏自己敲一遍研究理解。
一定要收藏自己练一遍！理解了才是自己的！
// 思路：将要改变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. 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}5. Object.create的基本实现原理
// 思路：将传入的对象作为原型
function create(obj) {
function F() {}
F.prototype = obj
return new F()
}6. 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__
}
}7. 实现一个基本的Promise
// 未添加异步处理等其他边界情况
// ①自动执行函数，②三个状态，③then
class 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. 使用setTimeout模拟setInterval
// 可避免setInterval因执行时间导致的间隔执行时间不一致
setTimeout (function () {
// do something
setTimeout (arguments.callee 500)
} 500)10. js实现一个继承方法
// 借用构造函数继承实例属性
function Child () {
Parent.call(this)
}
// 寄生继承原型属性
(function () {
let Super = function () {}
Super.prototype = Parent.prototype
Child.prototype = new Super()
})()
// 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
}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) // 1813. 实现一个双向数据绑定
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
})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. 实现一个节流函数
// 思路：在规定时间内只触发一次
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)) 16. 实现一个防抖函数
// 思路:在规定时间内未触发第二次，则执行
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))
