• 手写new函数

function myNew(){
    var obj = new Object()
    var constructor = Array.prototype.shift.call(arguments)
    obj.__propto  = contructor.prototype
    var result = constructor.apply(obj,arguments)
    return typeof result === "Object" ? result : obj
}

• 手写eventbus：

class EventBus {
    constructor(){
		this.eventArr = []
    }
    on(eventName,cb){
		if(this.eventArr[eventName]) this.eventArr[eventName].push(cb)
        else this.eventArr[eventName] = [cb]
    }
    emit(eventName,params){
        if(!this.eventArr[eventName]) console.log("事件不存在")
        else {
			this.eventArr[eventName].map(fn => fn(...params))
        }
    }
    off(eventName){
		if(this.eventArr[eventName]){
            delete this.eventArr[eventName]
        }
    }
}
const eventBus = new EventBus()
export default eventBus

• 手写promise：

//注：promise对象状态与结果只能改变一次
function Promise(executor) {
    //初始哈Promise状态：pending
    this.PromiseState = "pending";
    //定义Promise结果
    this.PromiseResult = null;
    this.callbacks = [];
    //用self接收this指向：Promise构造函数
    const self = this;
    //声明resolve函数
    function resolve(data) {
        //Promise状态只能改变一次
        if (self.PromiseState !== "pending") return;
        self.PromiseState = "fulfilled";
        self.PromiseResult = data;
        //异步任务then方法执行回调
        setTimeout(() => {
            self.callbacks.forEach((item) => {
                item.onresolved(data);
            });
        })
    }

    function reject(data) {
        //Promise状态只能改变一次
        if (self.PromiseState !== "pending") return;
        self.PromiseState = "rejected";
        self.PromiseResult = data;
        //异步任务then方法执行回调
        setTimeout(() => {
            self.callbacks.forEach((item) => {
                item.onrejected(data);
            });
        })
    }
    try {
        //executor构造器，里面为resolve与reject函数
        executor(resolve, reject);
    } catch (error) {
        //当throw抛出错误时进行捕获执行reject回调
        reject(error);
    }
}
//定义Promise对象的then方法
Promise.prototype.then = function (onresolved, onrejected) {
    //用self接收this指向：promise对象
    const self = this;
    //对接收的实参进行判断，如果不是函数则将实参定义为函数并返回该实参
    if (typeof onresolved !== "function") {
        onresolved = (value) => value;
    }
    //对接收的实参进行判断，如果不是函数则将实参定义为函数并返回该实参
    if (typeof onrejected !== "function") {
        onrejected = (reason) => {
            throw reason;
        };
    }
    //then方法返回值是一个promise对象
    return new Promise((resolve, reject) => {
        //声明callback方法实现函数复用
        function callback(type) {
            try {
                //判断返回的promise对象的结果
                let result = type(self.PromiseResult);
                //如果是promise对象则调用then方法，改变promise状态与结果
                if (result instanceof Promise) {
                    result.then(
                        (v) => {
                            resolve(v);
                        },
                        (r) => {
                            reject(r);
                        }
                    );
                } else {
                    //如果不是promise对象则调用resolve函数改变promise对象状态与结果
                    resolve(result);
                }
                //如果是抛出错误则调用reject函数改变promise对象状态与结果
            } catch (error) {
                reject(error);
            }
        }
        //实现then方法异步执行
        if (this.PromiseState === "fulfilled") {
            setTimeout(() => {
                callback(onresolved);
            });
        }
        //实现then方法异步执行
        if (this.PromiseState === "rejected") {
            setTimeout(() => {
                callback(onrejected);
            });
        }
        //每执行一次then方法当promise状态为pending时就将onresolved与onrejected函数放入callbacks中
        if (this.PromiseState === "pending") {
            this.callbacks.push({
                onresolved: function () {
                    callback(onresolved);
                },
                onrejected: function () {
                    callback(onrejected);
                },
            });
        }
    });
};
//promise对象catch方法的实现，当抛出错误时进行捕获执行onrejected函数
Promise.prototype.catch = function (onrejected) {
    return this.then(undefined, onrejected);
};
//promise内置方法resolve实现
Promise.resolve = function (value) {
    //resolve返回结果是一个promise对象
    return new Promise((resolve, reject) => {
        //当传入实参为promise对象时，实参调用then方法改变返回promise对象状态与结果
        if (value instanceof Promise) {
            value.then(
                (v) => {
                    resolve(v);
                },
                (r) => {
                    reject(r);
                }
            );
            //如果实参不是promise对象，执行resolve函数改变返回promise对象状态与结果
        } else {
            resolve(value);
        }
    });
};
//promise内置方法reject实现
Promise.reject = function (reason) {
    //reject返回结果是一个promise对象，直接调用reject方法改变promise结果与状态
    return new Promise((resolve, reject) => {
        reject(reason);
    });
};
//promise内置方法all实现
Promise.all = function (promises) {
    //all返回结果是一个promise对象
    return new Promise((resolve, reject) => {
        //用count进行计数
        let count = 0;
        let arr = [];
        //遍历promises数组
        for (let i = 0; i < promises.length; i++) {
            //数组元素调用then方法，执行resolve函数则count自增
            promises[i].then(
                (v) => {
                    count++;
                    //用arr接收每一个promise调用resolve结果
                    arr[i] = v;
                    //当全部数组元素都执行resolve方法，才会执行resolve方法改变返回promise对象状态与结果
                    if (count == promises.length) {
                        resolve(arr);
                    }
                    //只要执行一次reject方法则直接改变返回promise对象状态与结果
                },
                (r) => {
                    reject(r);
                }
            );
        }
    });
};
//promise内置方法race实现
Promise.race = function (promises) {
    //race方法返回结果是一个promise对象
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            //哪一个数组元素先执行resolve或者reject函数即改变返回promise对象结果与状态
            promises[i].then(
                (v) => {
                    resolve(v);
                },
                (r) => {
                    reject(r);
                }
            );
        }
    });
};

