前端经典面试题

• 原型就是一个为实例对象定义了一些公共属性和公共方法都对象模板
• 再获取对象中的属性时，如果在当前对象中没有这个属性就会去它的原型上去找，如果还是找不到就会去它原型的原型上去找，直到找到最外层的原型上为止，这个查找的链式过程叫做原型链
• 构造函数的原型指向其原型对象，原型对象的constructor指向其构造函数，通过new关键字实例化构造函数，实例化对象的__proto__指向其原始的原型对象

• BOM是浏览器对象模型
• BOM没有相关标准。
• BOM的最根本对象是window。
• DOM是文档对象模型
• DOM是W3C的标准。
• DOM最根本对象是document

• 基本数据类型：boolean 布尔值，number 数字、null 无值、undefined 空、string 字符串、symbol唯一值、bigInt大数值
• 引用数据类型：object对象、function函数、array数组

• 浅拷贝： 将原对象或原数组的引用直接赋给新对象/新数组，新对象/数组只是原对象的一个引用

• 深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

• 为什么要使用深拷贝？
• 我们希望在改变新的数组或对象的时候，不改变原数组或原对象

• 浅拷贝的实现方法
• 数组的浅拷贝
• 直接遍历
• slice()
• concat()
• 对象的浅拷贝
• 直接遍历
• ES6的Object.assign
• ES6的扩展运算符

• 深拷贝的实现方法
• 用 JSON.stringify 把对象转换成字符串，再用 JSON.parse 把字符串转换成新的对象。
• 递归
• jQuery 的 extend方法

• 第一种：使用内置方法反转字符串
• 1. 使用 split()方法返回一个新数组
• 2.使用 reverse()方法 翻转数组
• 3.使用 join()方法 组合所有的数组元素，从而变成一个新字符串
• 第二种：用递减的 for 循环反转字符串
• 第三种：用递归反转字符串

• defer
• script标签中增加defer属性，异步加载
• 1、但要等dom文档全部解析完（dom树生成）才会被执行。
• 2、只有IE能用；

• async
• script标签中增加async属性，异步加载
• 1、加载完就执行;async只能加载外部脚本
• 2、不能把js写在script标签里。
• 3、w3c标准，IE9以下不支持

• 可以通过动态地创建<script>标签来实现异步加载js文件

• 协议、域名以及端口号相同就为同源，是由Netscape提出的一个著名的安全策略。
• 浏览器请求必须遵循同源策略，即同域名、同端口、同协议；
• 例如：
• http://www.abc.com到http://www.def.com的请求会出现跨域（域名不同）
• http://www.abc.com:3000到http://www.abc.com:3001的请求会出现跨域（端口不同）
• http://www.abc.com到https://www.abc.com的请求会出现跨域（协议不同）

• 节流是指在规定的时间内只运行一次，若在规定的时间内重复触发，只有一次有效
• 防抖是指在规定的时间后执行该事件，如果在此时间内被重复触发，则重新计时

• promise是es6自带的构造方法
• promise用于处理异步编程

• Promise 构造函数的使用
• new Promise(fn)
• fn 是一个立即执行的函数，因此它的内容是同步执行的
• fn 的形式为 function(resolve, reject) {}
• resolve 在成功时调用，并传值，将 promise 状态更改为成功
• reject 在失败时调用，并传错误原因，将 promise 状态更改为失败

• Promise 实例状态特点
• pending – 进行中，悬而未决（也是初始状态）
• fulfilled – 满足条件，成功
• rejected – 被抛弃，失败

• Promise 实例的方法
• .then(成功, 失败) – fulfilled 时进入 成功或 rejected 时进入 失败
• .catch(failedFn) – rejected 时进入回调函数
• .finally(fn) – 无论结果是 fulfilled 或者是 rejected，都会执行指定的回调函数
• then / catch / finally 返回新 promise

• 宏任务包括：setTimeout、setInterval、Ajax、DOM 事件
• 微任务：Promise、async/await
• 微任务比宏任务的执行时间要早

• 全局作用域：最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的；
• 局部作用域：局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的，最常见的例如函数内部。

