js八股文心得体会

// js构造函数与ES6中class类
// 1.两者的语法
// function AddHandle(x = 1, y = 0) {
//     this.x = x
//     this.y = y
// }
// AddHandle.prototype.addFn = function() {
//     return this.x + this.y
// }
// class AddHandleClass {
//     constructor(x, y) {
//         this.x = x
//         this.y = y
//     }
//     addFnClass() {
//         return this.x + this.y
//     }
// }
// const m = new AddHandle(5, 6)
// const m1 = new AddHandleClass(6, 5)
// console.log(m1);
// console.log(m1.addFnClass());
// console.log(m);
// console.log(m.addFn());
// 2.js 继承
// 2.1 构造函数实现继承
console.log('==============================构造函数实现继承==============================');

function Animal(name) {
    this.name = name
    this.eat = function() {
        console.log(`${this.name}吃东西`);
    }
}

function Dog(name) {
    this.name = name
    this.bark = function() {
        console.log(`${this.name}bark!`);
    }
}

const pig = new Animal('小猪')
console.log('构造函数创建的：' + pig.name);
console.log('构造函数创建的方法：')
pig.eat()

// 构造函数实现继承 :通过原型继承
Dog.prototype = new Animal()

const dog1 = new Dog('小狗')
console.log('构造函数继承：' + dog1.name);
console.log('构造函数创建的方法：')
dog1.eat()
console.log('构造函数创建的方法：')
dog1.bark()


// 2.2 class类实现继承
console.log('==============================class类实现继承==============================');
class AnimalClass {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name}：吃东西`);
    }
}

class DogClass extends Animal {
    constructor(name) {
        super(name)
        this.name = name
    }
    say() {
        console.log(`DogClass：${this.name} 汪!汪!汪！`);
    }
}

const dogClassN = new DogClass('class中狗')
console.log(dogClassN);
dogClassN.say()
dogClassN.eat()


// 函数柯里化
// // 普通函数一般写法、
// function fnP(a, b, c) {
//     return a * b * c
// }
// // 函数柯里化展开参数
// function fn(a) {
//     return function (b) {
//         return function (c) {
//             return a * b * c
//         }
//     }
// }
// console.log(fnP(2, 3, 4));
// console.log(fn(2)(3)(4));
// 防抖节流
// 1.防抖对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。
// 1.1 定义防抖函数

function debounce(callBack, delay) {
    let t
    return () => { //借助闭包
        if (t) {
            clearTimeout(t)
        }
        t = setTimeout(callBack, delay);
    }
}
// 实例调用
function showScrollTop() {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;　　
    console.log('当前滚动条位置为：' + scrollTop);
}
onscroll = debounce(showScrollTop, 1000)
const elBtn2 = document.getElementById('btn2')

elBtn2.addEventListener('click', debounce(submit2, 3000))

function submit2() {
    console.log('防抖@@@@@@@@@@@@@@+提交。。。。');
}



// 2.节流 =>类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）。

function throttle(callBack, delay) {
    let flag = true
    return function() {
        if (!flag) {
            // 不执行，不提交数据
            console.error('提交太频繁了，请稍后再试！');
            return false
        }
        flag = false
        setTimeout(() => {
            callBack()
            flag = true
        }, delay);
    }
}
const elBtn = document.getElementById('btn')
btn.addEventListener('click', throttle(submit, 5000))

function submit() {
    console.log('节流$$$$$$$$$,提交中');
}


// 防抖节流区别：
// 1.防抖：用于用户在短时间内（设定的预期时间段内）只允许执行一次  }}||函数在用户疯狂操作'中'只触法只一次
// 2.节流：用于限制用户再预设的时间内触发||只要用户不停点击，函数会在设定事件内触发多次

防抖节流中立即执行

**
 * @description: 
 * @param {*} fn
 * @param {*} time
 * @param {*} type 1表示立即执行，其他表示非立即执行
 * @return {*}
 */
function debounce2(fn, time, type) {
    if (type == 1) {
        let timer = null;
        let canRun = true;
        return function() {
            if (timer) {
                clearTimeout(timer);
                canRun = false;
            }
            timer = setTimeout(() => {
                timer = null;
                canRun = true;
            }, time)
            canRun && fn(...arguments)
        }
    } else {
        let timer = null;
        return function() {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn(...arguments)
                timer = null
            }, time)
        }
    }
}

// 实例调用


let btn22 = document.getElementById('btn2')
btn22.addEventListener('click', debounce2(submit2, 2000, 1))

function submit2() {
    console.log('防抖@@@@@@@@@@@@@@+提交。。。。');
}

/**
 * @description: 
 * @param {*} fn
 * @param {*} time
 * @param {*} type 1表示立即执行，其他表示非立即执行
 * @return {*}
 */
function throttle2(fn, time, type) {
    let canRun = true;
    if (type == 1) {
        return function() {
            if (canRun) {
                fn(...arguments);
                canRun = false;
                setTimeout(() => {
                    canRun = true
                }, time)
            } else {
                console.error('提交太频繁了，请稍后再试！');
            }
        }
    } else {
        return function() {
            if (canRun) {
                canRun = false;
                setTimeout(() => {
                    fn(...arguments)
                    canRun = true
                }, time)
            }
        }
    }
}


let bb2 = document.getElementById('btn')
bb2.addEventListener('click', throttle2(submit2, 2000, 1))

function submit2(a = 1, b = 2) {
    console.log('节流$$$$$$$$$,提交中');
}