前端面试中的各种方法实现

funnyZhang 发布于2019-08-23 14:25 / 2487人阅读

摘要：如果对象的属性值不为的时候，直接复制参数对象的每一个键值到新的对象对应的键值对中。如果您觉得文章还不错，请随手点个赞，您的认同是我的动力

最近在面试，面试官动不动就让写一个原生方法的实现，那咱们就在这里写一下常见的一些实现：

1.bind

Function.prototype.bind2 = function (context) {
    var self = this;
    return function () {
        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.函数节流

function throttle(method,delay){
    var timer=null;
    return function(){
        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];
    }
}

8.单例模式

function A(name){
    // 如果已存在对应的实例
   if(typeof A.instance === "object"){
       return A.instance
   }
   //否则正常创建实例
   this.name = name
   
   // 缓存
   A.instance =this
   return this
}

9.发布订阅模式

 // 事件类
    class EventEmitter {
        constructor () {
            this.events = { } // 事件队列，保存着每一种事件的处理程序
        }
 
        on (type, callback) { // type 要绑定的事件名字， callback 处理程序
            if (this.events[type]) {// 如果事件队列中有这个事件
                // 将此次绑定的处理程序放入进去
                this.events[type].push(callback.bind(this))
                return false
            }
            // 如果没有这个事件，新建
            this.events[type] = [callback.bind(this)]
        }
 
        emit (type, ...args) {
            // 触发事件的时候如果没有事件，报错
            if (!this.events[type]) {
                console.error("type event is not found")
            }else {
                // 挨个执行队列中的处理程序
                this.events[type].forEach(callback => {
                    callback(...args)
                });
            }
        }
    }
 
 
    let bus = new EventEmitter()
 
    bus.on("play", (num1, num2) => {
        alert(123)
    })
 
    bus.on("play", (num1, num2) => {
        alert(456)
        alert(num1 + num2)
    })
 
    bus.emit("play", 1, 2)

总结

以上是面试过程中常见的方法实现，只是简单的实现，面试的各位可以看下准备下。
如果您觉得文章还不错，请随手点个赞，您的认同是我的动力！

GPU云服务器云服务器前端面试前端工程师面试自主设计编程实现遥感图像处理的各种算法前端ddos 攻击面试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100568.html

前端秋招面试总结

摘要：前言秋招宣告结束，面试了接近家公司，有幸拿到，感谢这段时间一起找工作面试的朋友和陪伴我的人。一定要提前准备好，不然面试官叫你说遇到的难点，或者直接问问题时可能会懵逼。前言秋招宣告结束，面试了接近20家公司，有幸拿到offer，感谢这段时间一起找工作面试的朋友和陪伴我的人。这是一段难忘的经历，相信不亚于当年的高考吧，也许现在想起来高考不算什么，也许只有经历过秋招的人才懂得找工作的艰辛...

Gu_Yan 2019-08-02 12:04 评论0 收藏0
前端秋招面试总结

摘要：前言秋招宣告结束，面试了接近家公司，有幸拿到，感谢这段时间一起找工作面试的朋友和陪伴我的人。一定要提前准备好，不然面试官叫你说遇到的难点，或者直接问问题时可能会懵逼。前言秋招宣告结束，面试了接近20家公司，有幸拿到offer，感谢这段时间一起找工作面试的朋友和陪伴我的人。这是一段难忘的经历，相信不亚于当年的高考吧，也许现在想起来高考不算什么，也许只有经历过秋招的人才懂得找工作的艰辛...

Scholer 2019-08-29 17:21 评论0 收藏0
前端面试总结（at, md）

摘要：面试官比较着急了，跟我沟通的时候，我才知道返回值不一定非要跟原生的一样。腾讯一面平常开发怎么设计组件的。总结腾讯面试的感觉就是，没有那么正式，都是部门的技术直接联系的你，然后二面就是部门负责人了，决定了是否入职。引入面试过去了这么久，把八月份面试题和总结发一下吧，虽然年底大家可能都不换工作~ 还是可以看看的。关于面试，引用叶老湿的一句话。你的简历是自己工作的答卷，项目经历是你给面...

zhunjiee 2019-08-22 11:21 评论0 收藏0
java面试总结

摘要：面试总结因为我是开发，所以面试的都是后端开发，只能总结一些这方面的题。因为我也没有面试太多的公司，在小城市，没有太多的大公司，所以总结的只有这些，希望想要换工作的人，提前准备。好久没有更新文章了，不是因为偷懒，是因为忙着准备面试了，现在总结下最近的面试心得，希望对大家有帮助时刻准备着每次入职一个公司，我们都是想着一直干下去的，但是这只不过是我们的一厢情愿罢了，工作中有太多的不可控...

Lionad-Morotar 2019-08-16 18:01 评论0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言，然而，近几年，函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此，...

cfanr 2019-08-20 16:33 评论0 收藏0