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

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

相关推荐
骑士雄师41 分钟前
java面试记录: sychonized 锁,熔断组件,分布式锁
java·开发语言·面试
HUMHSX1 小时前
Vue 项目启动全流程解析:从入口文件到全局指令注册与页面渲染
前端·javascript·vue.js
有颜有货1 小时前
PMC生产排产的4种算法,一次讲清
java·服务器·前端
小虎牙0071 小时前
Android kotlin图片库Coil源码详解
android·前端
随风一样自由1 小时前
【前端领域】前端开发核心应用场景与落地实践
前端·前端框架
an317422 小时前
弹窗数据流设计的两种高阶架构实践
前端·vue.js·架构
贺国亚2 小时前
AI制品Registry与发布门禁
面试
谢尔登2 小时前
【React】 状态管理方案
前端·react.js·前端框架
用户938515635072 小时前
手把手教你实现一个 MCP 文件读取服务器:从协议到代码的深度解析
javascript·人工智能
用户2136610035722 小时前
Vue商品详情与放大镜组件
前端·javascript