• 手写promise.all：

function all(arr){
	let result = []
    let count = 0
    return new Promise((resolve,reject) => {
        for(let i = 0;i < arr.length;i++){
            Promise.resolve(arr[i]).then(res => {
                result[count] = res
                count++
                if(count == arr.length) return resolve(result)
            },err => {
                reject(err)
            })
        }
    })
}
//测试
let p1 = new Promise(resolve => {
            setTimeout(resolve,200,1)
        });
let p2 = new Promise((resolve, reject) => reject(2))
let p3 = 3;
console.log(all([p1,p2,p3]))

• 手写Promise.race()：

function race(arr){
	return new Promise((resolve,reject) > {
        for(let i = 0;i < arr.length;i++){
            Promise.resolve(arr[i]).then(res => {
                resolve(res)
            },err => {
                reject(err)
            })
        }
    })
}

• 手写Promise.any()：

function any(arr){
    let result = []
    let count = 0
    for(let i = 0;i < arr.length;i++){
        return new Promise((resolve,reject) => {
			Promise.resolve(arr[i]).then(res => {
                resolve(res)
            },err =>{
			   result[count] = err
                count++
                if(count === arr.length) reject(result)
            })
        })
    }
}

• 手写Promise.allSettled()：

function allSettled(arr){
    let result = []
    let count = 0
    return new Promise((resolve,reject) => {
        for(let i = 0;i < arr.length;i++){
              Promise.resolve(arr[i]).then(res =>{
                  result[count] = {
                      status:'fullfilled',
                      result:res
                  }
                  count++
                  if(count === arr.length) resolve(result)
              },err =>{
                  result[count] = {
                      status:'rejected',
                      result:err
                  }
                  count++
                  if(count === arr.length) reject(result)
              })
        }
    })
}

• 手写instanceof：

//手写insatancof
function Instanceof(left,right){
    let left = left._proto_
    while(left){
        if(left === right) return true
        left = left._proto_
    }
    return false
}

• Object相关手写

1、Object.is

Object.is主要解决一下两个问题：

+0 === -0 //true，正常理解应该为false

NaN === NaN //false，正常理解应该为true

