常见的JS手写函数汇总（代码注释、持续更新）
最近在复习面试中常见的JS手写函数，顺便进行代码注释和总结，方便自己回顾也加深记，内容也会陆陆续续进行补充和改善。
<script> const obj1 = { name: 'Leise', age: 23, address: { country: 'China', city: 'Guanzhou' } } const obj2 = deepClone(obj1) obj2.address.city = 'Hangzhou' console.log(obj1.address.city); console.log(obj2.address.city); function deepClone(obj) { //判断是否为非对象或者是null if (typeof obj !== 'object' || typeof pbj == null) { return obj } // 初始化拷贝结果 let result // 判断是数组还是对象 if (obj instanceof Array) { result = [] } else { result = {} } for (let key in obj) { //保证key不是原型的属性 if (obj.hasOwnProperty(key)) { // 递归调用深拷贝 防止多重嵌套 result[key] = deepClone(obj[key]) } } // 最后返回结果 return result } </script>
二、手写bind函数
<script> Function.prototype.mybind = function () { //原型添加方法mybind const args = Array.prototype.slice.call(arguments) //将获得参数拆解成数组 const t = args.shift() //获取this(数组第一项，同时剔除第一项，shift可以实现) const self = this //当前fn1.bind(...)中的fn1 //console.log(this); //function fn1(a, b, c) { //console.log("this", this); //定义一个变量保留this指向 //console.log(a, b, c); } return function () { //console.log(this);window return self.apply(t, args) //这个函数需要执行 } } function fn1(a, b, c) { console.log("this", this); console.log(a, b, c); } const fn2 = fn1.mybind({ x: 1, y: 2 }, 10, 20, ) //bind之后需要执行 const res = fn2() //保存运行后的结果并打印出来 console.log(res); </script>
三、手写通用事件绑定函数
<script>
function bindEvent(elem, type, selcetor, fn) {
//判断三个还是四个，四个则是事件代理
if (fn == null) {
fn = selcetor
selcetor = null
}
//开始绑定事件
elem.addEventListener(type, event => {
const target = event.target
//判断是事件代理还是普通绑定
if (selector) {
//事件代理
if (target.matches(selcetor)) {
fn.call(target, event)
} else {
fn.call(target.event)
}
}
})
}
function bindEvent(elem, type, selector, fn) {
// 三个参数和四个参数的判断处理
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, event => {
const target = event.target
if (selector) {
// 有selector就是代理
if (target.matches(selector)) {
fn.call(target, event)
}
} else {
fn.call(target, event)
}
})
}
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a',
function (event) {
event.preventDefault()
alert(this.innerHTML)
})
</script>
四、手写闭包的简单应用
<script>
function createCache() {
// 闭包隐藏数据，只提供 API
let obj = {}
return {
set: function (key, value) {
obj[key] = value
},
get: function (key) {
return obj[key]
}
}
}
const c = createCache()
c.set('a', 100)
console.log(c.get('a'))
obj.d = 100 //undefined,必须使用get或者set
</script>
五、手写promise
<script>
function loadImg(url) {
return new Promise((resolve, reject) => {
const img = document.createElement('img')
img.src = url
img.onload = () => {
resolve(img)
}
img.onerror = () => {
reject(new Error("图片加载失败"))
}
})
}
const url1 = 'http://img.mukewang.com/5e5c85e1000116c505400720-156-88.jpg'
const url2 = 'https://img.mukewang.com/szimg/5dba8cee0969880506000338.jpg'
loadImg(url1).then((img1) => {
console.log(img1.width);
return img1
}).then((img1) => {
console.log(img1.height);
return loadImg(url2)
}).then(img2 => {
console.log(img2.width);
})
</script>
六、手写Ajax
<script>
function ajax(url) {
return new Promise((resolve, reject) => {
//判断谷歌等还是IE
let xhr
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest()
} else { // code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
// xhr 具有一个 open 方法，这个方法的作用类似于初始化，并不会发起真正的请求
// open 方法具有 5 个参数，但是常用的是前 3 个
// method： 请求方式 —— get / post
// url：请求的地址
// async：是否异步请求，默认为 true（异步）
xhr.open("get", url, true)
// send 方法发送请求，并接受一个可选参数
// 当请求方式为 post 时，可以将请求体的参数传入
// 当请求方式为 get 时，可以不传或传入 null
// 不管是 get 还是 post，参数都需要通过 encodeURIComponent 编码后拼接
xhr.send(null)
//当readyStatus的状态发生改变时，会触发 xhr 的事件onreadystatechange
xhr.onreadystatechange = () => {
//readyStatus： 请求/响应过程的当前活动阶段
if (xhr.readyState == 4) {
//HTTP 状态在 200-300 之间表示请求成功
// HTTP 状态为 304 表示请求内容未发生改变，可直接从缓存中读取
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
let obj = JSON.parse(xhr.responseText)
// console.log(obj)
// callBack(obj)
resolve(obj)
} else {
reject(new Error("错误"))
}
}
}
})
}
const url1 = "http://jsonplaceholder.typicode.com/users"
const url2 = "/a.json"
const url3 = "/b.json"
ajax(url1).then(res => {
console.log(res);
return ajax(url2)
}).then(res => {
console.log(res);
return ajax(url3)
}).then(() => {
console.log("ok");
}).catch((res) => {
console.log(res) //设置一个统一出口 如果出现错误就终止
})
</script>
七、手写防抖
<script> const input1 = document.getElementById('input1') function debounce(fn, delay) { //timer必须在闭包中 才不会被外面修改 let timer = null return function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, arguments) timer = null }, delay); } } input1.addEventListener('keyup', debounce(function () { console.log(input1.value); }, 500)) </script>
八、手写节流
<script>
function throttle(fn, delay) {
let timer = null
return function () {
if (timer) {
return
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null++
}, delay);
}
}
const one = document.getElementById('one')
one.addEventListener('drag', throttle(function (e) {
console.log(e.offsetX, e.offsetY);
}, 1000))
</script>
