Js 5.4

Js相关

一、原型和原型链 *****

1. prototype
   每个函数都有一个prototype属性，被称为显式原型，里面包含了这个构造函数公共的方法
   2._ proto _
   每个实例对象都会有_ proto 属性,其被称为隐式原型
   每一个实例对象的隐式原型 proto _属性指向自身构造函数的显式原型prototype
2. constructor
   每个prototype原型都有一个constructor属性，指向它关联的构造函数。
3. 原型链
   获取对象属性时，如果对象本身没有这个属性，那就会去他的原型_ proto 上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有 proto _属性值为null。

二、作用域 ***

1.作用域：
作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域

全局作用域就是 Js 中最外层的作用域
函数作用域是 js 通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套
Es6 中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等）

2.自由变量：
当前作用域外的变量都是自由变量，作用域链就是 自己没有这个变量就从上一级作用域查找，直到找到为止，直到找到顶层 window，没有的话就报错 3.变量提升:
每个 var 声明的变量，function 声明的函数存在变量提升。变量和函数都有声明提升，let const 不存在变量提升
会把声明语句提到代码的最顶端，赋值语句留在原地等待执行
Var a=10 var a 会被提升 a=10 会留在原地

（在 js 中声明之前未定义，会在 js 的最上方会形成一个预解析池，用来存储声明了但没有先定义的变量名）

三、闭包 *****

闭包： 闭包是指可以访问另一个函数内部变量的函数
简单的理解就是函数中套了一个函数，内层函数可以访问外层函数中的变量
有时候需要用到函数内的局部变量，在正常情况下是不能读取到的，这个时候就需要用到闭包。
闭包可以封装对象的私有属性和方法，vue中的data就是一种闭包的形式。
闭包作为回调函数，可以实现函数的复用

优点：闭包因为长期驻扎在内存中。可以重复使用变量，不会造成变量污染
缺点：闭包会使函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，可能会导致内存泄露。解决方法是在退出函数之前，将不使用的变量全部删除。

四、This的指向 *****

在js中this不是固定不变的，它会随着执行环境的改变而改变。要注意的是this取什么值，是在执行时确认的，定义时无法确认。
this的调用大概分为五种场景：
1.浏览器里，在全局范围内的this 指向window对象；
2.在函数中，this永远指向最后调用他的那个对象；
3.构造函数中，this指向new出来的那个新的对象；
4.箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；
有三个方法改变this：
call:参数是单个使用的，
apply:参数是一个数组
call和apply都会立刻调用这个函数
bind:只改变this 不会让函数立刻调用

六，宏任务和微任务 ***

js中的一个机制，就是遇到宏任务，先执行宏任务，将宏任务放入eventqueue，然后在执行微任务。

宏任务和微任务都包含一些事件
宏任务：setTimeout,setInterval,Ajax,DOM事件
微任务：Promise async/await
js是单线程的，只能做一件事情，如果碰到异步任务就会把异步任务放在任务队列里等待执行，等到同步任务执行完成了，而且异步任务准备好了就会被放进主线程等待依次执行。异步的特点不会阻塞后面代码的执行。也就是请求处理过程中，你不能闲着，会产生异步的请求。回头再处理，然后继续执行下面的请求。
异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助

九，dom操作 **

DOM是网页中用来表示文档中对象的标准模型，他是由节点和对象组成的结构集合。在浏览器解析HTML标签时，会构建一个DOM树结构。
由此呢js也提供了一些dom的操作
一、dom元素获取
1.document.getElementById(id的值) 通过id来获取元素的对象，返回值是一个对象
2.document.getElementsByName(name) 通过name属性来获取对象的,返回值是一个数组，与getElementById()方法类似，但他是查询的name元素，而不是id属性
3.document.getElementsByTagName() 通过标签来获取元素的对象, 返回值是一个数组
4.document.getElementsByClassName() 通过class类名来获取的对象,返回值是一个数组
5.document.querySelector() css选择器，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null
6.document.querySelectorAll() css选择器，返回与该模式匹配的所有元素，结果为一个类数组二、dom创建
二、dom操作

1. 创建：新的标签(元素节点) = document.createElement(“标签名”)
2. 删除：父节点.removeChild(子节点);
3. 插入：insertBefore(新插入的节点，参照物节点) 往某个节点的前面插入一个新的节点
4. 追加：appendChild(新的节点的名) 当前对象追加一个子节点

十一，事件 ***

一、事件绑定、事件流、自定义事件
1.事件绑定的方法 普通的绑定
一是直接在标签内直接添加执行语句，二是定义执行函数。
（

<script>
	document.getElementById('button').onclick=function(){								alert(document.getElementById('test').value);
	}
</script> ）

2.第二种绑定事件的方式是事件监听

第一个参数：事件名称
第二个参数：执行函数
第三个参数：指定冒泡还是捕获，默认是false，冒泡。

