前端面试常见手写题整理

妖狐艹你老母 2022-12-15 12:59 222阅读 0赞

# 前端面试手写题 #

整理前端面试常见的手写题，面试出现概率极高，建议每个都过自己过一遍，加深印象。

你可以 watch 一下这个 [GitHub 仓库][GitHub]，会持续收集、整理和维护。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70_pic_center]

### 实现 bind() ###

Function.prototype.MyBind = function (context, ...args) { 
      let self = this;
      return function() { 
        return self.apply(context, args);
      }
    }
    
    // test
    let a = { name: 'jack'} 
    let test = function() { 
      console.log(this.name); // jack
    }
    let rs = test.MyBind(a);
    rs();

### 实现 apply() ###

Function.prototype.myApply = function (context, args) { 
      context.fn = this;
      let res;
      if (!args){ 
        res = context.fn();
      } else  { 
        res = context.fn(...args)
      }
      return res;
    }
    
    // test
    let obj = { 
      name: 'jack'
    }
    function test(arg1, arg2, arg3) { 
      console.log(this.name)   // jack
      console.log(arg1, arg2, arg3);  // 1 2 3
    }
    test.myApply(obj, [1,2,3]);

### 实现 call() ###

Function.prototype.myCall = function (context, ...rest) { 
      context.fn = this;
      var result = context.fn(...rest);
      delete context.fn;
      return result;
    }
    
    // test
    let obj = { 
      name: 'jack'
    }
    function test(arg1, arg2, arg3) { 
      console.log(this.name)   // jack
      console.log(arg1, arg2, arg3);  // 1 2 3
    }
    test.myCall(obj, 1,2,3);

### 实现 instanceof ###

function myInstanceOf(left, right) { 
      let prototype = right.prototype;
      left = left.__proto__;
      while(true) { 
        if (!left) return false;
        if (left == prototype) return true;
        left = left.__proto__;
      }
    }
    
    console.log(myInstanceOf([], Array));  // true

### 实现 new ###

### 实现 jsonp ###

var newscript = document.createElement('script');
    newscript.src = 'https://www.adb.com?callback=fn'
    document.body.appendChild(newscript);
    function fn(data) { 
      console.log(data);
    }

### 实现 Promise ###

### 实现 Promise.all() ###

### 实现 Promise.race() ###

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

### 实现 EventEmitter 订阅监听模式 ###

class EventEmitter { 
      constructor() { 
        this.events = { };
      }
      on (eventName, callback) { 
        if(!this.events[eventName]) { 
          this.events[eventName] = [callback];
        } else { 
          this.events[eventName].push(callback);
        }
      }
    
      emit(eventName, ...args) { 
        this.events[eventName].forEach(fn => fn.apply(this, args));
      }
    
      once(eventName, callback) { 
        const fn = () => { 
          callback();
          this.remove(eventName, fn);
        }
        this.on(eventName, fn)
      }
    
      remove(eventName, callback) { 
        this.events[eventName] = this.events[eventName].filter(fn => fn != callback);
      }
    }

### setTimout 实现 setInterval ###

function myInterval(fn, time) { 
      let context = this;
      setTimeout(() => { 
        fn.call(context);
        myInterval(fn, time);
      }, time);
    }

### 深拷贝 ###

### 数组拍平 ###

### 函数防抖 ###

### 函数节流 ###

### 函数柯里化（实现 sum(1,2)(3)()） ###

### 快速排序 ###

### 归并排序 ###

[GitHub]: https://github.com/Mayandev/fe-interview-handwrite
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a87812188b9e4b27823c574f982fad88.png