最新的前端面试要点(手写)

手写篇

  1. 手写 instenceof
    原生的 instanceof

    手写 myInstanceof :
    在这里插入图片描述
    实现原理:

通过不断的沿着原型链查找,如果找到顶端了即: proto === null ,那么就说明没有找到,返回false,说明 left 不是 right 构造函数的实例

如果找到隐式原型 proto 等于构造函数的原型 prototype ,那么说明 left 是 right 构造函数的实例,返回true

其它情况就是不断的改变 proto ,以便可以不断的往上查找

  1. 手写 flat
    原生示例:

在这里插入图片描述
手写 flatDeep:
在这里插入图片描述
实现原理:

第一个参数是数组,第二个是降维层级,

用for循环遍历这个数组,检测每一项

如果这项是不是数组则直接添加到 ret 结果数组里面

否则根据降维层级判断,默认是降一维层级,当递归降维不满足 ret>0 ,说明已经达到dep降维层数了,其它情况即 ret.push(arr[i])

  1. 手写 call

在这里插入图片描述
bat一线互联网面试真题详解企业及项目开发实战详解
可以添加前端学习群:1017810018 大家一起学习
小助理微信:hxhn_7758
lyf___1201
实现原理:

函数的原型方法call 第一个参数是传入的执行上下文,后面传入的都是参数,以逗号隔开

当传入的是null或undefined是执行上下文是指向 window ,否使为传入的对象,然后再传入的对象身上添加 fn 属性并把函数实例say函数赋值给fn,此时变成

var obj = {name:‘innerName’,fn:function say(){console.log(this.name)}} 此时 context 就是obj对象啦,所有你执行 context.fn(…args)

其实就是 obj.fn(…args) , fn 其值是 function say(){ console.log(this.name) } ,所以这个 this 就变成 obj 对象了

然后就是结果赋值,对象还原

返回结果

  1. 手写 apply
    在这里插入图片描述
    同 myCall 实现原理大致相同,不同的是由于 call 和 apply 的传参方式不一样,

我们需要额外的对第二个参数做判断, apply 受参形式是数组,且再第二个参数位置,

一:如果第二个参数存在,执行的时候就把第二个参数(数组形式)用扩展运算符打散后传入执行

二:如果第二个参数不存在,执行执行

其它就于 call 的实现一样

  1. 手写 bind
    在这里插入图片描述
    bind 的手写实现,与其它两个区别是返回一个函数,并没返回函数执行的结果,并且受参形式不受限制

实现原理:

通过 Object.create 方法创建一个新对象,使用现有的对象来提供新创建的对象的 proto ,通过 中介对象 o 来实现,来达到不影响传入的对象

  1. 手写 new
    new 一个函数的时候,会生成一个实例,该实例的隐式原型 proto ===该函数的 prototype 原型对象

在构造函数中this指向当前实例

最后再将实例对象返回
在这里插入图片描述
检测:
在这里插入图片描述
bat一线互联网面试真题详解企业及项目开发实战详解
可以添加前端学习群:1017810018 大家一起学习
小助理微信:hxhn_7758
lyf___1201

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值