最近在复习面试中常见的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>