JavaScript/ES6学习

一、JavaScript进阶

1.如何理解关键字this

1. 直接输出this指向全局对象window。
2. 以函数的形式调用，this指向全局对象window。
3. 以方法的形式调用（this放在方法中），this指向调用这个方法的对象。
4. 以构造函数的形式调用，this指向new创建的对象。
5. 事件中的this,指向触发事件的DOM对象。
6. 箭头函数中的this（箭头函数本身没有this），指向定义函数上下文的this。通俗的说就是箭头函数外指向谁就指向谁

2.call、apply、bind基本语法

1.call()、apply()是一个方法，是函数对象的方法。可以改变函数中this的指向，实现（多重）继承。
2. call 与 apply 的相同点：方法功能是一样的；第一个参数的作用是一样的。
3.call 与 apply 的不同点：两者传入的列表形式不一样，call可以传入多个参数；apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入。
4.bind()不会调用函数，会返回值。
5.基于call()的继承。
！！手写

3.new关键字做了什么

1. 创建一个新的空对象
2. this指向刚创建的空对象
3. 执行构造函数，将属性和方法添加到空对象构造函数：用来创建对象
4. 返回对象

字面量创建对象和new创建对象有什么区别
字面量创建对象更简单，方便阅读；不需要作用域解析，速度更快；可读性，可维护性好，更加体现了封装性

4.JS的执行机制

同步：按顺序执行,从前到后一个一个执行 异步：先执行一部分，等拿到结果（或者到时间）再执行后续代码。 同步任务：都在主线程上执行，形成一个执行栈。 异步任务：JS的异步一般是通过回调函数实现的。
JS是单线程，即同一时间只能做一件事情，一个任务完成之后才能执行另一任务。同步任务执行完成后再执行异步任务。

• 为什么js是单线程：js里面有可视Dom，如果是多线程，一个线程正在删除DOM节点，另一个线程正在编辑Dom节点，导致浏览器不知道该听谁的。

事件循环

1.先执行执行栈中的同步任务
2. 异步任务放入任务队列中
3. 执行栈中所有同步任务执行完毕，依次读取任务队列中异步任务，被读取的异步任务结束等待状态，进入执行栈，开始执行。 由于主线程不断的重复获得异步任务，执行任务，再获得任务异步任务，再执行任务，这种机制就被称为事件循环。

• 宏任务：计时器（setTimeout，setInterval），ajax ， 读取文件
• 微任务：promise.then
• 执行顺序：同步程序—process.nextTick—异步(微任务—宏任务)—setImmediate(当前事件循环结束，执行)

5.事件冒泡、事件委托

事件冒泡：事件冒泡就是事件向上进行，后代元素事件触发时，与其绑定一样事件的祖先元素也会触发。
事件委托：利用事件冒泡机制，将事件绑定再祖先元素上。

6.promise ，async，await

async函数的返回值是promise对象，使用await可以拿到promise的值 异常处理机制使用try,catch块实现

7.闭包！！

• 闭包：函数执行，形成私有执行上下文，使内部私有变量不受外界干扰，起到保护和保存的作用。闭包 = 内层函数 + 引用的外层函数变量
• 特点：
  1.函数嵌套函数，内部函数就是闭包。
  2.函数内部可以引用函数外部的参数和变量。
  3.参数和变量不会被垃圾回收机制回收。正常情况下函数执行完成，函数内部的变量就会被销毁（释放内存空间）。闭包，内部函数没有被执行，外部函数的变量不会被销毁。
• 作用：
  1.保护，避免命名冲突。
  2.保存，解决循环绑定引发的索引问题
  3.变量不会销毁，可以使用函数内部的变量，使变量不会被垃圾回收机制回收。
• 应用：防抖节流 、 for循环中保留i的操作
• 缺点：会出现内存泄漏的问题

8. 对象拷贝

1.浅拷贝：拷贝后，修改拷贝后的对象，会影响拷贝前的对象
2.深拷贝：拷贝后，修改拷贝后的对象，不影响之前的对象
3.通过json拷贝
浅拷贝是拷贝一层，深层次的对象级别的就拷贝引用；深拷贝是拷贝多层，每一级别的数据都会拷贝出来；

9.原型对象，原型，原型链

原型分为 隐式原型 显式原型

1. 每一个函数都有一个显式原型, 叫做prototype, 是一个对象数据类型
2. 每一个对象都有一个隐式原型, 叫做 proto, 指向所属构造函数的显示原型 prototype

