2024前端面试题！

XML： XML 是可扩展标记语言，主要是用来存储和传输数据，而非显示数据，可以用来标记数据，定义数据类型，允许用户对自己的标记语言进行定义。
**HTML：**HTML 是超文本标记语言，主要是用来描述网页的一种标记语言，通过标记标签来描述网页。
**XHTML：**XHTML 是可扩展超文本标记语言，XHTML 基于 XML 和 HTML 而来，也是用来描述网页的标记语言，是更严格的 HTML 版本。例如：XHTML 元素必须被正确地嵌套，标签名必须用小写字母，文档必须拥有根元素，对于图片需添加 alt 属性等。XHTML 和 HTML 4.01 几乎是相同的，XHTML 是 W3C 标准。
**XML和HTML区别：**XML 相比 HTML 语法要求严格。HTML 是预定义的，XML 标签是免费的、自定义的、可扩展的。HTML 的设计目的是显示数据并集中于数据外观，XML 的设计目的是描述数据、存放数据并集中于数据的内容。XML 是一种跨平台的，数据处理和传输的工具。总的来说，XML用来传输数据，而 HTML 和 XHTML 用来描述网页，XHTML 比 HTML 更为严格。

2、 XML和JSON的区别？

**JSON：**JSON 是一种轻量级的数据交换格式，它基于 JavaScript 的一个子集，简单的说 JSON 就是一串字符串用于不同平台的数据交换。
**XML：**XML 是可扩展标记语言，是标准通用标记语言 (SGML) 的子集，XML 主要是用来存储和传输数据，而非显示数据，可以用来标记数据、定义数据类型，允许用户对自己的标记语言进行定义。
**JSON和XML区别：**JSON 数据的体积小，传递速度更快，与 JavaScript 数据交互更加方便，更容易解析处理。XML 对数据的描述性比较好。JSON 支持数组，XML 不支持数组。JSON 不支持命名空间，XML 支持命名空间。JSON 容易阅读，XML 难以阅读和解释。JSON 不使用结束标记，XML 有开始和结束标签。JSON 的安全性较低，不支持注释，仅支持 UTF-8 编码。XML 比 JSON 更安全，支持注释，支持各种编码。

3、是否了解W3C的规范？⭐

w3c 标准指的是万维网联盟标准，万维网联盟标准指的不是一个标准，而是一系列标准的集合。web 可以简单分为结构、表现、行为三部分，三部分独立开来使其模块化，w3c 是对 web 做出规范，使代码更加严谨，做出来的网页更加容易使用和维护。
结构标准主要包括 XHTML 和 XML ，比如像标签闭合、标签元素和属性名字小写、标签不乱嵌套、属性必须有属性值、属性值必须用引号括起来、特殊符号用编码表示、定义语言编码等。标签规范可以提高搜索引擎对页面的抓取效率，对 SEO (搜索引擎优化) 很有帮助，越规范的网站搜索排名越靠前。
表现标准主要包括 CSS，行为标准主要包括对象模型（像 W3C DOM，ECMAScript），比如说尽量使用外链的 css 和 js 脚本，提高页面的渲染效率，尽量少使用行内样式，类名要做到见名知意。遵循 w3c 标准可以让我们的页面，我们的程序能够支持所有浏览器，能够满足尽可能多的用户。
W3C 标准的体现，也就是说是开发者在开发过程中怎么去准守 W3C 标准，其实这里面很多规范是为了 XHTML 的，jQurry 不符合 W3C 标准。

4、什么是语义化标签？⭐⭐

语义化标签就是标签语义化，让标签有自己的含义，使浏览器和搜索引擎能直观的认识标签的用途和内容。
虽然可以采用 DIV + CSS 的方式布局页面，但 DIV 标签本身没有特殊含义，文档结构不够清晰，不利于浏览器对页面的读取，在分离 CSS 样式后，体验不友好。
使用语义化标签可以使代码结构清晰，可读性高，便于团队开放和维护。在页面没有加载 CSS 的情况下也能呈现良好的结构，易于阅读。有利于 SEO（搜索引擎优化）。
语义化标签是 H5 新特性，语义化标签有：
定义页面的头部，
定义页面尾部，
定义导航链接，
内容标签等。

