2026 Web前端面试题库及详细答案

2026Web前端面试题库及详细答案说明：本题库贴合2026年前端面试实际场景，剔除过时考点，重点覆盖HTML5、CSS3、JavaScript（ES6+）、主流框架（Vue3、React18）、工程化、性能优化、浏览器原理、网络相关等核心模块，题型包含基础题、进阶题、手写题、场景题，答案详细易懂，贴合实际开发，避免生硬背诵，适配应届生、1-3年、3-5年前端面试需求。一、HTML基础（必考，基础层）1.请解释HTML语义化的含义及核心价值，举例说明常用的语义化标签答案：HTML语义化是指根据页面内容的结构和含义，选用合适的HTML标签，让标签本身能清晰表达内容的用途，而非全部使用div、span等无意义标签。核心价值不在于样式，而在于结构清晰、可维护性、可访问性和SEO优化。具体价值：①提升可访问性：屏幕阅读器可通过语义标签识别页面结构（如nav标识导航），方便特殊人群使用；②优化SEO：搜索引擎爬虫能快速解析语义化页面，抓取核心内容，提升关键词排名；③提高代码可维护性：团队协作时，无需查看CSS样式，就能快速理解页面结构；④无CSS加载失败时，页面依然能呈现清晰的内容层级，提升用户体验。常用语义化标签：header（页头/区块头部）、nav（导航栏）、main（页面主体内容，唯一）、section（内容区块，用于划分不同主题）、article（独立完整的内容，如文章、评论）、footer（页脚/区块底部）、aside（侧边栏，非核心辅助内容）、figure（包裹图片+说明）、figcaption（图片说明文字）。实际开发示例：页面头部用header，里面包含logo和nav导航；文章主体用article，里面包含h1-h6标题和段落；侧边推荐用aside；页面底部用footer包含版权信息。2.HTML5新增了哪些核心特性？请分类说明并举例答案：HTML5核心新增特性主要分为6大类，贴合实际开发常用场景，具体如下：①语义化标签：如上述第1题中的header、nav、main等，替代传统div布局，优化结构和SEO；②表单增强：新增表单类型（email、tel、number、date、time、search），无需手动写验证逻辑；新增表单属性（placeholder、required、autofocus、disabled、readonly、pattern），简化开发。示例：<inputtype="email"requiredplaceholder="请输入邮箱">，自动校验邮箱格式，且必填；③原生多媒体：新增video（视频）、audio（音频）标签，无需依赖Flash插件。示例：<videosrc="video.mp4"controlsautoplaymuted></video>（controls显示控制栏，autoplay自动播放，muted静音避免浏览器拦截）；④本地存储：新增localStorage、sessionStorage，替代传统cookie，存储容量更大（一般5MB），操作更简便。区别：localStorage永久存储（除非手动清除），sessionStorage会话级存储（关闭浏览器/标签页丢失）；⑤绘图与可视化：新增canvas（像素级绘图，可用于小游戏、图表）、SVG（矢量图，放大不失真，可用于图标、地图）；⑥新增API：地理定位API（获取用户位置）、拖拽API（实现元素拖拽）、WebWorker（开启子线程，避免主线程阻塞）、WebSocket（实现客户端与服务器双向实时通信）、HistoryAPI（无刷新修改URL，实现单页应用路由）。3.src和href的区别是什么？实际开发中需要注意什么答案：两者均用于引用外部资源，但核心作用和加载机制完全不同，具体区别如下：①src（source，引入资源）：用于嵌入外部资源，会暂停页面解析，加载并执行/渲染该资源，属于“嵌入”操作。常见场景：script标签（引入JS）、img标签（引入图片）、iframe标签（嵌入页面）。例如：<scriptsrc="index.js"></script>，浏览器解析到src时，会先加载并执行JS代码，阻塞后续HTML解析和渲染，因此实际开发中，JS脚本通常放在body底部，或添加defer/async属性避免阻塞；②href（hypertextreference，关联资源）：用于建立当前页面与外部资源的关联，不会阻塞页面解析，属于“链接”操作。常见场景：a标签（跳转链接）、link标签（引入CSS）。例如：<linkhref="style.css"rel="stylesheet">，浏览器会并行加载CSS文件，同时继续解析HTML，不会阻塞页面渲染。注意点：避免将script标签放在head头部且不添加defer/async，否则会阻塞页面渲染，导致页面空白；link标签引入CSS时，rel="stylesheet"不可省略，否则浏览器无法识别资源类型。4.什么是DOCTYPE？它的作用是什么？缺失会有什么问题答案：DOCTYPE（文档类型声明）是HTML文档的第一行代码，不属于HTML标签，格式为<!DOCTYPEhtml>（HTML5标准写法），用于告诉浏览器当前HTML文档的版本，让浏览器按照对应标准解析页面。作用：指定浏览器的渲染模式（标准模式/怪异模式），确保页面按照预期的HTML/CSS标准渲染，避免因浏览器解析模式不同导致的布局偏差。缺失后果：浏览器会进入“怪异模式”（兼容旧版本IE浏览器的解析模式），此时CSS盒模型、布局规则等会与标准模式不一致，导致页面布局错乱（如盒模型计算偏差、margin重叠异常），影响跨浏览器兼容性。二、CSS基础（必考，布局核心）1.请详细说明CSS盒模型的组成，以及两种盒模型的区别和控制方式答案：CSS盒模型是页面布局的核心，所有HTML元素都可以看作一个“盒子”，由4个部分从内到外依次组成：content（内容区）、padding（内边距）、border（边框）、margin（外边距）。其中content是盒子的核心，用于存放文本、图片等内容；padding是内容区与边框之间的距离，会影响盒子的实际大小；border是盒子的边框，会增加盒子大小；margin是盒子与其他盒子之间的距离，不影响盒子自身大小，只影响盒子的位置。两种盒模型的核心区别的是“width/height的计算范围”，具体如下：①标准盒模型（W3C标准，默认模式）：box-sizing:content-box（默认值）。width/height仅作用于content（内容区），盒子的实际总宽度=width+padding-left+padding-right+border-left+border-right；实际总高度=height+padding-top+padding-bottom+border-top+border-bottom。例如：设置width:200px、padding:10px、border:1px，盒子实际总宽度为200+10+10+1+1=222px；②怪异盒模型（IE盒模型）：box-sizing:border-box。width/height包含content、padding和border，盒子的实际总宽度=设置的width；实际总高度=设置的height（margin不包含在内）。例如：设置width:200px、padding:10px、border:1px，盒子实际总宽度依然是200px，content区宽度会自动计算为200-10-10-1-1=178px。实际开发场景：几乎所有项目都会在全局样式中设置*{box-sizing:border-box;}，目的是统一盒模型计算方式，避免padding和border导致的布局偏差，尤其是表单、卡片等需要精准控制宽度的元素。2.CSS选择器有哪些？优先级规则是什么？如何计算优先级答案：CSS选择器用于选择需要应用样式的HTML元素，按常用度分类如下：①基础选择器：元素选择器（如div、p、span）、类选择器（如.class）、ID选择器（如#id）、通配符选择器（*，匹配所有元素）；②复合选择器：后代选择器（div.class，空格分隔，匹配div下所有后代元素）、子选择器（div>.class，>分隔，匹配div下直接子元素）、相邻兄弟选择器（div+.class，+分隔，匹配div后面紧邻的一个兄弟元素）、通用兄弟选择器（div~.class，~分隔，匹配div后面所有兄弟元素）；③属性选择器：[attr]（匹配包含attr属性的元素）、[attr=value]（匹配attr属性值等于value的元素）、[attr^=value]（匹配attr属性值以value开头的元素）、[attr$=value]（匹配attr属性值以value结尾的元素）、[attr*=value]（匹配attr属性值包含value的元素）；④伪类选择器：:hover（鼠标悬浮时）、:active（鼠标点击时）、:focus（元素获得焦点时）、:first-child（第一个子元素）、:last-child（最后一个子元素）、:nth-child(n)（第n个子元素）、:not(selector)（排除指定选择器的元素）、:has(selector)（匹配包含指定子元素的元素，2026年高频考点）；⑤伪元素选择器：::before（在元素内容前插入内容）、::after（在元素内容后插入内容）、::first-line（元素第一行文本）、::first-letter（元素第一个字符）。优先级规则（从高到低，优先级高的样式覆盖优先级低的）：1.!important（最高优先级，强制覆盖所有样式，除非其他样式也加!important且优先级更高）；注意：尽量避免过度使用!important，后期难以维护，优先级冲突时优先优化选择器层级；2.行内样式（元素的style属性，如<divstyle="color:red">）；3.ID选择器（#id）；4.类选择器、属性选择器、伪类选择器；5.元素选择器、伪元素选择器；6.通配符选择器（*）；7.继承的样式（最低优先级，元素从父元素继承的样式）。优先级计算：采用“权重累加”原则，权重值分配如下：行内样式（1000）、ID选择器（100）、类/属性/伪类选择器（10）、元素/伪元素选择器（1）、通配符（0）。累加后权重值越高，优先级越高；权重值相同的情况下，后定义的样式覆盖先定义的样式。示例：#box.contentp（权重100+10+1=111）>.boxp（10+1=11）>divp（1+1=2）。3.请列举至少5种实现水平垂直居中的方法，说明适用场景答案：水平垂直居中是前端布局高频需求，不同场景适用不同方法，以下是实际开发中最常用的5种，附代码示例和适用场景：前提：父容器为parent，子元素为child，假设父容器有固定宽高（或自适应宽高）。①方法1：flex布局（最常用，适配所有场景，推荐）代码：.parent{display:flex;justify-content:center;align-items:center;}适用场景：子元素宽高固定/不固定、父容器宽高固定/自适应，兼容性好（IE11+），是目前开发中首选方法。②方法2：绝对定位+margin:auto（适配子元素宽高固定场景）代码：.parent{position:relative;}.child{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:200px;height:200px;}适用场景：子元素宽高固定，父容器宽高固定/自适应，兼容性好（IE8+）。③方法3：绝对定位+transform（适配子元素宽高不固定场景）代码：.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}适用场景：子元素宽高不固定（transform会自动计算偏移量），父容器宽高固定/自适应，兼容性（IE9+），适合动态宽高的元素（如弹窗内容）。④方法4：grid布局（简洁，适配现代项目）代码：.parent{display:grid;place-items:center;}适用场景：子元素宽高固定/不固定，父容器宽高固定/自适应，语法简洁，兼容性（IE11+），适合现代项目（如Vue、React项目）。⑤方法5：行内块+vertical-align（适配简单文本/行内元素场景）代码：.parent{line-height:400px;/*父容器高度*/text-align:center;}.child{display:inline-block;vertical-align:middle;}适用场景：子元素为行内块、文本，父容器高度固定，适合简单布局（如导航栏文字居中）。4.什么是BFC？触发条件和核心作用是什么？实际开发中如何应用答案：BFC（BlockFormattingContext，块级格式化上下文），是CSS中的一种独立渲染环境，简单来说，BFC就是一个“隔离的盒子”，盒子内部的元素布局不会影响外部元素，外部元素也不会影响盒子内部的元素，内部元素按块级元素的规则排列。触发BFC的条件（满足任意一个即可）：1.根元素（html标签，默认就是BFC）；2.浮动元素（float的值不为none）；3.定位元素（position的值为absolute或fixed）；4.display属性为flex、grid、inline-block、table-cell、table-caption；5.overflow属性不为visible（常用overflow:hidden、overflow:auto）。BFC的核心作用（实际开发常用场景）：①清除浮动，解决父元素高度塌陷：当父容器内的子元素设置浮动后，子元素会脱离文档流，导致父容器高度为0（高度塌陷），此时给父容器触发BFC（如设置overflow:hidden），父容器会包裹住浮动的子元素，自动计算高度，解决塌陷问题；②避免margin重叠：两个相邻的块级元素，若都设置了margin，会出现margin重叠（取两个margin中的最大值），此时给其中一个元素包裹一个BFC容器，即可避免重叠；③阻止浮动元素覆盖普通元素：当一个元素浮动后，会覆盖后面的普通元素，此时给普通元素触发BFC，即可阻止被覆盖；④隔离元素，避免布局干扰：将页面不同模块包裹在BFC容器中，可避免模块之间的布局相互影响，提升代码可维护性。实际应用示例：开发卡片列表时，每个卡片设置float:left，父容器会高度塌陷，给父容器设置overflow:hidden（触发BFC），即可让父容器包裹所有卡片，避免布局错乱。5.请解释CSS中的flex布局，常用属性有哪些？flex:1代表什么答案：flex布局（弹性布局）是CSS3新增的布局方式，用于快速实现元素的灵活排列，适配响应式布局，核心是“容器+项目”：设置display:flex的元素是flex容器，其直接子元素是flex项目，项目会自动沿着主轴（默认水平方向）排列。常用容器属性（作用于flex容器）：①flex-direction：设置主轴方向，取值：row（默认，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）；②justify-content：设置项目在主轴上的对齐方式，取值：flex-start（默认，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间距相等）、space-around（项目两侧间距相等，总间距是项目之间间距的2倍）、space-evenly（所有间距相等）；③align-items：设置项目在交叉轴（与主轴垂直）上的对齐方式，取值：flex-start（顶端对齐）、flex-end（底端对齐）、center（居中对齐）、baseline（基线对齐，与文本基线一致）、stretch（默认，项目拉伸至与容器等高）；④flex-wrap：设置项目是否换行，取值：nowrap（默认，不换行，项目会被压缩）、wrap（换行）、wrap-reverse（反向换行）；⑤align-content：设置多根轴线（项目换行后）的对齐方式，仅当项目换行时有效，取值与justify-content类似。常用项目属性（作用于flex项目）：①flex-grow：项目的放大比例，默认0（不放大），值越大，占用剩余空间越多；②flex-shrink：项目的缩小比例，默认1（空间不足时缩小），值为0时，项目不缩小；③flex-basis：项目在主轴上的初始宽度，默认auto（项目自身宽度）；④flex：flex-grow、flex-shrink、flex-basis的简写，默认值01auto；⑤align-self：单独设置某个项目的交叉轴对齐方式，覆盖容器的align-items属性。flex:1的含义：等价于flex:110%，即：flex-grow:1（项目会放大，占用剩余空间）、flex-shrink:1（空间不足时会缩小）、flex-basis:0%（项目初始宽度为0，根据剩余空间分配宽度）。实际开发中，常用flex:1实现“项目均分剩余空间”（如导航栏菜单均分、卡片均分）。6.2026年高频考点：CSS容器查询（@container）的用法及与媒体查询的区别答案：CSS容器查询是2026年前端面试高频新增考点，核心作用是“根据父容器的尺寸（宽度、高度）来应用不同的CSS样式”，区别于传统媒体查询（根据视口尺寸），更适合组件化开发，提升组件复用性。容器查询的使用步骤：1.定义容器：给父容器设置container-type属性，指定查询的维度，常用值：inline-size（查询容器的水平宽度）、block-size（查询容器的垂直高度）、size（同时查询宽度和高度）；2.编写容器查询：使用@container关键字，根据容器尺寸编写样式。代码示例：.card-container{container-type:inline-size;/*定义容器，查询宽度*/}.card{padding:16px;}/*当容器宽度小于600px时，修改卡片样式*/@container(max-width:600px){.card{padding:8px;font-size:14px;}}与媒体查询（@media）的区别：①查询对象不同：容器查询查询的是“父容器的尺寸”，媒体查询查询的是“视口（浏览器窗口）的尺寸”；②适用场景不同：容器查询适合组件封装（组件样式不依赖视口，可在不同宽度的容器中自适应），媒体查询适合页面整体响应式（根据浏览器窗口大小调整页面布局）；③灵活性不同：容器查询更灵活，组件可在任意容器中自适应，无需关注视口尺寸；媒体查询依赖视口，组件样式受页面布局影响较大。实际应用场景：开发可复用的卡片组件，当卡片放在侧边栏（窄容器）时，显示紧凑样式；放在页面主体（宽容器）时，显示宽松样式，无需修改组件代码，仅通过容器查询即可实现。三、JavaScript基础（必考，核心难点）1.JavaScript的数据类型有哪些？如何准确判断数据类型答案：JavaScript的数据类型分为两大类，共8种，贴合ES6+最新规范，具体如下：①基本数据类型（值类型）：共7种，存储在栈内存中，值不可变，赋值时传递副本。分别是：String（字符串，如"abc"）、Number（数字，如123、3.14，包含NaN、Infinity）、Boolean（布尔值，true/false）、Undefined（未定义，变量声明未赋值时的默认值）、Null（空值，主动表示“无”，如leta=null）、Symbol（ES6新增，唯一值，用于对象属性名，避免冲突）、BigInt（ES11新增，用于表示超大整数，如123n，解决Number最大安全值问题）。②引用数据类型（引用类型）：仅1种，即Object，存储在堆内存中，栈内存存储堆地址，赋值时传递地址，值可变。包含：Array（数组）、Function（函数）、Date（日期）、RegExp（正则）、Object（普通对象）等。数据类型判断方法（4种，各有优劣，实际开发按需选择）：①typeof：最基础的判断方法，语法typeof变量。优点：简单快捷，能判断基本数据类型（除Null外）；缺点：无法区分引用类型（除Function外，所有引用类型都返回"object"），且判断Null时返回"object"（历史bug，无法修复）。示例：typeof"abc"→"string"；typeof123→"number"；typeofnull→"object"；typeof[]→"object"；typeoffunction(){}→"function"。②instanceof：基于原型链判断，语法变量instanceof类型，仅能判断引用类型。优点：能准确区分引用类型（如Array、Function、Object）；缺点：无法判断基本数据类型，且能被原型链修改（不准确）。示例：[]instanceofArray→true；{}instanceofObject→true；function(){}instanceofFunction→true；123instanceofNumber→false。③Ototype.toString.call()：最精准的判断方法，语法Ototype.toString.call(变量)，能判断所有数据类型，返回格式为"[object类型名]"。优点：精准、通用，无漏洞；缺点：语法稍繁琐。示例：Ototype.toString.call("abc")→"[objectString]"；call(null)→"[objectNull]"；call([])→"[objectArray]"；call(BigInt(123))→"[objectBigInt]"。④特殊判断：针对Array，可使用Array.isArray(变量)，语法简单，精准判断数组；针对Undefined，可使用变量===undefined（避免使用typeofundefined，防止被重写）。实际开发推荐：判断基本数据类型用typeof，判断引用类型用instanceof或Array.isArray（数组），需要精准判断所有类型时用Ototype.toString.call()。2.什么是变量提升？函数提升和变量提升的区别是什么？实际开发中如何避免踩坑答案：变量提升和函数提升是JavaScript的执行机制之一，指代码在执行前，JavaScript引擎会将变量声明和函数声明提升到当前作用域的顶部，使得我们可以在声明之前使用变量或函数（但赋值不会提升）。①变量提升：仅提升“变量声明”，不提升“变量赋值”，分为var、let、const三种情况（重点区分ES6和ES5）：-var声明的变量：会被提升到作用域顶部，且默认赋值为undefined，因此在声明前使用，不会报错，返回undefined。示例：console.log(a);//undefined；vara=10;（实际执行顺序：vara;console.log(a);a=10;）-let、const声明的变量：也会提升，但会被“暂时性死区”限制，在声明前使用，会直接报错（Cannotaccess'a'beforeinitialization），无法使用。示例：console.log(b);//报错；letb=20;（暂时性死区：从作用域开始到变量声明前，变量不可访问）②函数提升：分为“函数声明式”和“函数表达式”，只有函数声明式会被提升，函数表达式不会。-函数声明式（会提升）：function函数名(){}，会被完整提升到作用域顶部，因此在声明前调用函数，可正常执行。示例：fn();//输出"hello"；functionfn(){console.log("hello");}-函数表达式（不会提升）：varfn=function(){}（或let/constfn=()=>{}），本质是变量赋值，仅变量声明提升，函数赋值不提升，因此在声明前调用，会报错（fnisnotafunction）。示例：fn();//报错（fnisnotafunction）；varfn=function(){console.log("hello");}函数提升和变量提升的区别：1.提升优先级：函数提升优先级高于变量提升，若变量和函数同名，函数声明会覆盖变量声明（但变量赋值会覆盖函数）；示例：console.log(fn);//functionfn(){}；varfn=10;functionfn(){}；（执行顺序：functionfn(){};varfn;console.log(fn);fn=10;）2.提升内容：函数提升会将整个函数体提升，变量提升仅提升声明，不提升赋值；3.影响范围：let/const的变量提升受暂时性死区限制，函数提升（声明式）无此限制。实际开发避坑技巧：1.尽量使用let/const替代var，利用暂时性死区避免“声明前使用变量”的问题；2.变量和函数声明统一放在作用域顶部，避免提升导致的逻辑混乱；3.避免变量和函数同名，防止覆盖问题；4.优先使用函数表达式（如箭头函数），避免函数提升带来的意外影响。3.什么是闭包？闭包的应用场景有哪些？如何避免闭包导致的内存泄漏答案：闭包是JavaScript的核心特性，本质是“函数嵌套函数，内层函数引用了外层函数的变量/参数，且内层函数被外部引用，导致外层函数的执行上下文不会被垃圾回收，从而内层函数可以持续访问外层函数的变量”。简单理解：闭包就是“内层函数带着外层函数的变量一起‘逃离’外层函数”，即使外层函数执行完毕，内层函数依然能访问外层函数的变量。闭包示例（实际开发常用）：functionouter(){letnum=10;//外层函数变量//内层函数，引用外层变量numfunctioninner(){console.log(num);//访问外层变量}returninner;//外层函数返回内层函数，让内层函数被外部引用}constfn=outer();//fn接收内层函数，形成闭包fn();//输出10，即使outer执行完毕，依然能访问num闭包的核心应用场景（实际开发必用）：①防抖节流函数：利用闭包保存定时器ID，实现“一段时间内只执行一次函数”，避免频繁触发（如搜索框输入、滚动事件）；②模块化开发：利用闭包创建私有变量，避免全局变量污染，实现“变量私有化”（如封装工具函数，只暴露需要的方法，隐藏内部变量）；③ReactHooks底层：useState、useEffect等Hooks本质依赖闭包，保存组件的状态和副作用，确保每次渲染时能访问到正确的状态；④缓存工具：利用闭包保存缓存数据，避免重复计算（如计算斐波那契数列、接口请求缓存）。闭包的问题：闭包会导致外层函数的执行上下文无法被垃圾回收，若闭包引用了大量数据或未及时释放，会造成内存泄漏（内存占用越来越大，影响页面性能）。避免闭包内存泄漏的方法（实际开发重点）：1.及时解除引用：当闭包不再使用时，将引用闭包的变量赋值为null，让垃圾回收机制回收外层函数的执行上下文；示例：fn=null;//解除对inner函数的引用，outer的执行上下文会被回收2.避免闭包引用过大的变量：尽量让闭包引用必要的变量，避免引用整个大对象（如DOM元素、大型数组）；3.组件卸载时清理闭包：在React/Vue组件中，若闭包中存在定时器、事件监听，需在组件卸载时清除（如React的useEffect返回清理函数）；4.避免过度使用闭包：仅在需要保存状态、私有化变量时使用，不要滥用闭包。4.什么是this关键字？this的指向规则有哪些？如何改变this的指向答案：this是JavaScript中的关键字，代表“当前执行上下文的对象”，this的指向不是固定的，取决于函数的调用方式，而非函数的定义位置，这是this的核心特点。this的指向规则（按优先级从高到低，覆盖所有开发场景）：①显式绑定：通过call、apply、bind方法主动指定this的指向，优先级最高。-call：函数.call(绑定对象,参数1,参数2,...)，立即执行函数，参数逐个传递；-apply：函数.apply(绑定对象,[参数1,参数2,...])，立即执行函数，参数以数组形式传递；-bind：函数.bind(绑定对象,参数1,参数2,...)，不立即执行函数，返回一个新函数，新函数的this指向绑定对象，参数可提前传递（柯里化）。示例：functionfn(a,b){console.log(,a+b);}constobj={name:"张三"};fn.call(obj,1,2);//输出"张三3"，立即执行fn.apply(obj,[1,2]);//输出"张三3"，立即执行constnewFn=fn.bind(obj,1,2);newFn();//输出"张三3"，延迟执行②隐式绑定：函数通过“对象.函数”的方式调用，this指向调用该函数的对象，优先级次之。示例：constobj={name:"李四",fn:function(){console.log();}}obj.fn();//输出"李四"，this指向obj（调用函数的对象）注意：若函数没有明确的调用对象（如单独调用fn()），非严格模式下this指向全局对象（浏览器中是window，Node中是global），严格模式下this指向undefined。③new绑定：通过new关键字调用构造函数，this指向新创建的实例对象，优先级高于隐式绑定，低于显式绑定。示例：functionPerson(name){=name;console.log(this);}constp=newPerson("王五");//this指向新创建的p实例，输出Person{name:"王五"}④默认绑定：以上三种情况都不满足时，触发默认绑定，非严格模式下this指向全局对象，严格模式下指向undefined，优先级最低。特殊情况（this指向固定，不受调用方式影响）：1.箭头函数：箭头函数没有自己的this，this指向箭头函数定义时的外层执行上下文的this（即“继承”外层的this），且无法通过call、apply、bind改变this指向；示例：constobj={name:"赵六",fn:()=>{console.log();}}obj.fn();//输出undefined（箭头函数定义时外层this是window，window没有name属性）2.事件绑定：DOM事件回调函数中，this指向触发事件的DOM元素（如button点击事件，this指向button元素）；3.定时器回调：setTimeout、setInterval的回调函数中，非严格模式下this指向window，严格模式下指向undefined（可通过bind改变this指向）。改变this指向的方法（实际开发常用）：1.显式改变：call、apply、bind（最常用，如回调函数中绑定this）；2.隐式改变：将函数挂载到对象上，通过“对象.函数”调用；3.new绑定：通过new关键字创建实例，改变构造函数中的this指向；4.箭头函数：通过箭头函数“继承”外层this，间接改变回调函数中的this指向（如React组件中避免this指向混乱）。5.什么是事件冒泡和事件捕获？如何阻止事件冒泡和事件默认行为答案：事件冒泡和事件捕获是DOM事件流的两个阶段，DOM事件流是指事件从触发到结束的完整过程，分为三个阶段：事件捕获阶段→目标阶段（事件触发的目标元素）→事件冒泡阶段。①事件捕获（EventCapturing）：事件从最顶层的根元素（html）开始，逐级向下传播，直到到达事件触发的目标元素，这个过程就是事件捕获。简单说：“从父到子”传播事件。②事件冒泡（EventBubbling）：事件从触发的目标元素开始，逐级向上传播，直到到达最顶层的根元素（html），这个过程就是事件冒泡。简单说：“从子到父”传播事件。示例：页面结构为html→body→div→button，点击button时：-事件捕获阶段：html→body→div→button（从父到子，寻找目标元素）；-目标阶段：button（事件真正触发的元素）；-事件冒泡阶段：button→div→body→html（从子到父，传播事件）。事件绑定的第三个参数：addEventListener的第三个参数用于控制事件触发的阶段，默认是false（事件冒泡阶段触发），设为true（事件捕获阶段触发）。示例：button.addEventListener('click',fn,true);//捕获阶段触发fnbutton.addEventListener('click',fn,false);//冒泡阶段触发fn（默认）实际开发应用：事件委托（利用事件冒泡实现），将子元素的事件绑定到父元素上，通过父元素的事件冒泡，触发子元素的事件，减少事件绑定次数，提升性能（如列表项点击事件）。如何阻止事件冒泡：1.标准方法：event.stopPropagation()（适用于所有现代浏览器）；2.IE兼容方法：event.cancelBubble=true（适用于IE8及以下，现在几乎不用）；示例：button.addEventListener('click',function(event){event.stopPropagation();//阻止事件冒泡，点击button后，父元素不会触发点击事件console.log('按钮被点击');});如何阻止事件默认行为（事件本身的默认操作，如a标签跳转、表单提交）：1.标准方法：event.preventDefault()；2.兼容方法：returnfalse（仅在onclick、onload等传统事件绑定中有效，在addEventListener中无效）；示例：a标签阻止跳转：consta=document.querySelector('a');a.addEventListener('click',function(event){event.preventDefault();//阻止a标签默认跳转行为});注意：阻止事件冒泡和阻止事件默认行为是两个完全不同的操作，阻止冒泡不会影响默认行为，阻止默认行为也不会影响冒泡。6.