面试前端八股文十问十答第四期

面试前端八股文十问十答第四期

作者:程序员小白条,个人博客

相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!

⭐点赞⭐收藏⭐不迷路!⭐

1)var、let 和 const 的区别:

  • var 是 JavaScript 中较早的变量声明关键字,它存在变量提升和函数作用域的特性。使用 var 声明的变量可以被重新声明和重新赋值。
  • letconst 是 ES6(ECMAScript 2015)引入的新的变量声明方式。它们都具有块级作用域的特性,意味着它们在 {} 内部声明的变量只在该块级作用域内有效。与 var 不同,使用 let 声明的变量可以被重新赋值,但不能被重新声明。而使用 const 声明的变量是常量,一旦赋值就不能再改变,且不能被重新声明。

2)JavaScript 垃圾回收机制:

JavaScript 中的垃圾回收机制主要通过自动内存管理来实现。它使用的主要算法是标记-清除算法。该算法在程序中定期执行,标记那些不再需要的变量,然后清除它们释放内存。此外,JavaScript 引擎还会尽可能地减少内存泄漏的发生,通过及时释放不再需要的变量来避免内存泄漏的发生。

3)作用域和作用域链:

作用域是指变量在代码中的可访问范围。在 JavaScript 中,作用域分为全局作用域和局部作用域。函数内部声明的变量只能在该函数内部访问,这就是函数作用域。而块级作用域是在 {} 内部声明的变量,它们只在该块级作用域内有效。

作用域链是指在嵌套的作用域结构中,内部作用域可以访问外部作用域的变量,但外部作用域无法访问内部作用域的变量。当变量在作用域中被引用时,JavaScript 引擎会沿着作用域链查找变量的值。

希望这些解答对你有所帮助,如果还有其他问题,请随时提出。

4)闭包的两大作用:保存/保护

闭包是指函数和其词法环境的组合,可以访问定义时的作用域外部的变量。闭包有两个主要作用:

  • 保存状态:闭包可以保存函数定义时的状态信息,使得函数在定义时的作用域外部的变量在函数调用时仍然可用,从而实现状态的持久化。
  • 保护变量:闭包可以创建私有变量和方法,将其封装在闭包内部,不被外部访问,从而实现变量的保护和隐藏。

5)JavaScript 中 this 的五种情况

  • 全局环境中的 this:在全局环境中,this 指向全局对象(浏览器中通常是 window 对象)。
  • 函数中的 this:在函数中,this 的值取决于函数的调用方式。如果函数是作为对象的方法调用的,this 指向调用该方法的对象。如果函数是作为普通函数调用的,则 this 指向全局对象。
  • 构造函数中的 this:当函数作为构造函数被调用时(使用 new 关键字),this 指向新创建的对象。
  • 使用 call()、apply()、bind() 改变 this 指向:可以使用 call()apply()bind() 方法显式地改变函数内部的 this 指向。
  • 箭头函数中的 this:箭头函数没有自己的 this,它会捕获所在上下文的 this 值,也就是说,在箭头函数中,this 继承自外层作用域。

6)原型 && 原型链

  • 原型(Prototype):在 JavaScript 中,每个函数都有一个特殊的属性称为原型(prototype)。原型是一个对象,包含了共享给实例对象的属性和方法。当访问对象的属性或方法时,如果对象本身没有这个属性或方法,JavaScript 引擎会沿着原型链查找并返回对应的值。
  • 原型链(Prototype Chain):原型链是 JavaScript 中实现继承的一种机制。当访问一个对象的属性或方法时,如果对象本身没有这个属性或方法,JavaScript 引擎会沿着原型链依次查找,直到找到对应的属性或方法,或者到达原型链的顶端(即 Object.prototype)为止。

7)new运算符的实现机制

new 运算符用于创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。它的实现机制大致如下:

  1. 创建一个空对象。
  2. 将这个空对象的原型(__proto__)指向构造函数的原型对象(prototype)。
  3. 将构造函数的作用域赋给新对象(因此 this 指向这个新对象)。
  4. 执行构造函数内部的代码(为这个新对象添加属性)。
  5. 如果构造函数返回的是一个对象,则返回这个对象;否则返回新创建的对象。

8)EventLoop 事件循环

事件循环(Event Loop)是 JavaScript 中处理异步操作的机制,用于管理消息队列中的任务。简单来说,事件循环就是不断地从消息队列中取出消息并处理这些消息的过程。