5、常用的块级元素和行内元素有哪一些? ⭐

**块级元素：**div、p、h1~h6、ol、ul、li、table、form。
**行内标签：**a、span、img、input、lable、button。
**行内块元素：**img、input、button。

6、行内元素和块级元素的区别？⭐

**块级元素：**默认换行，独占一行，可设置宽高 (宽度是父容器的100%)，块级元素可以嵌套任意元素，块级文字不能放入其他块级元素。
**行内元素：**默认不换行，设置宽高无效 (默认宽度是本身内容宽度)，不能包含块级元素，只能包含文本或者其它行内元素，设置 margin，padding 上下无效。
**行内块元素：**综合块级元素与行内元素的特性，可设宽高（默认是内容宽高），也可以设置内外边距。
**转换：**display:block，display:inline，display:inline-block。

7、css盒子模型有几种类型？它们区别是什么 ⭐

根据盒子大小的计算方式不同，css 盒子模型分成了两种类型，分别是 W3C 标准盒子模型和怪异盒子模型也叫 IE 盒子模型。
标准盒子模型：设置的宽度 = 内容的宽度，盒子的宽度 = 内容的宽度 + padding*2 + margin*2 + border*2。
IE盒子模型：设置的宽度 = 盒子的宽度，内容的宽度 = 盒子的宽度 - padding*2 - margin*2 - border*2。
默认情况下都是标准盒子模型，设置 IE 盒子模型：box-sizing:border-box，设置标准模型：box-sizing:content-box

8、标签上title与alt属性有什么区别？

alt 是给搜索引擎识别，在图像无法显示时的替代文本。
title 是元素的注释信息，主要是给用户解读。
当鼠标放到文字或是图片上时有 title 文字显示。在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。

9、 H5新特性有哪些？⭐⭐

语义化标签

<header>	定义文档的头部区域
<nav>	定义导航链接
<article>	内容标签
<section>	定义文档某个区域
<aside>	侧边栏标签
<footer>	定义了文档的尾部区域
<figure>	规定独立的流内容（图像、图表、照片、代码等）
<figcaption>	定义 <figure> 元素的标题

增强表单功能 (类型和属性)
音频视频：、
画布：
SVG 绘图
地理位置
拖拽 APL
WebStorage （本地存储：LocalStorage / SessionStorage ）

10、css3的新特性有哪些？⭐⭐

选择器：层级选择器，属性选择器，状态伪类选择器，结构伪类选择器，伪元素选择器
文本效果：文本阴影，文本自动换行，文本溢出，（单词拆分，文本拆分）
边框：圆角边框 border-radius，边框阴影 box-shadow，边框图片 border-image
背景：渐变背景，多重背景 (设定背景图像的尺寸，指定背景图像的位置区域，背景的绘制)
透明度：opacity （取值0-1，通常用于做元素的遮罩效果）
高斯模糊：filter
渐变：background: linear-gradient (线性渐变，径向渐变，文字渐变)
过渡：transition
2D转换 / 3D转换： transform
动画：Animation （@keyframes 动画帧）
媒体查询：@media
多列布局 (兼容性不好，还不够成熟)
弹性布局（flex）
网格布局

11、css的引用有哪些，link和@import的区别？⭐

css 的引用有哪些：

内联方式（直接在 html 标签中的 style 样式）
嵌入方式（在 < style > 标签下书写 css 代码）
链接方式（使用 link 引入外部的 css 文件）

link 和 @import 的区别：

