手写JavaScript常用函数及操作(基础篇)

🌷这部分是对JavaScript常用的函数、操作符及内置对象的一个总结，例如instanceof、new操作符、防抖函数、call函数等等，面试常考

常用函数和操作符

🔆一些在实际项目中经常用的函数，自己用手写去实现一下，并总结一下相关的知识点

call函数🅰️

💬---在JavaScript中call()是函数对象的一个方法，用于在特定的作用域中调用函数，在指定的this值和参数列表的前提下调用某个函数或方法。

在call方法中可以改变this的指向，可以传入参数列表

Function.prototype.myCall = function(context){
    //检查调用对象是否为函数
    if(typeof this !== "function"){
        console.log("TypeError:The object is not a function")
        return;
    }
    //获取参数列表，去除第一个参数
    let args = Array.from(arguments).slice(1);
    let result = null;
    
    context = context || window;//这是上下文默认为widow对象
    context.fn = this;//将调用对象赋值为上下文的fn属性
    
    //在指定上下文中调用函数，并传入参数列表
    result = context.fn(...args);
    
    delete context.fn;//删除临时属性
    return result;//返回函数调用的结果
}

apply函数🅰️

💬---在JavaScript中，apply()函数是Function对象的一个方法，它允许你在指定的上下文（context）中调用函数，并且传入一个参数数组作为函数的参数列表.

Function.prototype.myApply = function(context){
    if(typeof this !== "function"){
        console.log("TypeError");
        return;
    }
    let result = null;
    context = context || window;
    context.fn = this;
    if(arguments[1]){
        result = context.fn(...arguments[1]);
    }else{
        result = context.fn();
    }
    delete context.fn;
    return result;
}

bind函数🅰️

💬在JavaScript中，bind()函数是Function对象的一个方法，它用于创建一个新的函数，该函数在调用时会将指定的上下文（context）绑定给函数，并且可以预先传入一部分参数。

Function.protoType.myBind = function(context){
    if(typeof this !== "function"){
        console.log("TypeError");
        return;  
    }
    var args = [...arguments].slice(1);
    var fn = this;
    return function Fn(){
        return fn.apply(
            this instanceof Fn ? this:Context,
            args.context(...arguments)
        );
    };
};

防抖函数🅰️

💬在JavaScript中，防抖函数是一种常用的性能优化技术，它可以限制一个函数在短时间内被频繁调用，以减少不必要的重复执行。

防抖函数通常有两种实现方式：立即执行和延迟执行。

1. 立即执行：在触发事件后立即执行函数，然后在间隔时间内不再触发事件时再次执行。如果在间隔时间内再次触发事件，则重新开始计时。

2. 延迟执行：在触发事件后等待一段时间后执行函数，如果在这段时间内再次触发事件，则重新计时。

🌷前者在调用函数后立即执行，而后者是一段时间后再执行

🌷两个函数在间隔或者等待时间被调用都会重新计时

🌷防抖函数在实际开发中常用于处理频繁触发的事件，比如输入框输入事件、窗口大小改变事件等，以减少不必要的重复计算或请求，提升页面性能和用户体验。

Function debounce(fn, wait){
    let timer = null;
    return function(){
        let context = this;
        let args = arguments;
        if(timer){
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(() => {
            fn.apply(context, args);
        }, wait);
    }
    
}

节流函数🅰️

💬节流函数是一种优化技术，它可以限制一个函数在一定时间间隔内只能执行一次，以减少不必要的重复执行。

🌷区别于防抖函数：两者都是优化函数的执行频率，但是防抖函数是延迟执行函数，避免频繁触发，而节流函数是控制执行频率，确保一定时间间隔内只执行一次。

Function throttle(fn, delay){
    let curTimer = Date.now();
    return context(){
        llet context &