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事件流与事件代理

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

相关推荐
不会敲代码15 小时前
手写 Zustand:三十分钟带你搞懂状态管理库的核心原理
前端·javascript·源码
神奇的程序员5 小时前
重构了自己5年前写的截图插件
前端·javascript·架构
REDcker5 小时前
C++变量存储与ELF段布局详解 从const全局到rodata与nm_readelf验证实践
java·c++·面试
橙淮5 小时前
从优化到安全再到未来 ——JavaScript 全维度技术指南
javascript
UXbot7 小时前
一人独立交付 UI + 前端:AI 驱动 UI 设计工具的五大功能模块深度评测
前端·低代码·ui·设计模式·交互
kobesdu7 小时前
【ROS2实战笔记-19】ROS2 生命周期节点的启动顺序、状态转换陷阱与热备方案
java·前端·笔记·机器人·ros·ros2
诚实可靠王大锤7 小时前
React Native 输入框与按钮焦点冲突解决方案(rn版本0.70.3)
前端·javascript·react native·react.js
kyriewen7 小时前
测试妹子让我写单测,我偷偷用AI一天干完一周的活
前端·chatgpt·cursor
2601_957780847 小时前
Claude Code 2026年最新部署指南:从环境搭建到技能扩展
前端·人工智能·ai编程·claude
zhangfeng11338 小时前
workbuddy 专家 “前端开发师” 结合nvidia-mistral-small-4-119b-2603 项目计划-前端界面开发.md
前端·人工智能·免费