• 当查找变量的时候，会先从当前作用域的变量对象中查找，如果没有找到，就会从父级作用域(上层环境)的变量对象中查找，一直找到全局作用域的变量对象，也就是全局对象。这样由多个作用域的变量对象构成的链表就叫做作用域链。

• 闭包就是一个能够读取外层函数内部变量的函数(可以在内部函数访问到外部函数作用域。)

• 为什么要使用闭包
• 使用闭包，一可以读取函数中的变量，二可以将函数中的变量存储在内存中，保护变量不被污染。

• 闭包的两种形式
• 函数作为返回值的形式
• 函数作为参数的形式

• 闭包的使用场景
• 封装功能时(需要使用私有的属性和方法)，
• 函数防抖、函数节流
• 单例模式

• 优点：可以重复使用变量，且不造成变量污染
• 缺点：增加常驻内存, 容易造成内存泄漏

• 普通函数中调用，this 指向 window
• 对象方法中调用，this 指向当前对象
• call apply bind 中调用， this 指向被传入的对象
• class 中的方法中调用， this 指向实例对象
• 箭头函数，this 就是父级上下文中的 this
• 自执行函数的this指向window

• 原型链继承
• 父类的实例作为子类的原型
• 借用构造函数继承.
• 复制父类的实例属性给子类
• 组合式继承
• 调用父类构造函数，继承父类的属性，通过将父类实例作为子类原型，实现函数复用
• 通过ES6中的extends继承

• es5和es6继承的区别
• es5的继承是通过原型或构造函数机制实现的；它先创建子类，再实例化父类并添加到子类this中
• es6先创建父类，再实例化子类集中通过调用super方法访问父级后，再通过修改this实现继承

• var存在变量提升，let和const不存在变量提升
• var不存在暂时性死区，let和const存在暂时性死区
• var和let可以修改声明的变量，const不能修改声明的变量
• var可以重复声明，let和const不能重复声明

• 自执行函数是什么
• 自执行函数也叫立执行函数
• 是将函数的声明和调用合并在一起

• 自执行函数存在的意义
• 自执行函数是为了封装
• 不需要将普通的函数特意换成自执行函数的写法
• 自执行函数的优点
• 保护内部变量不受污染

• 自执行函数与普通函数无本质区别,简化了普通函数的步骤
• 自执行函数与普通函数一样,同样具有形参和实参
• 自执行函数实际是函数表达式,属于高阶函数
• 自执行函数一般使用匿名函数

• 递归： 针对的是函数； 是 JS 中一种重要的思想；
• 递归的两个重要因素：递归调用的过程、递归终止的条件
• 函数递归： 在函数体内部，调用函数自己本身，让其执行；这就是递归；

• 事件委托的原理
• 确定要添加事件元素的父级元素；
• 给父元素定义事件，监听子元素的冒泡事件；
• 使用 event.target 来定位触发事件冒泡的子元素。

• 好处：提高性能，减少了事件绑定，从而减少内存占用

• 应用场景 在 vue 中事件委托
• 我们经常遇到 vue 中 v-for 一个列表，列表的每一项都绑定了@click 处理事件。我们都知道绑定这么多监听，从性能方面来说是不太好的。那我们我们可以通过把每个 item 的 click 事件委托给父元素的形式来实现。

• 通过js创建一个Object对象来模拟真实DOM结构，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。
• 优点
• 可以减少DOM操作
• 能跨平台渲染
• 缺点
• 需要额外的创建函数，如 createElement 或 h，但可以通过 JSX或者vue-loader 来简化成 XML 写法。但是这么做会依赖打包工具。

• 箭头函数是匿名函数，不能作为构造函数，不能使用 new
• 箭头函数内没有 arguments，可以用展开运算符…解决
• 箭头函数的 this，始终指向父级上下文
• 箭头函数不能修改 this 指向。

• HTML方面优化
• CSS样式表置于头部，CSS会一边加载一边渲染
• 异步加载js
• 使用外部的样式表和脚本，优先加载出HTML结构
• CSS方面优化
• 避免使用css的@import
• 避免使用通配符
• 避免使用css表达式
• 提取公共css
• JS方面优化
• 如果没有兼容问题，尽量使用原生方法
• 需要使用定时器时，用setTimeout取代setInterval，setInterval会一直占用内存
• 使用节流、防抖、事件委托减少无用的操作
• 网络方面优化
• 尽量减少http请求次数
• 合理使用浏览器缓存
• 避免使用服务端字体