link 和 import 写法不同，link 通过标签的 href 属性引入，import 通过 @import url() 引入。
link 是 XHTML 标签，还可以定义其他事务，@import 属于 CSS 范畴，只能加载 CSS。
link 无兼容问题，@import 兼容 IE5 以上。
link 支持使用 Javascript 控制 DOM 去改变样式，@import 不支持改变样式。
link 是连接整个 css 文件，@import 可以模块化引入 css 文件。
link 引用 CSS 时，在页面加载时同时加载 css，而 @import 会把 css 文件放在页面的最底部，导致 css 最后才加载完毕，等到页面完全加载才加载 css，导致页面留白时间长，影响用户体验。

12、href和src的区别？⭐

**请求资源不同：**href 超文本引用，用来建立当前元素和文档之间的连接，常用的是link、a 标签。src 会将指向的资源下载并引用到当前文档中，常用的标签有 script，img，iframe 标签。
**作用结果不同：**href 用于在当前文档和引用资源之间确立联系，src 用于替换当前内容。
**浏览器解析方式不同：**herf 引用的资源时，浏览器会将其识别为 CSS 文档，并行下载资源并且不会停止对当前文档的处理。当浏览器解析到 src 时，会暂停其他资源的下载和处理，直接将该资源下载，编译，执行完毕。

13、CSS常用尺寸单位有哪些？应用场景？⭐⭐

**px：**像素，相对长度单位，它的大小取决于屏幕的分辨率，是一个固定值，不能够自适应。
**em：**相对长度的单位，相对于当前对象内文本的字体尺寸，未设置则默认是浏览器默认字体尺寸。
**rem：**CSS3 中新增的一个相对长度单位，相对于根元素的 font-size 字体大小，根元素字体大小未设置，使用浏览器默认字体大小。
**vw：**相对于视口的宽度。视口被均分为100单位的 vw。
**vh：**相对视口高度，视口被均分为100单位的 vh。
**vmin：**相对于视口宽度或高度中较小的那个。其中最小的那个被均分为100单位的 vmin。
**vmax：**相对于视口宽度或高度中较大的那个。其中最大的那个被均分为100单位的 vmax。
**cm：**厘米，绝对长度单位。
**mm：**毫米，绝对长度单位。
**in：**英寸，绝对长度单位。
**%：**百法比

应用场景：

在移动端网页开发中，页面要做成响应式的，可使用 rem 配合媒体查询实现。**原理：**通过媒体查询，能够在屏幕尺寸发生改变时，重置 html 根元素的字体大小，页面中的元素都是使用rem 为单位设置的尺寸，因此只要改变根元素字体大小，页面中的其他元素的尺寸就自动跟着修改。
利用 vw 和 rem 实现响应式。**原理：**由于 vw 被更多浏览器兼容之后，在做移动端响应式页面时，通常使用 vw 配合 rem。原理是使用 vw 设置根元素 html 字体的大小，当窗口大小发生改变，vw 代表的尺寸随着修改，无需加入媒体查询，页面中的其他元素仍使用 rem 为单位，就可实现响应式。

14、移动端适配方案有哪些？⭐

vw、rem、em、rpx、%

15、什么是浮动？⭐

设置浮动的图片，可以实现文字环绕图片。设置了浮动的块级元素可以排列在同一行。设置了浮动的行内元素可以设置宽高。浮动造成的影响：使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子的高度就塌陷了，同时也会造成后面的盒子布局受到影响。

16、清除浮动有哪些方法? ⭐

清除浮动，主要是为了解决父级元素因为子级浮动引起的内部高度为 0 的问题

父级div定义height （只适合高度固定的布局）
结尾处加空div标签然后添加一个clear:both样式（浮动多的话要加很多个div）
父级 div 定义 overflow：hidden 超出盒子部分会被隐藏（不推荐）

父级div定义伪类:（推荐）

 clearfix：after     {
               content：""；          display：block；          visibility：hidden；          height：0；          line-height：0；          clear：both；      }