const is = (x,y) => {
	if(x === y){
        return x !== 0 || y !== 0 || 1/x === 1/y
    }else {
        return x !== x && y !== y
    }
}

2、Object.assign

该方法用于将所有可枚举属性的值从一个或多个元对象复制到目标对象，它将返回目标对象（浅拷贝）

Object.defineProperty(object,'assign',{
    value:function(target,...args){
        if(target === null || targte === undefined){
            return new TypeError('Cannot convert undefined or null to object')
        }
        const targetObj = Object(target)
        for(const sourceObj of args){
            if(sourceObj !== null) {
				for(const key in sourceObj){
                    if(Object.prototype.hasOwnproperty.call(sourceObj,key)){
                        targetObj[key] = sourceObj[key]
                    }
                }
            }
        }
        return targetObj
    },
    //不可枚举
    enumerable:false,
    //可写
    writable:true,
    //可配置
    configurable:true
})

• 防抖与节流：

防抖实现

所谓防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流实现

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。

//防抖
function debounce(fn,delay){
    var timeout = null
    return function(){
        clearTimeout(timeout) //与节流区别重点在这句
        timeout = setTimeout(() => {
            fn.apply(this,arguments)
        }, delay);
    }
}
function fn1(){
    console.log(aaa)
}
window.addEventListener("scroll",debounce(fn1,5000))

