您现在的位置是:首页 > 文章列表 > JavaScript > 面试常问的20题JS原理题赶快收藏
面试常问的20题JS原理题赶快收藏
面试常常出错,问问题常常答不上来怎么办,赶紧收藏这20道js原理吧,能在你面试的时候助你一臂之力~~
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('获取数据了')
},
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、实现一个简单路由
// 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、实现懒加载
<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))
阅读排行
-
基于 Vue 和 TS 的 Web 移动端项目总结
动端 web 最佳实践,基于vue-cli3[3]搭建的typescript[4]项目,可以用于 hybrid 应用或者纯 ...
-
Vue 的最佳使用方法
Vue框架,是我国内最受欢迎的前端框架之一,也许你的项目正在使用,也许你还在了解正准备上手...
-
FastClick是什么?一文搞懂原理解析
为什么要用FastClick在移动端H5开发过程中,关于点触可能会遇到如下两个问题:手动点击与真正...
-
10 种跨域解决方案
说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了...
-
一文彻底弄懂Event Loop!
我们在学习浏览器和NodeJS的EventLoop时,往往是阅读大量文章,多篇文章凑在一起综合来看,才...
-
100行代码实现canvas文字粒子效果,简单易懂。
canvas是使用JavaScript程序绘图(动态生成),相比于css,可以更加简单方便的绘制细节的样式...
-
提升CSS技能的20个小技巧
随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样...
-
生活中常用正则表达式
很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是...
本栏推荐
-
一文彻底弄懂Event Loop!
我们在学习浏览器和NodeJS的EventLoop时,往往是阅读大量文章,多篇文章凑在一起综合来...
-
10 种跨域解决方案
说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着...
-
生活中常用正则表达式
很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来...
-
100行代码实现canvas文字粒子效果,简单易懂。
canvas是使用JavaScript程序绘图(动态生成),相比于css,可以更加简单方便的绘制细节...
官方微信