17、css选择器有哪些？⭐

基本选择器：

标签选择器　（ div { } ）
id 选择器　（ id=”a”, #a { } ）
类选择器 class （class=”b”, .b { } ）
通配符选择器（ * { } ）

CSS3新增选择器：

层级选择器：

后代选择器	ul li { } : 选择子类元素，包括间接子类
子代选择器	ul>li { } ：选择子类元素，只包括直接子类
相邻兄弟选择器	div+p { } : 选择紧跟在 div 元素后面的 p 元素
通用兄弟选择器	div~p { } : 选择 div 元素后面的所有 p 元素
共享选择器	div1，div2 { } ：选择所有元素

状态伪类选择器
结构伪类选择器
表单伪类选择器
伪元素选择器
属性选择器

18、CSS 样式覆盖规则？⭐

规则一：由于继承而发生样式冲突时，最近祖先获胜。
规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜。
规则三：直接指定的样式发生冲突时，样式权值高者获胜。
规则四：样式权值相同时，后者获胜。
规则五：!important 的样式属性不被覆盖。

19、CSS 样式的优先级？⭐⭐

**引入方式：**内联样式的优先级高于嵌入和外链，嵌入和外链的选择器相同就看他们在页面的插入顺序，后面插入的会覆盖前面的。
**选择器优先级：**id 选择器高于 ( 类选择器/伪类选择器/属性选择器 ) 高于 ( 标签选择器/后代选择器/伪元素选择器 ) 高于 ( 子选择器/相邻选择器 ) 高于通配符 *。
**继承样式：**继承样式是所有样式中优先级比较低的，浏览器默认样式优先级最低。
!important：!important 最高权重，无论引入方式是什么，选择器是什么，它的优先级都是最高的。所以 !important 使用要谨慎，一定要优先考虑使用样式优先级的规则来解决问题而不是 !important 。只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important。永远不要在插件中使用 !important ，永远不要在全站范围的 CSS 代码中使用 !important.

!important >> 内联样式 >> id 选择器 >> 类选择器/伪类选择器/属性选择器 >> 标签选择器/后代选择器/伪元素选择器 >> 子选择器/相邻选择器 >> 通配符 * >> 继承样式 >> 浏览器默认样式

20、display: none 和 visibily: hidden 区别? ⭐⭐

**display:none：**隐藏对应的元素，整个元素消失不占空间。
**visibily:hidden：**隐藏对应的元素，元素还会占用空间。
disapaly 还可以转换元素类型，可以转换成块级元素、行内元素，行内块元素、弹性布局、网格布局等。visibility 只能做隐藏。

21、相对定位，绝对定位，固定定位的区别？⭐⭐⭐

**position:relative：**相对定位，相对于自己进行定位。
**position:absolute：**绝对定位，相对于有相对定位的父级元素进行定位，没有就找 body。
**position:fixed：**固定定位，相对于浏览器定位。

22、说几个未知宽高元素水平垂直居中方法? ⭐⭐⭐

**绝对定位：**通过 left，top 和 transform 属性实现水平垂直居中，其中 translate 属性取值为负数时表示向左和向下移动。这种方式兼容性好，被广泛使用的一种方式。

<style>    .box {
           position: absolute;        width: 100px;        height: 100px;        left: 50%;        top: 50%;        transform: translate(-50%, -50%);    }</style>

**弹性布局：**设置父级为弹性盒子：display:flex ，设置水平和垂直居中：**justify-content:center、align-items:center。**这种方式代码简洁，但是兼容性 ie11 以上支持。

<style>    .box {
           width: 400px;        height: 300px;        display: flex;        justify-content: center;        align-items: center;        border: 1px solid black;    }    .child {
           width: 200px;        height: 150px;        background-color: red;    }</style><body>    <div class="box">        <div class="child"></div>    </div></body>

