前端 - JavaScript

前端事件流

概念：是从页面中接受事件的顺序
可以分为事件捕获阶段 、处于目标阶段、事件冒泡阶段。
事件流最主要的就是addEventListener这个函数，第三个参数为true的话表示在事件捕获阶段调用，为false的话，标识在事件冒泡阶段调用
事件捕获阶段：实际目标div在捕获阶段不会接收事件，也就是在捕获阶段事件从document倒这就停止了
处于目标阶段：事件在div发生并处理，到时事件处理会被看成是冒泡阶段的一部分
冒泡阶段：事件又传播回文档
阻止默认事件：IE：return false； 非IE：e.preventDefault()
阻止冒泡：IE：Window.event.cancelBubble = true;非IE：e.stoppropagation()

事件委托（提高性能）：

是指：不是在事件発生的DOM上绑定事件，而是在他的父元素绑定事件，通过事件冒泡父元素可以监听刀子元素事件的触发
window.onload = function(){
　　var oUl = document.getElementById(“ul1”);
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == ‘li’){
　 　　　　　　 alert(123);
　　　　　　　 alert(target.innerHTML);
　　　　}
　　}
}

js的new操作符

1、创建空对象
2、让空对象的__proto__指向构造函数的prototype
3、让this指向新创建的对象
4、执行构造函数代码
5、返回新对象

this指向问题

this的中文翻译之后就是 ”这个“，我认为是指当前这个的意思
当函数作为对象的方法被调用时，this指向这个对象
作为普通函数的话，this指向window
作为构造函数调用，this指向返回的这个对象
箭头函数绑定在当前环境，当前所在的对象，如果有嵌套，则绑定在最近的对象上

箭头函数this的原理

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数跟不没有自己的this，导致内部的this就是外层代码块的this，正式因为他没有this，所以不能当做构造函数

怎么改变this的指向呢？

1、使用es6箭头函数
2、在函数内部定义引用that = this
3、apply、call、bind
4、new实例化一个对象

call、apply、bind的区别？

call、apply他们两个的第一个参数都是一样的表示要改变指向的对象，第二个参数call是以逗号隔开，apply是数组的形式
bind是返回一个函数

深浅拷贝之数据类型

基本类型：
undefined、null、Boolean、String、Number、Symbol、在内存中大小固定、保存在栈内存中、基本数据类型的复制就是创建了一个新的副本，改变值旧对象不会改变。
引用类型：
Object、Array、Date、Function等引用类型的值是对象，保存在堆内存中， 而栈内存存储的是对象的变量标识符和对象的储存地址

深浅拷贝之实现方式

浅拷贝：仅仅复制了引用，会影响原来的值，只能拷贝一层，slice、concat、obj.assign。
深拷贝：在堆中重新创建内存，不同的地址，不同的值，互不影响，可以层层拷贝，json.string、json.parse

settimeout和setinterval的区别

js是单线程的、浏览器遇到settimeout和setinterval会先把他们推入浏览器的待执行时间队列里边，然后向下执行代码，代码执行完之后去看事件队列里边有没有任务，有的话就执行

前端跨域问题

同源策略：协议、域名、端口号要相同
1、jsonp：只能解决get。原理：动态创建一个script标签，利用script的src和herf都不受同源策略的限制去请求第三方度服务器的资源内容。地址后边问号然后生命一个函数用来本地接受
2、document.domain基础域名相同，子域名不同
3、window.name利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name
4、服务端设置HTTP响应头Access-Control-Allow-Origin
5、H5新特性window.postMessage(data,url)

图片预加载和懒加载

预加载：
提前加载图片，当用户需要查看时可以直接从本地缓存中渲染，在网页加载之前就先对一些主要内容进行加载，也可以先使用svg占位图等待数据的请求，否则，如果一个页面的内容过于庞大，就会出现空白。这样可以提升用户体验。
懒加载：
客户端优化，减少请求次数和无效资源的加载，防止并发加载的资源过多会阻塞js加载。
首先将页面上的图片的src设置为空字符串，而图片的真事路径啧设置在data-original属性中，当页面滚动到可视区域，就讲data-original的值赋给src，就可使实现懒加载

函数的防抖和节流：都是为解决高频事件而来

防抖：短时间内多次触发同一个事件，只执行开头或者最后的一次
节流：节流是连续触发事件的过程中在一定的时间内间隔执行函数，会稀释频率，比如每隔一秒执行一次，无论这一秒钟触发了多少次

js垃圾回收机制