• fn时函数，Foo是构造函数。 fn._ _ proto _ === Foo.prototype 又因为Foo.prototype是一个普通的对象，它的构造-函数是Object，所以： Foo.prototype. _ proto _ _=== Object.prototype
• 所有对象的原型最终都指向Object对象，Object是原型链的顶端，它的隐式原型__proto__ == null
• 当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

10.对Js面向对象的理解

oop面向对象就是编程思想，有三大特性
封装：
继承：子类可以继承
多态：

说一说JS中常用的继承方法有哪些，以及各个继承方式的优缺点

原型继承
组合继承
寄生组合继承
ES6的exten

内存泄漏、垃圾回收机制

1. 什么是内存泄漏：内存泄漏是指不在用的内存没有被及时释放，导致该段内存无法被使用。
2. 为什么导致内存泄漏：无法通过JS访问某个对象，而垃圾回收机制却认为该对象还在被引用，因此垃圾回收机制不会释放该对象，导致该内存永远无法释放，积少成多，系统会越来越卡以至于崩溃。
3. 垃圾回收机制：当一个对象没有任何变量或者属性对他进行引用，我们将无法操作对象，此时该对象就是垃圾。在JS中拥有自动垃圾回收机制。我们只需要将不使用的对象设置为null

执行栈和执行上下文

1. 什么是作用域和作用域链

• 规定变量和函数的可使用范围称为作用域
• 每个函数都有一个作用域链，查找变量或者函数时，需要从局部作用域到全局作用域依次查找，这些作用域的集合称为作用域链。

2. 什么是执行栈，什么是执行栈上下文
   执行栈：特点：先进后出

谈谈模块化

模块化是指将一个复杂问题，自顶向下逐层把系统划分为若干模块的过程。对于整个系统来说，这些模块可组合，分解和更换的单元。对于编程领域的模块化就是遵守固定的原则，将一个大文件拆分成多个独立且相互依赖的小模块。简单理解模块化就是在一个js文件中能够引入另一个js文件。
优点：

• 提高了代码的复用性
• 提高了代码的可维护性
• 可以实现按需加载
• 防止变量污染

二、JavaScript基础

JS数组方法总结

1.数组的增

• push():作用是在数组末尾增添数据；返回的是数组的长度。
• unshift():作用是在数组的第一位增加数据；返回的也是长度。
• splice(arg1,agr2,…arg3):arg1表示索引，操作数组的位置，arg2表示要删除元素的个数，可以为0，表示不删除，后面arg3可以是多个参数，表示在指定索引后面增加的元素；返回的是删除的数据。
• concat():连接两个数组；返回合并后的数组

2.数组的删除

• pop():删除数组中最后一个元素；返回的是被删除的数据。
• shift():删除数组中第一个数据；返回被删除数据。
• splice(arg1,agr2):arg1表示索引，操作数组的位置，arg2表示要删除元素的个数，可以为0，表示不删除，返回的是删除的数据。

3.数组的修改

• splice():当arg2的数值与arg3的个数相等时，就是修改元素的功能。

4.数组查询

• indexOf():查询并返回数据的索引
• lastIndexOf()：反向查询并返回数据的索引。
• includes(): 查询是否有该元素，返回boolean。

5.数组的遍历

• forEach()：参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self；forEach没有返回值。
• map()：同forEach，同时回调函数返回数据，组成新数组由map返回。
• filter()：同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回。
• every(): 同forEach，同时回调函数返回布尔值，全部为true，由every返回true。相等于与运算。
• some():同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true。相等于或运算。
• reduce()：归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduce返回。常作为累加器，第一个参数是回调函数，第二个参数是初始值，不传默认为0。
• for…of:返回数组的元素，对象的属性，不能遍历普通的对象

6.数组的其他操作：

• join()：使用分隔符，将数组转为字符串并返回。
• reverse()：反转数组，返回结果。
• slice()：截取指定位置的数组，并返回。
• sort()：排序（字符规则），返回结果。
• toString()：直接转为字符串，并返回。

数组去重总结

这里是引用

typeof和instanceof的区别

1. typeof返回数据类型的字符串表达式，不能判断null和object，null返回object
2. instanceof判断对象的具体类型。返回值为true，否则为false。原理：实际上就是查找目标对象的原型链。只能判断对象是否存在于目标对象的原型链中
3. ===可以判断对象的具体类型。
4. object.prototype.toString.call，一种最好的基本类型检测方式，可以区分null,object,function,data,math。缺点不能细分为谁谁的实例

== 和 ===有什么区别

