前端增长(js应用编码篇)

126 阅读2分钟

实现一个instanceOf方法

function myInstanceOf (L, R) {
    R = R.prototype
    L = L.__proto__
    while(true) {
    	if (L === null) {
        	return false
        }
        if (L === R) {
        	return true
        }
        L = L.__proto__
    }
}

实现一个new方法

function _new (constructor, ...args) {
    let obj = {}
    obj.__proto__ = constructor.prototype;
    let rs = constructor.apply(obj, args)
    return Object.prototype.toString.call(rs) === '[object Object]' ? rs : obj
}

实现一个call,apply,bind方法

call

Function.prototype.myCall = function (obj, ...args) {
    let fnSymbol = Symbol('fn')
    obj[fnSymbol] = this
    let rs = obj[fnSymbol](...args)
    delete obj[fnSymbol]
    return rs
}

apply

Function.prototype.myApply = function (obj, args) {
    let fnSymbol = Symbol('fn')
    obj[fnSymbol] = this
    let rs = obj[fnSymbol](...args)
    delete obj[fnSymbol]
    return rs
}

bind

Function.prototype.myBind = function (obj, ...args) {
    let fnSymbol = Symbol('fn')
    obj[fnSymbol] = this
    return function (..._args) {
        _args = _args.concat(...args)
    	let rs = obj[fnSymbol](..._args)
    	delete obj[fnSymbol]
    	return rs
    }
}

实现一个compose

function compose (...args) {
    return function (value) {
	return args.reverse().reduce((cur, fn) => {
          return fn(cur)
	}, value)
    }
}

实现一个curry

1,获取函数的参数个数

2,检查当前已传入的参数是否和要求的参数个数是否相等,不相等返回一个函数,相等则执行传入函数。

function curry (fun) {
    return function curryFun (...args) {
    	if (fun.length > args.length) {
	    return function () {
            	return curryFun(...args.concat(...arguments))
            }
	}
        return fun(...args)
    }
}

函数防抖?函数节流?

  • 函数节流 指定时间间隔内只会执行一次任务;

等待lock的状态,如果lock状态为true,则不会再次执行语句if (lock) return;后面的内容,直至等待setTimeout函数内容执行完毕,将lock置为false之后,才会再次执行,从而达到减少fn响应次数。

function throttle(fn, interval = 300) {
    let lock = false;
    return function () {
        if (lock) return;
        lock = true;
        setTimeout(() => {
            fn.apply(this, arguments);
            lock = false;
        }, interval);
    };
}
  • 函数防抖 任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。

interval时间内,如果有fn再次触发,则会清除上次的函数执行,重新设置新的延迟函数,如果超过interval事件间隔,则会执行传入的fn函数。

function debounce(fn, interval = 300) {
    let timeout = null;
    return function () {
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, interval);
    };
}

实现flatten函数

function flatten(arr){
    return arr.reduce(function(prev,item){
        return prev.concat(Array.isArray(item)?flatten(item):item);
    },[]);
}

手写深拷贝函数

function deepCopy(obj) {
  if (typeof obj === 'object') {
    var result = obj.constructor === Array ? [] : {};
    
    for (var i in obj) {
      result[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i];
    }
  } else {
    var result = obj;
  }
  
  return result;
}