//节流
function throttle(fn,delay){
	let isOpen = true
    return function(){
		if(!isOpen) return
        isOpen = false
		setTimeout(function(){
            fn.call(this,arguments)
            isOpen = true
        })
}
function fn2(){
    console.log('bbb')
}
window.addEventListener("resize",throttle(fn2,5000))

• 数组扁平化：数组扁平化就是把多维数组转化成一维数组。

//数组扁平化
let arr = [1,2,3,[4,5,[6,7]]]
console.log(arr.flat())
console.log(arr.flat(3))

function flatten(arr){
    return arr.reduce((pre,cur) => {
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
    },[])
}


function flatten(arr){
    while(arr.some(item => Array.isArray(item) === true)){
         arr = [].concat(...arr)
    }
    return arr
}

• 深浅拷贝：
• 浅拷贝：仅仅是复制了引用，彼此之间的操作会互相影响

//Object.assign()
let copyObj = Object.assign({},obj)

//lodash.clone
import _ from "lodash"
let copyObj = _.clone(obj)

//展开运算符
let copyObj = {...obj}

//数组的concat方法
let arr = [1,2,3,4]
let copyArr = arr.concat()

//数组的slice方法
let arr = [1,2,3,4]
let copyArr = arr.slice()

//手写浅拷贝
function simpleClone(target) {
    if(typeof target !== "object" || target === null) return target
    var obj = Array.isArray(target) ?[] : {}
    for ( var i in target) {
        if(Object.prototype.hasOwnProperty.call(target,key)){
             obj[i] = target[i];
        }
    }
    return obj;
}

深拷贝：在堆中重新分配内存，不同的地址，相同的值，互不影响

//JSON.parse(JSON.stringify())
//这个方法只能实现数组或对象的浅拷贝

//lodash.cloneDeep
import _ from "lodash"
let copyObj = _.cloneDeep(obj)

//手写深拷贝 
function deepClone(target,hash = new WeakMap()){
    if(typeof(target) !== "object") return target
    var cloneTarget = target instanceof Array ? [] : {}
    //使用weakMap解决循环引用的问题
    if(hash.get(target)) return hash.get(target)
    else hash.set(target,cloneTarget)
    //由于symbol类型的属性不能被for...in遍历到所以需要特殊处理
    let symbolKeys = Object.getOwnpropertySymbols(target)
    if(symbolKeys.length){
        symbolKeys.forEach(key => {
			if(typeof target[key] == "object" && target[key] !== null){
                cloneTarget[key] = deepClone(target[key],hash)
            }else cloneTarget[key] = target[key]
        })
    }
    //正常对象属性
    for (const key in target) {
        if (target.hasOwnProperty(key)) {
            cloneTarget[key] = typeof(target[key]) === "object" ? deepClone(target[key],hash) : target[key]
        }
    }
    return cloneTarget
}

• apply、call、bind三个方法的区别：

这三个方法都可以显式指定调用函数的this指向，其中apply方法接收两个参数：一个是this绑定的对象，一个是参数数组。call方法接收的参数一个是this绑定的对象，后面的其余参数是传入函数执行的参数，参数是以列举的形式传进去的；bind方法通过传入一个对象返回一个this绑定了传入对象的新函数，这个函数的this指向除了使用new时会被改变，其他情况下都不会改变。

• 实现一个apply函数：

function myApply(){
	if(typeof this !== "function") return console.log("type error")
    let context = argements[0]
    let self = this
    context.fn = self
    //因为传入的第二个参数是数组，所以直接用扩展运算符生成参数序列即可
 	context.fn(...arguments[1])
    delete context.fn
}

• 实现一个call函数：

function myCall(){
    if(typeof this !== "function) return console.log("type error")
    const args = Array.prototype.slice.call(auguments)
    //新this的值
    let context = args.shift()
    //旧this就是要执行的函数
    let self = this
    //把函数作为新this的方法，这样调用时this默认指向新this
    context.fn = self
    context.fn(...args)
    //函数执行完毕后删除新this中的fn方法
    delete context.fn
}

• 实现一个bind函数

原理：通过apply或call方法实现

//由于在new一个bind过生成的新函数时，必须的条件就是要继承原函数的原型
Function.prototype.bind = function(){
    //将类数组参数转换为数组
	const arg = Array.prototype.slice.call(arguments)
    //获取传进的新对象，新的this
    const t = arg.shift()
    //获取旧的this，一个函数
    const self = this
    //定义返回的函数
    return function(newArg){
        //新函数可能传入新的参数，需要与旧参数进行拼接
        arg = arg.concat.calll(Array.prototype.slice.call(newArg))
        //新函数里需要保持跟旧函数一样的返回值,所以需要执行旧函数，使用apply改变this的值
        return self.apply(t,arg)
}

• 用setTimeout实现setInterval：

function mySetTimeout(fn,millisec){
	function interval(){
        setTimeout(interval,millisec)
        fn()
    }
    setTimeout(interval,millisec)
}

• 使用requestAnimationFrame实现定时器：

//建立定时器
function setIntervalPrecision(callback,delay){
	let obj = window.intervalPrecisionObj || (window.intervalPrecisionObj = {num:0})
    obj.num++
    obj['n' + obj.num] = true
    let intervalId = obj.num
    //开始时间
    let startTime = +new Date()
    //已执行次数
    let count = 0
    //延迟时间
    delay = delay | 0
    (function loop(){
        //定时器被清除，则终止
        if(!obj['n' + intervalId]) return 
        //满足条件执行的回调
        if(+new Date() > startTime + delay * (count + 1)){
            count++
            callback(count)
        }
        requestAnimationFrame(loop)
    })()
    return intervalId
}

//销毁定时器
function clearIntervalPrecision(intervalId){
    if(window.intervalPrecisionObj){
		delete window.intervalPrecisionObj['n' + intervalId]
    }
} 

• 手写JSONP：

const jsonp = ({
    url,
    params,
    callbackName
}) => {
    const generateUrl = () => {
        let dataSrc = ""
        for(let key in params){
			if(Object.prototype.hasOwnProperty.call(params,key)){
                dataSrc += `${key}${params[key]}&`
            }
        }
        dataSrc += `callback=${callbackName}`
        return `${url}?${dataSrc}`
    }
    return new Promise((resolve,reject) => {
        const scriptEle = document.createElement('script')
        scriptEle.src = generateUrl()
        document.body.appenChild(scriptEle)
        window[callbackName] = data => {
            resolve(data)
            document.removeChild(scriptEle)
        }
    })
}

• 手写原生AJAX：

var AJAX = {
	get : function(url,callback){
		//1、创建一个XMLHttpRequest对象，即异步请求对象
		var xhr = new XMLHttpRequst()
		//2、创建一个HTTP请求并配置请求方法，url和验证方法
		xhr.open("GET",url,false)
		//3、设置http响应状态改变的函数
		xhr.onreadystatechange = function(){
        //readyState:0(还没有调用open()) 1（请求已经建立，但是没有发送，即没有调用send()） 2（请求已发送，正在处理中） 3（请求在处理中，但是服务器还没有完成响应的生成） 4（响应已完成，可以获取并使用服务器的响应）
			if(xhr.readyState == 4){
				if(xhr.status === 200){
					//5、拿到请求的数据	
					console.log(responseText)
				}
			}
		// 设置请求失败时的监听函数
        xhr.onerror = function() {
          console.error(this.statusText);
        };
        // 设置请求头信息
        xhr.responseType = "json";
        xhr.setRequestHeader("Accept", "application/json");
            
		//4、发送http请求
		xhr.send()
         //5、取消请求
        xhr.abort()
	}
}

• 手写axios取消请求：

1、使用工厂函数CanceToken创建cancel token
const CancelToken = axios.CancelToken
const source = CancelToken.source()
axios.get("user",{
    cancelToken:source.token
})
source.cancel("参数是可选的")

//2、可以通过传递一个executor函数到cancelToken的构造函数来创建一个cancel token：
const CancelToken = axios.CancelToken
let cancel
axios.get("user",{
    cancelToken:new CancelToken(function executor(c){
		cancel = c
    })
})
cancel()

//3、从V0.22.0开始，axios支持以AbortController取消请求
const controller = new AbortController()
axios.get("user",{
    signal:controller.signal
}).then((res) =>{
	...
})
controller.abort()

• 说说函数柯里化：

柯里化：指的是一个接受多个参数的函数转变为接受一个参数返回一个函数的固定形式，从而便于再次调用。

实现参数定长的柯里化：

function curry(fn){
    //获取fn的参数个数
    const argLen = fn.length
    //保存预置参数
    const presetArgs = [].slice.call(arguments,1)
    return function(){
        //获取新函数的参数
        cosnt resetArgs = [].slice.call(arguments)
	    const allArgs = [...presetArgs,...resetArgs] 
        //如果参数数量到达，则执行原函数
        if(allArgs.length >= argLen){
            return fn.apply(this,allArgs)
        }else{
            //否则继续柯里化
            return curry.call(null,fn,...allArgs)
        }
    }
}

实现参数不定长的柯里化：

function curry(fn){
    const presetArgs = [].slice.call(auguments,1)
    function curried(){
		const resetArgs = [].slice.call(auguments)
        const allArgs = [...presetArgs,...resetArgs]
        return curry.apply(null,fn,arguments)
    }
    //重写curried的toString方法，可以通过返回的函数名获得函数执行结果
    curried.toString = function(){
        return fn.apply(null,presetArgs)
    }
}

作用：

1、使函数的职责单一化，将每次传入的参数在单一的函数中进行处理后在下一个函数中使用处理后的结果，而不是所有的参数一次传入：

function add(x){
	x ++
    return function(y){
		y *= 2
        return function(z){
			z++
            return x + y + z
        }
    }
}
console.log(add(1)(2)(3))

2、进行参数复用，如先传入一个后续调用都需要的函数参数，在之后使用返回的函数时就不需要再传入此参数

function fn(num){
    retrun function(count){
		return num - count
    }
} 
let sub = fn(100)
console.log(sub(10)) //90
console.log(sub(20)) //80

3、打印日志时实现柯里化：

function log(data,importance,message){
    alert(`[${data.getHours()}:${data.getMinutes()}][${importance} ${message}]`)
    let logNow = log(new Date())
}
logNow("Info","message") //[HH:MM][Info message]

例子：实现一个add 函数，同时支持add(1, 2, 3); add(1, 2)(3); add(1)(2, 3);

//主要思路：要判断当前传入函数的参数个数是否大于等于原函数所需参数的个数，如果是则执行当前函数，如果是小于，则返回一个函数
const curry = (fn,...args) => {
    return args.length >= fn.length ? fn(...args) : (..._args) => curry(fn,...args,..._args)
}
function add(x,y,z){
	return x + y + z
}
const add = curry(add)
console.log(add(1,2,3))
console.log(add(1,2)(3))
console.log(add(1)(2)(3))