**网格布局：**设置父级为网格元素：**display: table-cell，**设置水平和垂直居中：**justify-content:center、align-items:center。**这种方式代码简洁，但是兼容性 ie10 以上支持
**表格布局：**设置父级为表格元素：display: table-cell，内部元素水平和垂直居中：text-align: center、vertical-align: middle，设置子元素为行内块：**display: inline-block。**兼容性好。

<style>    .box {
           width: 400px;        height: 300px;        display: table-cell;        text-align: center;        vertical-align: middle;        border: 1px solid black;    }    .child {
           width: 200px;        height: 150px;        background-color: red;        display: inline-block;    }</style><body>    <div class="box">        <div class="child"></div>    </div></body>

二、JS 篇

1、JS数据类型有哪些？区别？⭐⭐⭐

JS 的数据类型分为两类，分别是基本数据类型和引用数据类型。它们主要区别是在内存中的存储方式不同。

**基本数据类型：**number 数字、string 字符串、boolean 布尔值、null 空值、undefined 未定义、symbol 唯一值、BigInt 最大值。基本数据类型有固定的大小和值，存放在栈中，可以直接访问，而引用数据类型不确定大小，但是其引用地址是固定的，因此，它的地址存在栈中，指向存储在堆中的对象。
**引用数据类型：**Object (包括普通对象，数组，正则，日期，Math 数学函数等)。引用数据类型是存放在堆中的对象，在栈中保存的是对象在堆中的引用地址(引用变量)，通过引用地址可以快速查找到保存在堆中的对象。
Symbol 是 Es6 新出的一种数据类型，这种数据类型的特点就是没有重复的数据，可以做 object 的 key。
BigInt 也是 ES6 新出的一种数据类型，BigInt 可以表示任意大的整数，能够解决解精度缺失的问题 (超过 Number 类型支持范围的数值都会失去精度)。使用方法：(1) 整数末尾直接加n：647326483767797n。(2) 调用 BigInt() 构造函数：BigInt(“647326483767797”)。

2、JS中检测数据类型的有哪些？⭐⭐

**typeof：**常用于判断基本数据类型，除了 null 检测为 object。对于引用数据类型除了 function 返回 function，其余全部返回 object。
**instanceof：主要用于检测引用数据类型，不适合用来检测基本数据类型。如果检测的类型在当前实例的原型链上，则返回 true，说明这个实例属于这个类型，否则返回 false。例如： A instanceof B，**判断 B 在不在 A 的原型链上，如果在就返回 true，如果找到原型链的尽头 null 都没找到，就返回 false。(由于原型链的指向可以随意改动，导致检测不准确)
**constructor：**获取实例的构造函数判断和某个类型是否相同，如果相同就说明该数据是符合那个数据类型的。使用方法是：“实例.constructor”。constructor 可以检测出除了 undefined 和 null 以外的其他类型，因为 undefined 和 null 没有原生构造函数。(不可靠，容易被修改)
**object.prototype.toString.call( )：**适用于所有类型的判断检测，检测方法是： Object.prototype.toString.call(数据) ，返回的是该数据类型的字符串。

3、JS中的栈和堆是什么？优缺点？⭐⭐⭐

JS 的变量都储存到内存中，内存中开辟了两个区域储存变量，分别是栈区域和堆区域。栈与堆实际上是操作系统对进程占用的内存空间的两种管理方式。

栈：

栈是一种先进后出的数据解构，由操作系统自动分配内存空间，自动释放，占固定的大小空间。
栈存储的是基本数据类型的值以及引用数据类型的引用地址。
栈中存储的数据的生命周期随着当前环境的执行完成而结束。

堆：

堆由操作系统动态分配内存空间，大小不定也不会自动释放，一般由程序员分配释放也可由垃圾回收机制回收。
栈存储的是对象和复杂数据结构，存储的是对象的实际数据，而不是对象的引用。
引用数据类型只有在引用的它的变量不在时，被垃圾回收机制回收。