在浏览器环境中,事件循环由浏览器的事件触发线程控制,它主要包括以下几个阶段:

  1. 执行同步任务:从宏任务队列中取出一个任务,执行完毕后再从微任务队列中取出一个任务执行,直到微任务队列为空。
  2. 执行宏任务:执行一个宏任务,执行完毕后检查微任务队列是否有任务,如果有则依次执行微任务,直到微任务队列为空。
  3. 进入等待:如果当前没有任务可以执行,事件循环会进入等待状态,等待新的任务被添加到消息队列中。
  4. 检查消息队列:当有新的任务被添加到消息队列时,事件循环会检查队列中的任务,然后继续执行上述步骤。

9)setTimeout、Promise、Async/Await 的区别

  • setTimeoutsetTimeout 是一个用于在一定时间后执行函数的定时器函数。它是异步的,即在设定的时间后将回调函数推送到事件队列中执行,不会阻塞后续代码的执行。
  • PromisePromise 是 JavaScript 提供的一种用于处理异步操作的对象,它表示一个异步操作的最终完成或失败,以及其结果值。通过 Promise,可以更方便地进行异步操作的处理,包括链式调用、错误捕获等。
  • Async/AwaitAsync/Await 是 ES2017 引入的异步编程解决方案,它基于 Promise,提供了更加直观、简洁的语法来处理异步操作。Async 定义一个异步函数,而 Await 用于等待一个 Promise 对象或者任何表达式返回的结果。

10)Async/Await 如何通过同步的方式实现异步

Async/Await 是基于 Promise 实现的,它的本质仍然是异步的,但它通过更加直观、类似同步代码的写法来处理异步操作。在语法上,Async 函数内部可以使用 Await 关键字来等待 Promise 对象的状态变化。

当我们在 Async 函数内部使用 Await 关键字时,该函数会暂停执行,直到 Await 后面的 Promise 对象状态变为 resolved(已完成)或 rejected(已拒绝)。在这个过程中,Async 函数会释放主线程,使得其他任务能够继续执行。一旦 Promise 对象状态变化,Async 函数会恢复执行,并返回 Promise 对象的结果。

总之,虽然 Async/Await 在语法上看起来像同步代码,但实际上它仍然是异步执行的,只是通过暂停和恢复执行的方式,使得异步代码更加易读、易维护。

开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system

前后端总计已经 900+ Star,1.5W+ 访问!

⭐点赞⭐收藏⭐不迷路!⭐

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/783012.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu 中安装docker

1 资源地址 进入ubuntu官网下载Ubuntu23.04的版本的镜像 2 安装ubuntu 这里选择再Vmware上安装Ubuntu23.04.6 创建一个虚拟机,下一步下一步 注意虚拟机配置网络桥接,CD/DVD选择本地的镜像地址 开启此虚拟机,下一步下一步等待镜像安装。 3…

spring boot的小数位丢失.00 或者.0

1、背景 在使用spring boot时,前端的界面展示的数据是2 ,在数据库中存储的是小数。但是导出Excel的时候数据是 2.00 。奇了怪了为啥会不一样,数据都是一样的没有做过处理。 2、排查问题 经过层层的debug 发现数据库返回的数据是2.00&#x…

数据可视化-ECharts Html项目实战(8)

在之前的文章中,我们学习了如何设置散点图涟漪效果与仪表盘动态指针效果。想了解的朋友可以查看这篇文章。同时,希望我的文章能帮助到你,如果觉得我的文章写的不错,请留下你宝贵的点赞,谢谢 今天的文章,会…

【c++】类和对象(六)深入了解隐式类型转换

🔥个人主页:Quitecoder 🔥专栏:c笔记仓 朋友们大家好,本篇文章我们来到初始化列表,隐式类型转换以及explicit的内容 目录 1.初始化列表1.1构造函数体赋值1.2初始化列表1.2.1隐式类型转换与复制初始化 1.3e…

python基础——文件操作【文件编码、文件的打开与关闭操作、文件读写操作】

📝前言: 这篇文章主要讲解一下python中对于文件的基础操作: 1,文件编码 2,文件的打开与关闭操作 3,文件读写操作 🎬个人简介:努力学习ing 📋个人专栏:C语言入…

04 | Swoole 源码分析之 epoll 多路复用模块

首发原文链接:Swoole 源码分析之 epoll 多路复用模块 大家好,我是码农先森。 引言 在传统的IO模型中,每个IO操作都需要创建一个单独的线程或进程来处理,这样的操作会导致系统资源的大量消耗和管理开销。 而IO多路复用技术通过…

C++教学——从入门到精通 3.计数器

平时我们那游戏的时候,一般都会有积分的积累,这是就用到了计数器 那么我一天写一篇文章,若写了七天,共有多少篇? #include"bits/stdc.h" using namespace std; int main(){int i0;ii1;//i1;ii1;ii1;ii1;ii…

