2024 高频前端面试题汇总之js篇(二)

前言

📢最近准备春招啦了,所以整理了一些前端高频大厂面试题,分享给大家,如有问题欢迎留言指正,面试专栏我会长期更新,欢迎大家点赞🤞、收藏📌,关注➕,感谢!
2024 高频前端面试题汇总之CSS篇(一)
2024 高频前端面试题汇总之CSS篇(二)
2024 高频前端面试题汇总之js篇(一)

8. 深浅拷贝的区别?如何实现一个深拷贝?

  • 深浅拷贝通常只针对引用类型

  • 浅拷贝:只拷贝一层对象,复制这一层对象中的原始值,如果有引用类型的话,就复制它的指针

    Object.assign concat slice [...arr]

  • 深拷贝:层层拷贝,所有类型的属性值都会被复制,原对象的修改不会影响拷贝后的对象 JSON.parse(JSON.stringify(obj)) --- 无法处理 undefined Symbol function -- 无法处理循环引用

    不懂的可以看看我写的文章"浅拷贝与深拷贝:你真的懂吗?"

    面试官问到这个可能会让你当场手写哦接下来我们开始吧

scss 复制代码
// 这个浅拷贝的手写
Function  shallowCopy(obj){
      let newObj = {]
      for( let key in  obj ){
        if(obj.hasOwnProperty(key)){ 
        //hasOwnProperty检测对象自己身上方法而不是原先链上的
          newObj[key]=obj[key]
        }
      }
      return  newObj
} 
// 咱们会浅拷贝当然还要深拷贝呀  开始
Function  shallowCopy(obj){
      let newObj = {]
      for( let key in  obj ){
        if(obj.hasOwnProperty(key)){ 
        //hasOwnProperty检测对象自己身上方法而不是原先链上的
        if  ( typeof(obj[key])!==obj||obj[key]===null){
           newObj[key]=obj[key]
        }else{
           newObj[key]=shallowCopy(obj[key])
        }  
        }
      }
      return  newObj
} 

8. 说说你对作用域的理解

  • 是什么: 变量和函数能够生效的区域,这个区域叫作用域
  • 有哪些:
  1. 全局作用域
  2. 函数作用域
  3. 块级作用域
  • 作用域链:作用域只能从内到外的访问,这种访问规则形成的链状关系我们称之为作用域链
  • 词法作用域:指的是函数或变量定义的区域

9.说说你对原型的理解

  • 是什么:
  1. 显示原型指的是函数身上自带的 prototype 属性, 通常可以将一些书型盒方法添加在显示原型上,可供实例对象继承到
  2. 隐式原型 proto 是对象这种结构上的一个属性,其中包含了创建该对象时,隐式继承到的属性
  • 原型链:创建一个实例对象时,实例对象的隐式原型===创建该对象的构造函数的显示原型,在js中对象的查找规则是先在对象中查找,找不到再去对象的隐式原型上查找,顺着隐式原型一层层往上找,直到找到null为止,这种查找规则我们就叫原型链
  • 可用来实现属性的继承

10. new的实现原理

  • 构造函数有返回值,且为引用类型时会覆盖new当中的返回值
    说到这个咱就开始手写一个new的构造函数
ini 复制代码
 
let p = myNew(Person, 'Tom')

function myNew(...args) { // [Person, 'Tom']

  let obj = {}

  obj.__proto__ = args[0].prototype

  const res = args[0].apply(obj, args.slice(1))

  return (typeof res === 'object' && res !== null) ? res : obj

}

11. 说说Ajax的原理

  • 是什么: Async Javascript and XML ,是一种异步js和网页交互的技术,可以实现不刷新网页就跟服务器交换数据,更新页面
  • 实现过程
  1. 创建XHR实例对象
  2. 调用实例对象中的open方法与服务器建立连接
  3. 调用实例对象中的send方法发送请求
  4. 监听onreadystatechange事件,通过判断readyState的值来获取到最终的数据
  5. 将数据更新到html页面

如果再不懂的话可以看看面试题 ajax是什么

# 说说js中的事件模型

  • 什么事件流
  • 分类
  1. DOM0级 onclick (无法控制事件在捕获冒泡哪个阶段执行)
  2. DOM1级 addeventListen (可以控制事件执行在哪个阶段)
  3. IE模型 attachEvent (无法控制事件在捕获冒泡哪个阶段执行) 事件循环机制 和事件代理的话可以看看这个JavaScript事件流与事件代理

如觉得本文对你有帮助的话,欢迎点赞❤❤❤,写作不易,持续输出的背后是无数个日夜的积累,您的点赞是持续写作的动力,感谢支持

相关推荐
ThisIsClark12 分钟前
【后端面试总结】MySQL面试总结
mysql·面试·职场和发展
蒜蓉大猩猩15 分钟前
Vue.js - 组件化编程
开发语言·前端·javascript·vue.js·前端框架·ecmascript
ThisIsClark21 分钟前
【后端面试总结】MySQL索引
mysql·面试·职场和发展
Clockwiseee34 分钟前
JS原型、原型链以及原型链污染学习
javascript·学习·原型模式
王解1 小时前
一篇文章读懂 Prettier CLI 命令:从基础到进阶 (3)
前端·perttier
乐闻x1 小时前
最佳实践:如何在 Vue.js 项目中使用 Jest 进行单元测试
前端·vue.js·单元测试
遇到困难睡大觉哈哈1 小时前
JavaScript面向对象
开发语言·javascript·ecmascript
檀越剑指大厂1 小时前
【Python系列】异步 Web 服务器
服务器·前端·python
我是Superman丶1 小时前
【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
开发语言·前端·javascript
Hello Dam1 小时前
基于 Spring Boot 实现图片的服务器本地存储及前端回显
服务器·前端·spring boot