• typeof 主要用来检测基础数据类型
• instanceof 用于检测构造函数中的原型(prototype)属性是否出现在某个实例对象的原型链上
• constructor 用于检测实例对象是否由某个构造函数实例化出来的
• Object.prototype.toString.call()
• 适用于所有类型
• 检测对象的时候不用加 call 也可以
• 别的数据类型必须用 call,否则的话就变成了转成字符串的方法了

• 他们都是用来改变函数执行时的this指向
• 执行：
• call/apply改变了函数的this上下文后马上执行该函数
• bind则是返回改变了上下文后的函数,不执行该函数
• 返回值：
• call/apply 返回fun的执行结果
• bind返回fun的拷贝，并指定了fun的this指向，保存了fun的参数。

• 数组扁平化就是将一个多维数组转换为一个一维数组
• 实现方式：
• 常规方式 递归处理
• 使用 reduce 方法
• 扩展运算符

1. 解析HTML，构建 DOM 树
2. 解析 CSS ，生成 CSS 规则树
3. 合并 DOM 树和 CSS 规则，生成 render 树
4. 布局 render 树，负责各元素尺寸、位置的计算
5. 绘制 render 树，绘制页面像素信息
6. 浏览器会将各层的信息发送给 GPU，GPU 会将各层合成，显示在屏幕上

• 1、浏览器的地址栏输入URL并按下回车。

• 2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
• 3、DNS解析URL对应的IP。
• 4、根据IP建立TCP连接（三次握手）。
• 5、HTTP发起请求。
• 6、服务器处理请求，浏览器接收HTTP响应。
• 7、渲染页面，构建DOM树。
• 8、关闭TCP连接（四次挥手）。

• 在下次 DOM 更新循环结束之后执行延迟回调。
• 在修改数据之后立即使用这个方法，获取更新后的 DOM。

• axios 是一个基于 Promise 的方法，可以发送 get、post 等请求，并且前后端都可以使用。
• axios封装步骤
• 引入axios
• 创建axios实例
• 设置请求拦截器
• 设置响应拦截器

• 创建xhr对象
• 调用 open 准备发送
• open的参数：methods、url、flag、name、password
• 如果是post请求方式需要设置请求头
• 调用 send 发送请求 （如果不需要参数，就写 null）
• 监听异步回调 onreadystatechange，onload

• 状态值：readyState

• 0:创建了 xhr 对象
• 1:与服务器建立了连接，向服务器发送数据
• 2:服务器开始接收数据
• 3:服务器接受完数据，开始处理数据
• 4:数据处理完成，js 可以调用处理的结果

• status:状态码

• 200：请求成功
• 304：请求的文件没有修改，去本地缓存读数据
• 404：路径错误
• 403：权限（forbidden）
• 50x：服务器错误

• jsonp 是一种跨域通信的手段，它的原理其实很简单：

• 利用 script 标签的 src 属性来实现跨域。
• 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
• 由于使用 script 标签的 src 属性，因此只支持 get 方法

• 单例模式
• 保证一个类仅有一个实例，并提供一个访问它的全局访问点
• 代理模式
• 为一个对象提供一个代用品或占位符，以便控制对它的访问
• 发布订阅模式
• 也称作观察者模式，定义了对象间的一种一对多的依赖关系，当一个对象的状态发 生改变时，所有依赖于它的对象都将得到通知
• 工厂模式
• 根据不同的参数，返回不同类的实例。
• 适配器模式
• 用于解决兼容问题，接口/方法/数据不兼容，将其转换成访问者期望的格式进行使用。
• 装饰器模式
• 在不改变原对象的基础上，增加新属性/方法/功能。
• 策略模式
• 定义一系列算法，根据输入的参数决定使用哪个算法。

• CORS跨域
• 前端不动，后端设置请求头
• JSONP跨域
• 利用 script 标签的 src 属性来实现跨域。
• 代理跨域
• 通过修改nginx服务器配置实现代理转发
• 前端修改，后端不用

