前端八股文

什么是闭包

闭包是指一个函数有权访问另一个函数作用域中变量的函数就叫做闭包。一个有状态的函数
优点： 1.可以避免全局变量污染 2.延长变量的生命周期 3.闭包中的变量不会被垃圾回收或者机制回收
缺点：1.内存消耗大影响性能 2.导致内存泄漏
原理：就是作用域链，因为作用域连就是在当前执行环境下访问了某个变量，如果变量不存在再就一直往外层找，直到最终找到最外层也就是全局作用域，就形成了一个链条，也就形成了一个闭包

Js数据类型

**基本数据类型 **：number，string，bool，undefined，null
**复杂(引用)数据类型 **：Object( es6新增加的数据类型：1、Symbol类型；2、Set类型；3、Map类型；4、WeakSet类型；5、WeakMap类型；6、TypedArray类型。)
常见问题
Q1：怎么让一个对象具有一个私有属性？（Symbol有什么用？）
Answer：用 Symbol 作为对象的 key 即可
Q2：怎么快速去重一个数组？
Answer：用 Set 加 Array.form() 或者[…new set()]
Q3：Map有啥用？
Answer：map 更像是对象的拓展，他的 key 可以是任意类型，不再像之前的对象 key 只能是字符串，也就是这个特性，我们可以去优化之前的去重，但是也没有必要，因为已经有 set 了。
Q4：WeakMap 和 Map 的区别？
Answer：1.WeakMap 区别就是对 key 的引用是弱引用,2.WeakMap 的 key 只能是对象
问题引申
**基本数据类型和引用数据类型的区别 ？ **
复杂数据类型会粗放具体内容的引用地址；基本数据类型是值的比较，引用类型比较的是地址，会比较两个对象保存在栈区的指向堆内的地址是否相同；赋值上，引用类型是复制了一个地址，当两个地址指向同一个对象时，改变其中任何一个变量都会互相影响
**判断数据类型的几种方式 **
typeof(判断null为object) instanceof(不能直接判断基本类型的) ，Constructor(不能判断 null 和 undefined) Object.prototype.toString
**深拷贝和浅拷贝 **
深拷贝复制变量值，拷贝后的对象与原来的对象是完全隔离的

Let，Const

let声明变量，const声明常量，常量一旦声明不可改变，声明时必须初始化。不存在变量提升；不会重复申明；不会自动变成 window 对象的属性或方法；有块级作用域；存在暂时性死区

执行上下文、执行栈

执行上下文
代码被解析和执行时，所在的环境。全局执行上下文（只有一个就是window对象）， 函数执行上下文（可以有多个），eval() 函数执行上下文。
执行栈（调用栈）
Js是单线程的，只能同时做一件事；当多个执行上下文存在时，执行栈就是负责管理多个执行上下文的，它存储了代码执行期间所有的执行上下文

作用域和作用域链

作⽤域
即变量（变量作⽤域⼜称上下⽂）和函数⽣效（能被访问）的区域或集合
作用域链
当在 Javascript 中使⽤⼀个变量的时候，⾸先 Javascript 引擎会尝试在当前作⽤域下去寻找该变 量，如果没找到，再到它的上层作⽤域寻找，以此类推直到找到该变量或是已经到了全局作⽤域或者找不到
引申问题

• JavaScript 遵循的就是词法作⽤域
• 作用域和执行上下文的区别 作用域在解释阶段确定的，并且不会改变；执行上下文在运行阶段确定的，随时可能改变
• 作用域和执行上下文的区别 作用域在解释阶段确定的，并且不会改变；执行上下文在运行阶段确定的，随时可能改变

This指向的几种情况

指向Window 全局函数，箭头函数，事件绑定函数
谁调用指向谁
严格模式下指向undefined
setTimeout里普通函数指向window，箭头函数指向上一层
改变 this 指向的三个方法：apply / call / bind ps:bind不能多次指向

解决异步

回调；事件监听（发布订阅模式）；Promise；Generator；async/await

什么是AJAX

异步的javaScript和XML，可以在不重新加载整个网页的情况下 , 与服务器交换数据 并更新部分网页
实现：1. 创建Ajax的核心对象XMLHttpRequest 对象
2. 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
3. 构建请求所需要的数据内容 并通过XMLHttpRequest对象的send()方法发送给服务器端
4. 通过 XMLHttpRequest 对象提供的onreadystatechange事件监听服务器端你的通信状态
5. 接收并处理服务器端向客户端响应的数据结果
6. 将处理结果更新到 HTML 页面中

promise对象

对象的状态不受外界影响（pending，fulfilled，rejectded）；一旦状态改变，就不会再变，任何时候都可以得到这个结果
写法：new Promise(( reslove, reject ) =>{})

宏任务和微任务