element.addEventListener('click',function(){},false)

移除事件监听
element.removeEventListener(‘click’,function(){},false)

2.DOM事件两种类型
事件类型分两种：事件捕获、事件冒泡。
事件捕获就是由外往内，从事件发生的顶点开始，逐级往下查找，一直到目标元素。
事件冒泡就是由内往外，从具体的目标节点元素触发，逐级向上传递，直到根节点。

3.DOM事件的事件流（事件传播）（背冒泡捕获的答案就可以）
事件流就是，事件传播过程。
DOM完整的事件流包括三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。
事件通过捕获到达目标元素，这个时候就是目标阶段。从目标节点元素将事件上传到根节点的过程就是第三个阶段，冒泡阶段。

4.事件捕获的具体流程
当事件发生在 DOM元素上时，该事件并不完全发生在那个元素上。在捕获阶段，事件从window开始，之后是document对象，一直到触发事件的元素。

5.事件冒泡的具体过程
当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。在冒泡阶段，事件冒泡，或者事件发生在它的父代，祖父母，直到到达window为止。

6.我们也可以通过 new Event()自定义事件

二、事件委托
瀑布流：无限上拉列表中，如果给每一个图片绑定点击事件，非常繁琐且消耗内存。所以我们可以把每张图片上的点击事件委托给共同的父元素。

事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了

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

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

三、封装一个通用的事件绑定函数

我们在封装这个函数的时候可以用事件监听来实现 ，封装的函数有三个参数，第一个是要绑定事件的元素，第二个是要绑定的事件类型，第三个是事件的执行函数。
调用这个函数 就可以实现给某个元素绑定一个事件了。

（需要点击每个a，来。弹出他们的内容

a1
a2
a3
a4
加载更多...

// 封装通用的事件绑定函数 function bindEvent(elem, type, fn) { elem.addEventListener(type, fn) }

//获取父元素
const fu = document.getElementById(‘div3’)
bindEvent(fu, ‘click’, function (event) {
// console.log(event.target) // 获取触发的元素
let target=event.target
event.preventDefault() // 阻止默认行为
//过滤符合条件的子元素，主要是过滤掉 加载更多
if(target.nodeName.toLowerCase()===“A”){
alert(target.innerHTML;
}
})
）

一、原生Ajax的创建过程 ***

1.创建xhr 核心对象
var xhr=new XMLHttpRequest();

2.调用open 准备发送
参数一：请求方式
参数二: 请求地址
参数三：true异步，false 同步
xhr.open(‘post’,‘http://www.baidu.com/api/search’,true)

3.如果是post请求，必须设置请求头。
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)

4.调用send 发送请求 （如果不需要参数，就写null）
xhr.send(‘user=tom&age=10&sex=女’)

5.监听异步回调 onreadystatechange
判断readyState 为4 表示请求完成
判断status 状态码 为 200 表示接口请求成功
responeseText 为相应数据。字符串类型。
xhr.οnlοad=function(){
if(xhr.readyState4){
if(xhr.status200){
console.log(xhr.responseText);
var res=JSON.parse(xhr.responseText);
console.log(res);
if(res.code==1){
modal.modal(‘hide’);
location.reload();
}
}
}
备注：如果是post请求，想要传json格式数据。
设置请求头

1.xhr.setRequestHeader(‘Content-Type’, ‘application/json’)

open发送数据
2.xhr.open({_id:xxx,user:xxxx,age:xxxx})

二、Jsonp的原理 ****

JSONP原理：

ajax 请求受同源策略影响，不允许进行请求，我们利用 script 标签的 src 属性不受同源策略的约束，利用这个特性jsonp需要以下步骤：

1.动态创建添加到页面中执行 （body.appendChild(‘script’)）
4.页面要提前定义好callback。
5.后端会返回回调函数执行并包裹参数callback(data)
备注：
服务端不再返回JSON格式的数据，而是返回回调函数包裹数据（fn({name:‘tom’,age:18}），在src中进行了调用，这样实现了跨域。

十三、存储 *****

本地存储分为cookie、localStorage、sessionStorage，
Cookie
Cookie设计初衷是用来和服务器通讯，而不是本地存储，他只是被‘借用’到本地存储。
Cookie有一些缺点：存储空间小，最大4k、用的时候比较麻烦

localStorage、sessionStorage
在HTML5中，新加入了一个localStorage/sessionStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小。
优点：HTML5专门为存储而设计，最大可存5M、API简单易用setItem getItem、不会随着http请求被发送出去

localStorage、sessionStorage.cookie不同点：

Cookie 可以设置过期时间 存储容量比较小 用起来没有方便的方法
localStorage数据会永久存储，除非代码或手动删除
sessionStroage 数据只存在于当前会话，浏览器关闭则清空
一般用localStorage会更多一些

注意：localStorage只支持string类型的存储。