前端进阶高薪必看-手写源码

前言

此系列作为笔者之前发过的前端高频面试整理的补充 会比较偏向中高前端面试问题 当然大家都是从新手一路走过来的 感兴趣的朋友们都可以看哈

初衷

我相信不少同学面试的时候最怕的一个环节就是手写代码 大家一定听过这句话talk is cheap, show me the code 没事 此文章不仅包含了前端经典的手写源码面试题 还包含了大量的分析和引导 希望能帮助大家更好的食用(欢迎评论 不定时更新补充题库)

注意

本文所有的手写源码实现都是基于 es6 的 不想用原生去实现原因如下:一方面是网上太多原生实现的方案了 另一方面是我们要面向未来编程 多使用 es6 的特性更加贴合实际工作

1 promise

先思考?

  1. promise 是什么?

异步回调解决方案

  1. promise 是什么?

异步回调解决方案

  • promise 如何保证异步执行完了再去执行后面的代码?

使用 then 关键字 then 接受两个参数 第一个参数(函数)会在 promise resolve 之后执行 第二个参数(函数)会在 promise reject 之后执行

  1. 为什么能在异步事件执行完成的回调之后再去触发 then 中的函数?

引入事件注册机制(将 then 中的代码注册事件 当异步执行完了之后再去触发事件)

  1. 怎么保证 promise 链式调用 形如 promise.then().then()

每个 then 返回的也是一个 promise 对象

  1. 怎么知道异步事件执行完毕或者执行失败?

需要状态表示

具体实现如下

扩展:如何取消 promise

先思考?

怎么才能取消已经发起的异步呢?

Promise.race()方法可以用来竞争 Promise 谁的状态先变更就返回谁那么可以借助这个 自己包装一个 假的 promise 与要发起的 promise 来实现

具体实现如下

2 防抖节流

先思考

  1. 防抖和节流区别

防抖是 N 秒内函数只会被执行一次,如果 N 秒内再次被触发,则重新计算延迟时间(举个极端的例子 如果 window 滚动事件添加了防抖 2s 执行一次 如果你不停地滚动 永远不停下 那这个回调函数就永远无法执行)

节流是规定一个单位时间,在这个单位时间内最多只能触发一次函数执行(还是滚动事件 如果你一直不停地滚动 那么 2 秒就会执行一次回调)

  1. 防抖怎么保证

事件延迟执行 并且在规定时间内再次触发需要清除 这个很容易就想到了 setTimeout

  1. 节流怎么保证

在单位时间内触发了一次就不再生效了 可以用一个 flag 标志来控制

具体实现如下

防抖节流属于性能优化的一点 更多性能优化扩展请点击 性能优化

前端进阶高薪必看-手写源码

3 EventEmitter(发布订阅模式–简单版)

先思考?

  1. 什么是发布订阅模式

发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到状态改变的通知

  1. 怎么实现一对多

既然一对多 肯定有一个事件调度中心用来调度事件 订阅者可以注册事件(on)到事件中心 发布者可以发布事件(emit)到调度中心 订阅者也可以取消订阅(off)或者只订阅一次(once)

具体实现如下

4 call、apply、bind

先思考?

  1. call 用法

第一个参数 可以改变调用函数的 this 指向 第二个以及之后的参数为传入的函数的参数

  1. 怎么改变 this 指向呢

根据 this 特性 对象的方法调用 那么方法内部的 this 就指向这个对象

  1. 怎么获取传入的不定参数呢

利用 es6 …args 剩余参数获取方法(rest)


具体实现如下

bind 实现 运用原型链相关知识 如果对 js 原型链和继承不是很熟悉 请点传送门

5 new 操作符

先思考?

  1. new 用法是什么?

从构造函数创造一个实例对象 构造函数的 this 指向为创造的实例函数 并且可以使用构造函数原型属性和方法

  1. 怎么实现 this 指向改变?

call apply

  1. 怎么实现构造函数原型属性和方法的使用

原型链 原型继承

具体实现如下

对原型链深入理解学习 建议看看 传送门

6 instanceof

先思考?

  1. instanceof 原理?

右侧对象的原型对象(prototype )是否在左侧对象的原型链上面

  1. 怎么遍历左侧对象的原型链是关键点?

while(true) 一直遍历 直到原型链的尽头 null 都没有相等就说明不存在 返回 false

具体实现如下

7 深拷贝

先思考?

  1. 什么是深拷贝?

js 对引用类型的数据进行复制的时候,深拷贝不会拷贝引用类型的引用,而是将引用类型的值全部拷贝一份,形成一个新的引用类型,这样就不会发生引用错乱的问题,使得我们可以多次使用同样的数据,而不用担心数据之间会起冲突

  1. 怎么样才能全部拷贝?

递归遍历 直到数据类型不是引用类型才进行赋值操作

具体实现如下

扩展:利用JSON的方法实现简单的深拷贝

但是它有局限性

  • 不可以拷贝 undefined , function, RegExp 等等类型的
  • 会抛弃对象的 constructor,所有的构造函数会指向 Object
  • 对象有循环引用,会报错
未经允许不得转载:一点博客-青梅煮码-共享博客 » 前端进阶高薪必看-手写源码
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