栈和堆的优缺点：

栈相对于堆存取速度更快，且栈内存中数据是可以共享的，但内存空间有限。
堆存取效率相对较低，但内存空间大。
栈内存可以及时得到回收，相对来说更容易管理内存空间，但存储在栈中的数据大小和生存期必须是确定的，缺乏灵活性。
堆的内存是操作系统动态分配的，方便存储和开辟内存空间。有垃圾回收机制，生存周期比较灵活。

4、深克隆和浅克隆？⭐⭐⭐

浅克隆：

克隆对象的第一层属性。
如果是基本数据类型，直接将存储在栈中的值赋值给对应的变量，原始值改变不会影响。
如果是引用数据类型，则克隆的是对象的引用地址，改变引用地址，新对象也会跟着改变，想要改变这种继承的现象就要使用深度克隆。
在 JS 中可以通过 Object.assign( ) 或者扩展运算符 … 合并对象实现浅克隆。

深克隆：

克隆对象各个层级的属性。
深克隆是指创建一个与原对象完全相同的新对象 (数据源不同，数据地址已变化)。
可以通过递归的方式实现深克隆，也可以通过简单粗暴的方式实现 JSON.parse (JSON.stringify(obj))。但需要注意：时间对象会变成字符串的形式。RegExp、Error 对象序列化的结果将只得到空对象。函数、undefined 序列化的结果会把函数或 undefined 丢失。NaN、Infinity 序列化的结果会变成 null。如果对象中存在循环引用的情况也无法正确实现深拷贝。JSON.stringify() 只能序列化对象的可枚举的自有属性。

5、JS垃圾回收机制？⭐⭐

**内存泄漏：**JS 代码运行时，需要分配内存空间存储变量和值，当这些变量不再作用时，需要释放内存，如果没有及时释放，就会引起内存泄漏，堆积起来会影响性能甚至造成系统崩溃。垃圾回收机制就是为了防止内存泄漏，及时释放不再使用的内存，提高程序性能。
**垃圾回收机制：**垃圾回收机制是一种自动管理内存的机制，它会自动监测和回收不再使用的对象，从而释放内存空间。实现的原理主要有标记清除、引用计数、复制算法。
**标记清除算法：**垃圾回收器会定期扫描内存中的对象，标记那些可达对象和不可达对象。可达对象指的是正在被使用的对象。不可达对象指的是不再被引用的对象。垃圾回收器会将不可达对象标记为垃圾对象，并将他们从内存中清除。该算法的优点是可以处理循环引用的情况，缺点是由于垃圾回收器的工作需要消耗一定的系统资源，因此如果程序中存在大量的内存占用或者存在频繁创建和销毁对象的操作，执行垃圾回收操作的时间会比较长，对性能造成一定的影响。
**引用计数算法：**垃圾回收器会记录每个对象被引用的次数，当对象被引用的次数为0时，该对象就会被清除。该算法的优点是实现较为简单，但无法处理循环引用的情况，即两个对象相互引用，但是它们的引用次数都不为 0，导致内存无法被释放，可能会导致内存泄漏。
**复制算法：**将内存空间划分为两个相等的区域，每次只使用一个区域，这个区域满时，将其中存活的对象复制到另外一个区域，再将原区域的对象全部清除。优点是可以避免由于产生大量内存碎片而引发的内存分配失败问题。

存在问题？怎么优化？

虽然浏览器可以自动的进行垃圾回收，但是当代码比较复杂时，垃圾回收对性能的消耗比较大，所以应该尽量减少垃圾回收。需要根据具体应用的需求和环境进行优化。

对数组进行优化。清空数组时，赋值为[ ]，同时将数组的长度设置为0。
对象复用，尽量减少对象的创建和销毁次数。
不再使用的对象就设置为 null。
函数优化，函数功能单一化。
尽早释放资源。
使用闭包，在闭包中的变量不会被垃圾回收机制回收。