• 正向代理
• 正向代理即是客户端代理, 代理客户端, 服务端不知道实际发起请求的客户端.
• 反向代理
• 反向代理即是服务端代理, 代理服务端, 客户端不知道实际提供服务的服务端

• 区别：
• 从用途上来讲：
• 反向代理的典型用途是为后端的多台服务器提供负载平衡，或为后端较慢的服务器提供缓冲服务。
• 从安全性来讲：
• 正向代理允许客户端通过它访问任意网站并且隐藏客户端自身，因此你必须采取安全措施以确保仅为经过授权的客户端提供服务。
• 反向代理对外都是透明的，访问者并不知道自己访问的是一个代理。
• 从使用方来看：
• 正向代理是浏览器端进行配置的，与服务器端无关，甚至可以对服务端隐藏。
• 反向代理是服务器端配置的，对浏览器端是透明的。

• null表示此处无值或是后期需要给赋值而undefined是表示此处应该有值而没给赋值

• 在内存中创建一个新对象

• 新对象内部的prototype属性被赋值为构造函数的prototype属性
• 构造函数的this指向其新对象
• 执行构造函数内部的代码（即给新对象添加属性）
• 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象

• $号是jQuery“类”的一个别称，$()构造了一个jQuery对象。所以，“$()”可以叫做jQuery的构造函数。

• get请求一般是去取获取数据（其实也可以提交，但常见的是获取数据）post请求一般是去提交数据。
• get因为参数会放在url中，所以隐私性，安全性较差，而post请求数据是放在body中的，安全性较高。
• get和post 请求的数据长度是有限制的，不同的浏览器和服务器不同，一般限制在 2~8K 之间，更加常见的是 1k 以内；post请求是没有的长度限制。
• get请求可以被缓存，post请求不会被缓存。
• get请求会被保存在浏览器历史记录当中，post不会。
• get请求刷新服务器或者回退没有影响，post请求回退时会重新提交数据请求。

• Object构造函数式
• 对象字面量式
• 构造函数模式
• 原型模式

• 所有的变量、函数存储在内存中，当作用域消失的时候，内存自动释放

• 不再用到的内存，没有及时释放，就叫做内存泄漏
• 全局变量、闭包、DOM 清空或删除时，事件未清除、子元素存在引用

• 数组表示有序数据的集合，而对象表示无序数据的集合。
• 数组的数据没有”名称”（name），对象的数据有”名称”（name）。

• 会话cookie(关闭浏览器是清除cookie)
• 持久cookie,date是指定过多久之后清除cookie

• 序列化：js中的object转化为字符串
• 反序列化：json字符串转化为object

• for循环是通过 生成 数组的索引下标 循环遍历数组的每一个数据元素
• forEach是 JavaScript定义的数组的函数方法 通过 JavaScript底层程序 循环遍历数组的数据元素

• for循环 可以 通过 break 关键词 来终止循环的执行
• forEach 中 调用执行 break 程序会报错

• for循环可以通过 控制循环变量 的数值 控制 对于循环的执行
• forEach循环 中 参数存储数据都是底层程序进行赋值 无法进行赋值修改等操作

• for循环 在循环外 可以调用循环变量
• forEach循环 在循环外 不能调用 循环变量

• 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了；
• 面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。
• 面向对象是以功能来划分问题，而不是步骤。面向对象使用对象，类，继承，封装等基本概念来进行程序设计。
• 优缺点：
• 面向过程：
• 优点：性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源;比如嵌入式开发、Linux/Unix等一般采用面向过程开发，性能是重要的因素。
• 缺点：没有面向对象易维护、易复用、易扩展
• 面向对象：
• 优点：可读性高，易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护。
• 缺点：类调用时需要实例化，开销比较大，性能比面向过程低

• 栈：栈会自动分配内存空间，会自动释放，存放基本类型，简单的数据段，占据固定大小的空间。
• 堆：动态分配的内存，大小不定也不会自动释放，存放引用类型，指那些可能由多个值构成的对象，保存在堆内存中，包含引用类型的变量，实际上保存的不是变量本身，而是指向该对象的指针。
• 基本数据类型存储在栈中

• 引用类型的对象存储于堆中

VUE方面