宏任务与微任务表示异步任务的两种分类。宏任务：包括整体代码script(可以理解为外层同步代码)、settimeout、setInterval、i/o、ui render。微任务：promise、object.observe、MutationObserver(监听DOM树的变化) 放入队列时宏任务、微任务不分优先级，但是将队列中的任务拿到执行栈中执行微任务优先（当微任务队列的所有任务全部执行完后，才开始执行宏任务

原型和原型链

函数对象 就是普通对象
实例对象 new出来的对象
原型对象 所有函数对象都有一个对应的原型对象，所有的原型对象都是被Object对象创建出来的
原型：是一个对象，是函数的一个属性，通过该函数实例化出来的对象都可以继承该原型上的所有属性和方法
原型对象默认有一个constructor属性，值为对应的构造函数，还有一个_proto_属，值为对应的Object.prototype
原型链：是对象和对象之间的链接，通过_porto_属性指向函数的原型对象，一层一层往上找，直到找到Object的原型对象，层层继承的链接结构叫做原型链

实现继承的方法

1.原型链继
2.借用构造函数继承
3.组合继承（经典继承）
4.原型式继承方Object.create()
5.寄生式继承
6.寄生组合式继承
7.ES6、Class实现继承

自适应布局、响应式布局、弹性布局

自适应布局：针对不同分辨率采用@media媒体查询给不同范围的屏幕分别写一套样式布
响应式布局的三个原则：移动优先，@media媒体查询，流式布局（也称为液体布局）。其中首要的就是移动优先，移动优先指的是优先设置移动端（也就是小屏的布局），然后针对不同屏幕使用渐进增强。一般用于同时兼容pc端和移动端
弹性布局指的是页面能够根据屏幕的大小进行缩放，实现这种布局的方式有两种类型

浏览器输入一个url后，发生了什么

用户输入url，浏览器进程接受url转发给网络进程，在网络进程中进行真正的url请求，DNS解析真正的IP地址，根据URL的字段构建http请求信息，包括请求行，请求头和请求体，建立TCp链接，三次握手，服务器接受处理请求，浏览器展示html

重点在三次握手环节 ，后期补充

Dom渲染

处理 HTML 并构建 DOM 树。
处理 CSS构建 CSSOM 树。
将 DOM 与 CSSOM 合并成一个渲染树。
根据渲染树来布局，计算每个节点的位置。
调用 GPU 绘制，合成图层，显示在屏幕上

Css盒模型

网页页面布局的过程可以看作在页面空间中摆放盒子的过程。通过调整盒子的边框、边界等参数控制各个盒子，实现对整个网页的布局。
盒模型由内到外依次分为内容（content）、填充（padding）、边框（border）和边界（margin）4部分。
block类型与inline类型
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效。
块级元素和行内元素
块级元素可以包含行内元素和块级元素，宽度默认100%，即和浏览器同宽。行内元素不能包含块级元素，宽度无法设置，只和包含的内容有关。
块级元素
div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre
HTML5：header、section、article、footer等等，
行内元素（内联函数）及行内块元素
span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u,button（display：inline-block） ps：特殊的行内元素可以设置宽高、、、、

浮动

非ie浏览器下，容器不设置高度且子元素浮动，容器高度不能被内容撑开，此时内容会溢出印象布局，引起高度塌陷
解决：1.给父级添加高度2.在浮动元素后添加一个div，并添加clear：both3.包含浮动元素的父级元素添加overflow：hidden或者overflow：auto 4.使用after伪元素

ES6新特性

解构赋值 扩展运算符
扩展运算符可以与解构赋值结合起来，用于生成数组

const[first, ...rest] = [1, 2, 3, 4, 5];
first   // 1        rest   // [2, 3, 4, 5]

==构造函数新增的方法 ==
Array.of() //用于将一组值，转换为数组
Array.from() //将两类对象转为真正的数组：类似数组的对象和可遍历（iterable）的对象

实例对象新增的方法
copyWithin()：将指定位置的成员复制到其他位置（会覆盖原有成员），返回当前数组
find()用于找出第一个符合条件的数组成员
includes() ：用于判断数组是否包含给定的值
flat() ：将数组扁平化处理，返回一个新数组，对原数据没有影响

对象新增了哪些扩展
*super关键字
this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象
*对象新增的方法
Object.assign() 用于对象的合并
Object.is() ：严格判断两个值是否相等

ES6中函数新增了哪些扩展
*参数
ES6允许为函数的参数设置默认值
函数的形参是默认声明的，不能使用let或const再次声明
*属性
函数的length属性：length将返回没有指定默认值的参数个数
name属性：返回该函数的函数名
*作用域
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域
*严格模式
只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错
*箭头函数
使用“箭头”（=>）定义函数
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象