6、JS哪些操作会造成内存泄露？⭐⭐

意外的全局变量。由于使用未声明的变量而意外的创建了一个全局变量，而使用这个变量一直留在内存中无法被回收。
没有清理的DOM元素引用。获取一个DOM元素的引用，元素被删除了，由于保留了元素的引用，所以也无法被回收。
被遗忘的定时器或者回调函数。
闭包。

7、闭包？⭐⭐⭐

什么是闭包？

因为作用域链的存在，函数的内部可以直接读取全局变量，而函数内部无法读取另一个函数内部的局部变量，如果想读取函数内部的局部变量，可以通过闭包来实现。闭包就是在一个函数内部创建另外一个函数，让你可以在一个内层函数中访问到外层函数的局部变量。简单来说，闭包就是可以读取其他函数内部局部变量的函数，本质上，闭包是将函数内部和函数外部连接起来的桥梁。

为什么要使用闭包？

局部变量无法共享和长久的保存，而全局变量可能造成变量污染。
闭包可以读取函数内部的局部变量，且不会被垃圾回收机制回收，可以长期保存。

闭包的作用？

在函数外部可以访问函数内部的局部变量。
可以使函数内部的变量在函数执行结束之后不被销毁，长久保存在内存中，不会被垃圾回收机制回收。
使用闭包，可以封装自己的函数代码，实现模块化。
保护：避免命名冲突。
保存：解决循环绑定引发的索引问题。

闭包的缺点？

由于垃圾回收器不会将闭包中变量销毁，于是就造成了内存泄露，内存泄露积累多了就容易导致内存溢出。如何解决：在销毁函数之前，将不使用的局部变量全部删除。

闭包的应用？

能够模仿块级作用域。
设计模式中的单例模式。
for 循环中的保留 i 的操作。
防抖和节流。
函数柯里化。
在构造函数中定义特权方法。
Vue 中数据响应式 Observer 中使用闭包。

8、什么是原型链？⭐⭐⭐

每个函数身上都有一个 prototype 的原型对象，并且有一个__proto__的指针指向下一级原型对象，如果一个对象的属性或方法在自身中找不到，那么就会去 prototype 原型对象中查找，如果还找不到继续向上查找直到 null，当_proto_指针指向 null 时形成一个链条，这个链条叫做原型链。
在原型链中，对象可以继承原型对象的属性和方法。如果想在构造函数中添加属性和方法，可以将它们添加到构造函数的 prototype 属性中，这样通过该构造函数创建的对象都可以访问到这些属性和方法。
原型链的特点是：对象可以沿着原型链向上查找属性和方法，实现了属性和方法的共享和继承。

9、JS继承的方法有哪些？优缺点？⭐⭐

JS继承的方法有以下几种：原型链继承、构造函数继承、组合继承、原型式继承和寄生式继承，寄生组合式继承，ES6 Class实现继承。继承的目的是：重复利用另外一个对象的属性和方法。

**原型链继承：**将父类的实例作为子类的原型，从而实现对父类属性和方法的继承。**优点：**写法方便简洁，容易理解。**缺点：**不能传递参数和共享所有继承的属性和方法，当一个发生改变另外一个随之改变。
**构造函数继承：**在子类的构造函数中调用父类的构造函数，使用 apply() 或 call() 方法将父对象的构造函数绑定在子对象上，从而实现对父类实例属性的继承。**优点：**解决了原型链继承不能传参的问题和父类的原型共享的问题。**缺点：**方法都在构造函数中定义，因此无法实现函数复用。
**组合继承：**将原型链继承和构造函数继承结合起来，既可以实现对父类原型属性和方法的继承，又可以实现对父类实例属性的继承。优点： 解决了原型链继承和构造函数继承造成的影响。缺点: 无论在什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。
**原型式继承：**通过创建一个临时构造函数来实现对父类的属性和方法的继承。**优点：**不需要单独创建构造函数。**缺点&#x

