文章目录
1 前言
这篇是根据掘金小册来写的,覆盖不一定全面,但是在前端进阶上有帮助。如有错误,欢迎指正。参考链接 https://yuchengkai.cn/docs/frontend/
2 new
2.1 调用new的过程
1 新生成了一个对象
2 链接到原型
3 绑定this
4 返回新对象
2.2 如何实现new
参考链接 https://github.com/mqyqingfeng/Blog/issues/13
function create() {
//1 创建空对象
var obj = new Object()
//2 链接到原型
//2.1 传入参数第一个就是构造函数 即arguments[0] 同时后面传参需要去掉函数 所以用shift方法
Con = [].shift.call(arguments)
//2.2 真正链接到原型
obj.__proto__ = Con.prototype
//3 绑定this
let res = Con.apply(obj, arguments)
return typeof res === 'object' ? res : obj
}
function Person(name) {
this.name = name
}
console.log(create(Person, 'ljs'))
输出为Person{name:‘ljs’}
最后一步的判断是必要的,否则没有返回值的情况下会返回undefined。如果返回对象不包括所有属性,或者返回的是基本类型值,也会有问题。
3 深浅拷贝
参考链接 https://juejin.im/post/59ac1c4ef265da248e75892b
深浅拷贝是针对引用类型而言的,基本类型值不可变。浅拷贝和赋值也是有区别的。
浅拷贝将A对象复制到B对象中,不包括B对象中的子对象。
深拷贝将A对象复制到B对象中,包括B对象中的子对象。
3.1 如何实现深浅拷贝
浅拷贝:
(1) let b=Object.assign({},a)
(2) let b={…a}
(3) for (var prop in src) {
if (src.hasOwnProperty(prop)) {
dst[prop] = src[prop];
}
}
深拷贝:
(1) JSON.parse(JSON.stringify(object)) 会忽略undefined和symbol,不能序列化函数,不能解决循环引用的对象
(2) jQuery的extend方法
4 防抖节流
之前的文章总结过 https://blog.csdn.net/ChristineAS/article/details/95454485#36__449
防抖 多个动作合并为一个动作
function debounce(fn,wait){
let timeout=null;
return function(){
if(timeout){
clearTimeout(timeout)
}
timeout=setTimeout(fn,wait)
}
}
function hanlde(){
console.log('debounce')
}
window.addEventListener('scroll',debounce(hanlde,1000))
节流 每隔一定时间执行一个动作
function throttle(fn, wait) {
var prev = Date.now()
return function() {
var now = Date.now()
if (now - prev > wait) {
fn()
prev = Date.now()
}
}
}
function handle() {
console.log('throttle')
}
window.addEventListener('scroll', throttle(hanlde, 1000))
5 clientHeight、offsetHeight、scrollHeight
参考 https://github.com/pramper/Blog/issues/10
clientHeight 可视区域高度 包括padding,不包括border、margin、滚动条
offsetHeight 元素本身高度 包括padding,border,滚动条
scrollHeight 元素内容整体高度 包括padding,不包括border、margin
scrollTop 滚动的高度
offsetTop 相对于最近的position不为static的父元素的上偏移距离,没有则指向body
6 JS实现拖拽效果
JS原生
参考 https://x-front-team.github.io/2017/03/01/js%E5%AE%9E%E7%8E%B0%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C/
主要使用clientX、offsetLeft、dragCircle.style.left
H5 drag&drop API
参考 https://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop
draggable=true
οndragstart=drag(event)
event.dataTransfer.setData(‘XXX’,‘XXX’)
οndrοp=drop(event)
event.dataTransfer.getData(‘XXX’)
event.target.appendChild()