常用的方法是标记清除，在局部作用域很好实现，全局比较难，所以应该尽量避免全局变量
标记清除：当变量进入环境时，就将这个变量标记为"进入环境"，永远不能释放进入环境变量所占用的内存，当变量离开环境时，则将其标记为"离开环境"，垃圾回收机制会回收这个被标记为"离开环境"的变量

引用计数：语言引擎有一张"引用表"，保存了内存里面所有资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。

js数据类型判断

1、typeof：判断及数据类型String、Number、Boolean、undefined、Symbol对于引用类型的是object，对于function返回function
2、installof操作符，用来判断A是否是B的实例
3、tostring是object的原型方法，对于object对象，可以直接调用tostring
hasOwnproperty()方法返回布尔值，指示对象吱自身属性中是否带有指定的属性，不包括从原型链上继承到的属性

splice、slice、map、forEach、filter、reduce

slice（start，end）方法返回从数组中选定的元素，返回一个新数组，包含从start到end包含start不包含end
splice（）方法删除或者修改数组元素，参数一规定开始下标，参数二规定数量，参数三可选：把元素修改成什么？返回被删除的元素，该方法会改变原数组
map（）返回一个全新的数组，适用于改变数据值的时候
forEach（）不会返回任何有价值的东西，并不打算改变数据，单纯的只是想做一些事情，它允许callback更改数组的元素
filter（）方法创建一个新数组，新数组中的元素是符合条件的所有元素
reduce（）方法接受一个函数作为累加器，从左到右开始缩减，最终计算一个值

js、css阻塞

js阻塞：
所有浏览器在下载js的时候，会阻止一切其他活动，比如资源的下载，知道js下载、解析、执行完成之后才开始继续并行下载其他内容
css阻塞
因为浏览器会维持html中的css和js 的顺序，样式表必须在加载js前先加载、解析完成，否则就会出现css阻塞下载的情况

class类的创建和继承

待…

闭包

待…

内存的理解

内存溢出和内存泄漏（给的不够用，用了不归还）

内存溢出：
在程序申请内存时，没有足够的内存空间供其使用，出现out of memory;这就是内存溢出

内存泄漏：
在程序申请内存后，无法释放已申请的内存空间，一次内存泄漏可以忽略，但是内存泄漏堆积后果很严重，无论多少内存，迟到会被占用完，比如说闭包中的this、对象函数、匿名函数返回函数

作用域

概念的话.是我自己总结的一句话：代码在一个环境中执行时，会创建变量对象，他的作用是代码在当前的执行环境可以有权访问的所有变量和对象，作用域变量只能被向上访问，直到Windows被终止，不允许向下访问

原型链.老生常谈

函数的原型链对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个__proto__属性，该指针是指向上一层原型对象，因此可以用__proto__一直指向object的原型对象上，而原型链顶端是Object.prototype.proto = null 。如此便形成了js的原型链

将arguments类数组转换为真正的数组

Array.apply(null,arguments)
Array.prototype.slice.apply(arguments)
Array.from(arguments)

高阶函数（好nb的样子）

1、函数作为参数传递，抽离出一部分容易变化的业务逻辑，放在函数的参数中，这样可以分离业务代码中变化与不变化的部分回调函数
2、函数作为返回值传递

渐进增强和优雅降级

渐进增强：就是针对低版本浏览器进行构建页面，保证最基本的功能，然后对高级浏览器进行效果、交互等改进。来达到更好的用户体验
优雅降级：一开始构建完整的功能，然后对低版本的进行兼容

undefined和null的区别

1、undefined类型只有一个，即undefined ：当生命变量还未被初始化就是undefined
2、null类型也只有一个值，即null ： null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象
3、NaN与任何值比较的结果都是false

函数的柯里化

概念：一个函数接受函数A作为参数，运行后返回一个return function一个新函数，并且可以处理A中的参数（只接受单一参数的函数）
意义：将函数完全变成了接受一个参数，返回一个参数的固定形式，便于优化和讨论

while和 do while

待…

同步和异步

同步：

由于js是单线程的，同步任务都会在主线程上排队执行，千面任务没有执行完成，后面的就会一直等待

异步

不进入主线程，进入任务队列，等待主线程任务执行完，开始执行异步任务

异步回调

promise、generator、async/await
promise：

1、是一个对象，用来传递异步操作的信息。代表着某个未来才会知道结果的事件，用来供异步处理
2、有了这个对象，就可以让异步操作以同步的流程表达出来，避免层层嵌套的回调地狱
3、promise代表一个异步状态，有三种：pending（进行中）、Resolve（已完成）、Reject（失败）
4、一旦状态改变就不会再变，任何时候都可以得到结果。从进行中变为已完成或者失败