标签：XML,面试题,对象,标签,前端,元素,数据类型,2024,选择器
From： https://blog.csdn.net/Amourlwh/article/details/142858437

一、Html5、Css3 篇

1、HTML、XHTML、XML 有什么区别？⭐

2、 XML和JSON的区别？

3、是否了解W3C的规范？⭐

4、什么是语义化标签？⭐⭐

5、常用的块级元素和行内元素有哪一些? ⭐

6、行内元素和块级元素的区别？⭐

7、css盒子模型有几种类型？它们区别是什么 ⭐

8、标签上title与alt属性有什么区别？

9、 H5新特性有哪些？⭐⭐

10、css3的新特性有哪些？⭐⭐

11、css的引用有哪些，link和@import的区别？⭐

12、href和src的区别？⭐

13、CSS常用尺寸单位有哪些？应用场景？⭐⭐

14、移动端适配方案有哪些？⭐

15、什么是浮动？⭐

16、清除浮动有哪些方法? ⭐

17、css选择器有哪些？⭐

18、CSS 样式覆盖规则？⭐

19、CSS 样式的优先级？⭐⭐

20、display: none 和 visibily: hidden 区别? ⭐⭐

21、相对定位，绝对定位，固定定位的区别？⭐⭐⭐

22、说几个未知宽高元素水平垂直居中方法? ⭐⭐⭐

二、JS 篇

1、JS数据类型有哪些？区别？⭐⭐⭐

2、JS中检测数据类型的有哪些？⭐⭐

3、JS中的栈和堆是什么？优缺点？⭐⭐⭐

4、深克隆和浅克隆？⭐⭐⭐

5、JS垃圾回收机制？⭐⭐

6、JS哪些操作会造成内存泄露？⭐⭐

7、闭包？⭐⭐⭐

8、什么是原型链？⭐⭐⭐

9、JS继承的方法有哪些？优缺点？⭐⭐

相关文章

赞助商

阅读排行

2024前端面试题！

一、Html5、Css3 篇

1、HTML、XHTML、XML 有什么区别？⭐

2、 XML和JSON的区别？

3、是否了解W3C的规范？⭐

4、什么是语义化标签？⭐⭐

5、常用的块级元素和行内元素有哪一些? ⭐

6、行内元素和块级元素的区别？⭐

7、css盒子模型有几种类型？它们区别是什么 ⭐

8、标签上title与alt属性有什么区别？

9、 H5新特性有哪些？⭐⭐

10、css3的新特性有哪些？⭐⭐

11、css的引用有哪些，link和@import的区别？⭐

12、href和src的区别？⭐

13、CSS常用尺寸单位有哪些？应用场景？⭐⭐

14、移动端适配方案有哪些？⭐

15、什么是浮动？⭐

16、清除浮动有哪些方法? ⭐

17、css选择器有哪些？⭐

18、CSS 样式覆盖规则？⭐

19、CSS 样式的优先级？⭐⭐

20、display: none 和 visibily: hidden 区别? ⭐⭐

21、相对定位，绝对定位，固定定位的区别？⭐⭐⭐

22、说几个未知宽高元素水平垂直居中方法? ⭐⭐⭐

二、JS 篇

1、JS数据类型有哪些？区别？⭐⭐⭐

2、JS中检测数据类型的有哪些？⭐⭐

3、JS中的栈和堆是什么？优缺点？⭐⭐⭐

4、深克隆和浅克隆？⭐⭐⭐

5、JS垃圾回收机制？⭐⭐

6、JS哪些操作会造成内存泄露？⭐⭐

**7、闭包？**⭐⭐⭐

8、什么是原型链？⭐⭐⭐

9、JS继承的方法有哪些？优缺点？⭐⭐

相关文章

赞助商

阅读排行

7、闭包？⭐⭐⭐