• 前端常见原生方法的实现(bind,promise,new,extends,深拷贝,函数防抖,函数节流)


    前端原生方法的实现,这里写一下常见的一些实现:

    1.bind

    Function.prototype.bind2 = function (context) {
        var self = this;
        returnfunction () {
            self.apply(context);
        }
    
    }
    

    2.promise

    class Promise {
           result: any;
           callbacks = [];
           failbacks = [];
           constructor(fn) {
               fn(this.resolve.bind(this), this.reject.bind(this));
           }
           resolve(res) {
               if (this.callbacks.length > 0) this.callbacks.shift()(res, this.resolve.bind(this), this.reject.bind(this));
           }
           reject(res) {
               this.callbacks = [];
               if (this.failbacks.length > 0) this.failbacks.shift()(res, this.resolve.bind(this), this.reject.bind(this));
           }
           catch(fn) {
               this.failbacks.push(fn);
           }
           then(fn) {
               this.callbacks.push(fn);
               return this;
           }
    
       }
    

    3.new的实现

    function create() {
        // 创建一个空的对象
        let obj = new Object()
        // 获得构造函数
        let Con = [].shift.call(arguments)
        // 链接到原型
        obj.__proto__ = Con.prototype
        // 绑定 this,执行构造函数
        let result = Con.apply(obj, arguments)
        // 确保 new 出来的是个对象
        return typeof result === 'object' ? result : obj
    }
    

    4.函数防抖

    // func是用户传入需要防抖的函数
    // wait是等待时间
    const debounce = (func, wait = 50) => {
      // 缓存一个定时器id
      let timer = 0
      // 这里返回的函数是每次用户实际调用的防抖函数
      // 如果已经设定过定时器了就清空上一次的定时器
      // 开始一个新的定时器,延迟执行用户传入的方法
      return function(...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
          func.apply(this, args)
        }, wait)
      }
    }
    

    5.函数节流

        functionthrottle(method,delay){
            var timer=null;
            returnfunction(){
                var context=this, args=arguments;
                clearTimeout(timer);
                timer=setTimeout(function(){
                    method.apply(context,args);
                },delay);
            }
        }
    

    6.深拷贝

    function deepClone(obj) {
        let result = typeof  obj.splice === "function" ? [] : {};
        if (obj && typeof obj === 'object') {
            for (let key in obj) {
                if (obj[key] && typeof obj[key] === 'object') {
                    result[key] = deepClone(obj[key]);//如果对象的属性值为object的时候,递归调用deepClone,即在吧某个值对象复制一份到新的对象的对应值中。
                } else {
                    result[key] = obj[key];//如果对象的属性值不为object的时候,直接复制参数对象的每一个键值到新的对象对应的键值对中。
                }
    
            }
            return result;
        }
        return obj;
    }
    

    7.extends实现

    //子类  extends  父类
    Function.prototype.extends = function(func, options){
        for(var key in func.prototype){
            this.prototype[key] = func.prototype[key];
        }
        for(var name in options){
            this.prototype[name] = options[name];
        }
    }
    

    总结:以上是常见的方法实现,只是简单的实现

  • 相关阅读:
    git的学习笔记
    软件工程概论第一周综合测验
    人月神话读后感
    软件工程概论通读第十一章
    软件工程概论通读第十章
    软件工程概论通读第九章
    软件工程概论通读第八章
    软件工程概论通读第七章
    软件工程概论通读第六章
    软件工程概论通读第五章
  • 原文地址:https://www.cnblogs.com/ysk123/p/10223594.html
Copyright © 2020-2023  润新知