1. ===是严格意义上的相等，会比较两边的数据类型和值的大小
2. ==非严格意义上的相等
   两边类型相同比较大小
   两边类型不同，转换类型在进一步进行比较

NaN === NaN返回什么

返回false,NaN永远不等于NaN。判断是否为NaN用一个函数isNaN判断
isNaN传入的如果是其它数据类型，那么现将它使用Number(),转为数字类型在进行判断。

null和undefined

都代表值不存在或未知，只是类型不同

undefined通常是定义未赋值
null定义并且赋值了，只是值为null
1.初始值为null,表示要赋值的为对象
2.释放内存，让对象成为垃圾对象，被垃圾回收机制回收
注意：二者的值是相等的，只是类型不同

数据类型有哪些

1.基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol 、 BigInt
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)。
基本数据类型的数据直接存储在栈中，引用数据类型存储在堆中

堆和栈的区别

1.栈内存自动分配内存，堆内存是动态分配内存的，不会自动释放，所以每次使用完对象的时候都要把它设置为null，从而减少内存的消耗。

var、let 、const区别

• var，let 是声明变量，const是声明常量，一旦声明必须赋值，声明后不可修改，如果声明的是复合类型数据，可以修改其属性
• var 具有变量提升，let，const 不会
• var可以重复声明，后一个变量会覆盖前一个，let，const在同一作用域中不可以重复声明。
• var的作用域，取决于在哪声明。let，const有块级作用域

回流、重绘

DOM回流(reflow)：页面中的元素增加、删除、大小、位置的改变，会引起浏览器重新计算
其他元素的位置，这种现象称为DOM回流。DOM回流非常消耗性能，尽量避免DOM回流
DOM重绘：元素的某些css样式如背景色、字体颜色等发生改变时，浏览器需要重新描绘渲染这个元素，这种现象称为DOM重绘 DOM
操作的读写分离： 在JS中把设置样式和获取样式的两种操作分来来写，
设置样式的操作放在一起，读取样式的操作放在一起，这样可以有效的减少DOM的回流和重绘；

DOM事件

e.stopPropagation()来阻止冒泡；利用 e.preventDefault()来阻止默认事件；

e.target和e.currentTarget区别

e.target是点击的对象，e.currentTarget是绑定该事件的对象。

js常见的设计模式

单例模式
工厂模式
构造函数模式
发布订阅模式
代理模式
迭代模式

JS性能优化的方式

• 垃圾回收
  防抖节流
  事件委托
  闭包
  script标签中的defer和async

三、ES6

ES6常用特性

变量定义(let和const,可变与不可变，const定义对象的特殊情况)
解构赋值
模板字符串
数组新API(例：Array.from(),entries(),values(),keys())
箭头函数(rest参数，扩展运算符，::绑定this)
Set和Map数据结构(set实例成员值唯一存储key值，map实例存储键值对(key-value))
Promise对象(前端异步解决方案进化史，generator函数，async函数)
Class语法糖(super关键字)

箭头函数和普通函数的区别

• 箭头函数没有prototype(原型)，所以箭头函数本身没有this
• 箭头函数的this指向定义时所在的外层第一个普通函数的this
• 箭头函数不能作为构造函数，不可以使用new

四、浏览器相关

从浏览器输入URL按回车到页面显示都发生了什么

• 浏览器根据URL进行DNS查询
• 取得IP地址，建立TCP连接
• 构造HTTP请求报
• 在TCP连接上发送HTTP报文，等待响应
• 服务器处理HTTP请求报文，返回响应HTTP响应报文
• 浏览器处理服务器返回的HTTP响应报文

浏览器渲染过程

1. 根据html文件构建DOM树和cssom树，如果遇到js会阻塞DOM和cssom，会优先加载js，加载完js再去构建DOM和cssom
2. 构建渲染树即Render树，渲染树是DOM树和cssom树合并而成的，计算每个页面元素，最终渲染到页面
3. 页面重绘和重排（回流），页面渲染完毕后，浏览器会根据js操作DOM元素，对页面进行重绘和重排 补充：在渲染过程中，如果遇到js将会优先执行js

get和post的区别

在axios中get 请求参数是params，而post请求是data形式。
1.get请求的参数是放在url里，post请求参数是放在请求体body里的
2.get请求的参数是放在url里，url长度受限，最大为2048个字符；post请求请求参数长度不受限。
3.get请求的参数是放在url里, 安全性差
4.get请求是可以被浏览器缓存的，post请求不能被缓存
5.get请求可以直接通过浏览器访问，支持刷新和后退，post请求不能直接使用浏览器访问，刷新后数据要重新发生。