【前端面试题】每日一个前端面试专题

一、typeof 与 instanceof 区别?如何instanceof的原理

问题回答思路
  1. typeof和instanceof 都可以检测数据类型,typeof检测如果是基本数据类型返回对应的结果。如果检测是对象的话,默认返回一个object,所以无法区分那种对象。

    typeof 数据
    
  2. instanceof是用于判断指定的数据,是否满足和指定构造函数匹配,只要匹配就说明他是同一种数据类型,主要用于判断对象的类型,无法用于基本数据类型,基本数据类型不存在构造器

    [] instanceof Array
    {} instanceof Object
    
回答原理

instanceof的原理就是获取左边数据的构造函数,用于和右边(指定的构造函数)进行判断是否相等。

如果左边获取到的构造函数不等于右边,并不会马上结束,循环继续找对象的原型的函数是否和右边相等,直到找完了原型链对象,都匹配不了,返回false

代码复现:

function myInstanceof(left, right) {
    // 这里先用typeof来判断基础数据类型,如果是,直接返回false
    if(typeof left !== 'object' || left === null) return false;
    // getProtypeOf是Object对象自带的API,能够拿到参数的原型对象
    let proto = Object.getPrototypeOf(left);
    while(true) {                  
        if(proto === null) return false;
        if(proto === right.prototype) return true;//找到相同原型对象,返回true
        proto = Object.getPrototypeof(proto);
    }
}

二、bind、call、apply 区别?如何实现一个bind?

回答思路

从上面可以看到,applycallbind三者的区别在于:

  • 三者都可以改变函数的this对象指向
  • 三者第一个参数都是this要指向的对象,如果如果没有这个参数或参数为undefinednull,则默认指向全局window
  • 三者都可以传参,但是apply是数组,而call是参数列表,且applycall是一次性传入参数,而bind可以分为多次传入
  • bind是返回绑定this之后的函数,applycall 则是立即执行

三、说说 JavaScript 中内存泄漏的几种情况?

内存泄漏不等于内存溢出。完全两个概念。内存泄漏可能导致内存溢出

回答思路

内存泄漏指的就是代码运行过程中,变量使用完毕后无法被垃圾回收机制销毁(回收)。一直占这内存。这种情况称为内存泄漏。

常见的内存泄漏:

  1. 使用闭包,导致延长了变量的声明周期,函数调用完成后,变量无法及时被销毁。
  2. 定时器,组件中开启定时器后,离开了这个组件,但是定时器忘记清除,导致内存一直在运行定时器。
  3. 意外的全局变量。定义变量忘记使用var来声明。导致这个变量是全局的。函数被销毁了,变量无法被销毁
  4. dom元素删除:给dom元素绑定了事件,但是dom元素被删除后,事件绑定函数还存在。

四、说说 Javascript 数字精度丢失的问题,如何解决?

标准答案:

在javascript的世界中,所有的数据要进行处理,都要进行二进制的转换。

整数转化为二进制没有任何问题。但是小数转化二二进制就会出现无法整除的情况。

比如:

0.3-0.2 = 0.99999998

本身0.3和0.2

五、大文件上传如何做断点续传?

标准答案:

大文件上传上传遇到的问题,文件过大,上传很慢,上传中途可能出现网络异常、加上暂停功能解决续传的问题。

所以才出现了大文件断点续传。

思路:

  1. 本地通过change事件可以获取文件对象file【size、type、name】

  2. 前端获取file对象后,使用slice对文件进行切片操作。得到多个切片数组。

  3. 前端封装文件上传代码。通过promise.all的方式来进行批量上传。虽然js是单线程的语言。但是浏览器是多线程,可以一次性处理多个文件上传任务。

    promise.all() //同时处理多个promise任务,当所有任务成功。all返回成功,但凡一个失败。all失败
    promise.race() //同时处理多个promise任务,拿到最快的请求结果
    promise.allsetlet() //同时处理多个promise任务,不管成功还是失败,都会返回结果。返回所有结果
    
  4. 如果需要暂停,需要使用axios提供的cancleToken来取消请求。

  5. 所有切片上传完毕后,在调用后端提供的合并接口,要求后端合并所有切片。返回结果给前端

  6. 前端拿到结果在提示用户上传成功

六、web常见的攻击方式有哪些?如何防御?

web攻击指的就是利用前端页面。或者前端身份信息。对服务区发起恶意的请求。

  • XSS (Cross Site Scripting) 跨站脚本攻击:

    • 攻击目标是为了盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息。一旦获取到合法用户的信息后,攻击者甚至可以假冒合法用户与网站进行交互。
    • 在页面文本框里面容易输入

你可能感兴趣的:(面试题,前端,面试,职场和发展)