OceanBase OBCA 数据库认证专员考证视频

培训概述 OceanBase 认证是 OceanBase 官方推出的唯一人才能力认证体系,代表了阿里巴巴及蚂蚁集团官方对考生关于 OceanBase 技术能力的认可,旨在帮助考生更好地学习 OceanBase 数据库产品,早日融入 OceanBase 技术生态体系,通过由…

聚簇索引和非聚簇索引

磁盘文件 Innodb存储引擎在磁盘上的文件是以.idb结尾的文件,它存放的是表索引数据。这其实就是聚簇索引。 而Myisam存储引擎在磁盘上的文件是以.MYD结尾的表数据 和.MYI结尾的表索引,这其实就是非聚簇索引。所以区别之一是是否把索引和数据放在了一起。…

MYSQL——索引概念索引结构

索引 索引是帮助数据库高效获取数据的排好序的数据结构。 有无索引时,查询的区别 主要区别在于查询速度和系统资源的消耗。 查询速度: 在没有索引的情况下,数据库需要对表中的所有记录进行扫描,以找到符合查询条件的记录&#…

专升本-物联网

物联网(IOT,Internet of things) 体系结构: 感知层(感知执行层) 网络层 应用层 基本特征: 全面感知 可靠传输 智能处理 作用: 信息采集、转换、收集 信息传递和处理 数据…

Doris实践——票务平台的实时数仓建设

目录 前言 一、引入 Doris原因 二、基于Doris搭建数据平台 2.1 构建实时数仓 2.2 Flink CDC全库同步 三、基于Doris进行OLAP报表开发 四、未来规划 原文大佬介绍的这篇票务平台的实时数仓建设有借鉴意义,现摘抄下来用作沉淀学习。如有侵权,请告知…

如何在Mac系统上编写html代码,Mac系统上html环境配置

目录 前言1.代码编辑器:VScode1.1下载与安装1.2简单的工具配置2.测试用浏览器:Chroem2.1下载与安装3.JavaScript运行环境:node.js3.1下载与安装4.git工具:sourceTree+gitee4.1下载与安装结尾前言 这是一个面向新手的MAC系统Html编写的环境的说明。 相关搜索内容已经被垃圾…

【华为OD机试C++】字符串分割

《最新华为OD机试题目带答案解析》:最新华为OD机试题目带答案解析,语言包括C、C++、Python、Java、JavaScript等。订阅专栏,获取专栏内所有文章阅读权限,持续同步更新! 文章目录 描述输入描述输出描述示例代码描述 •输入一个字符串,请按长度为8拆分每个输入字符串并进行…

web前端面试题----->VUE

Vue的数据双向绑定是通过Vue的响应式系统实现的。具体原理: 1. Vue会在初始化时对数据对象进行遍历,使用Object.defineProperty方法将每个属性转化为getter、setter。这样在访问或修改数据时,Vue能够监听到数据的变化。 2. 当数据发生变化时…

Java学习31-Java 多线程Thread 线程的创建

多线程的概念: 用户想要一边听歌,一边QQ聊天,一边游戏。要求能并发执行。 program程序: 有特殊功能的一组代码process进程: 正在执行中的program,或者程序program的一次执行过程thread线程:程…

CSS实现元素边框渐变动画

前言: 边框流动动画是一种非常常见的效果,能够让网页看起来更加生动有趣。通过使用 CSS3,我们可以轻松地实现这种动画效果。本文将介绍如何使用 CSS3 实现边框流动效果,下面一起来看看吧。 示例图:边框是动画持续变化的…

前端简历:大学还没毕业,就写2年工作经验,上的啥大学呢?

我看过很多前端简历,不知道是不是被所谓简历专家和面试专家给拐带的,还没毕业就敢写2年工作经验,如果属实,大学上了个啥? 简历每天都能收到几十上百封,对于初级人才招聘,基本上看以下几点。 1、…

boost::asio 调整 io_uring 队列大小

若无必要默认情况下,适用 boost::asio 设定得默认值即可,虽然它浪费了很大得内存,但 boost::asio 设定得默认值,在绝大多数得场景上都是够用得。 但在调整 io_uring 之前,必须正确配置以令 boost::asio 启用 io_uring …

CIM搭建实现发送消息的效果

目录 背景过程1、下载代码2、进行配置3、直接启动项目4、打开管理界面5、启动web客户端实例项目6、发送消息 项目使用总结 背景 公司项目有许多需要发送即时消息的场景,之前一直采用的是传统的websocket连接,它会存在掉线严重,不可重连&…