# 补充概念
## ECMAScript与JavaScript的关系 
ECMAScript制定了语法标准而JavaScript则是对语法标准的实现 



## ES6 
ES6包含ES2015版本之后的所有版本，对JS的一个补充,E全称是ECMAScript,它是由ECMA国际标准化组织，制定的一项脚本语言的标准化 
 
 
## 说明 
ES6中新增加了两个声明语句，分别为let变量声语句和const常量声明语句 

## 块级作用域 
## 说明 
let命令和const命令都为JavaScript新增了块级作用域 
## 表现形式 
```
//都有一对大花括号构成块级作用域 
{
 
}
```


# let 
## 说明
ES6新增变量声明语句，用法类似于var


## 特点
### let是所声明的变量只在let所在的代码块内(块级作用域)有效 
```
{
 var len1 = 3
 let len2 = 4;
}

console.log(len1); // 3
console.log(len2); //ReferenceError: len2 is not defined(参数错误，len2没有定义)
```

### let声明的变量不存在变量提升，只能声明变量后再使用 
```
console.log(len1);
var len1 = 3; //undefined

console.log(len2);
let len2 = 4;
//ReferenceError: Cannot access 'len2'before initialization
//报错，未初始化之前不能访问len2

```

### 暂时性死区TDZ 
当块级作用域内存在let命令，其所声明的变量就绑定块级作用域，凡是在let命令之前使用这些变量就会报错 
```
var tmp2 = 123;

if (true) {
 tmp2 = 'abc'; // ReferenceError
 let tmp2;
}
```

### let不允许重复声明 
let不允许在相同作用域内，重复声明同一个变量 



# const 
## 说明 
用于声明一个常量 
## 特点 
### 同一作用域内一但申明则不允许修改，且不能重复声明 
### 只在自身所在的块级作用域内有效，外部无法访问 
### 不存在变量提升，且必须声明时赋值
### 存在暂时性死区，不能在声明之前访问 


## const的本质 
const保证的是变量指向的内存地址所保存的数据不得改动 
- 对于简易数据类型(string、number、bollean),值保存在栈中，即值就保存在变量所指向的内存地址
- 对于对象和数组，值保存在堆中，内存地址中的数据实际上是一个指向堆内存中实际数据的指针，const只能保存这个指针始终不变，但是堆内中的值则无法保证

ES6-基础概念

# Ajax作用 
前端向后端**异步**取数据的方法 
异步：无需刷新页面的



# 流程 
1. 创建Ajax核心对象 
2. 创建请求 
 - get 
 - post 
3. 发送请求 
4. 接受响应 
5. 解析数据 

# 创建AJAX核心对象 
```
var xmlhttp=new XMLhttpRequest() 
```

# 创建请求 
```
xmlhttp.open("请求方式","请求地址",是否异步);
```

## get请求 
### 说明 
请求参数不能写在send里面，要写在创建请求中的参数请求地址后面以?连接，此时send里传null 
请求参数以键值对形式，多个参数之间以或&链接 
### 语法 
```
xmlhttp.send(null);
```

## post请求 
### 说明 
1. 先设置请求头 
```
xmlhttp.setRequestHeader("Content‐Type","application/x‐www‐form‐urlencod ed")
```
参数 
Content-Type: 设置请求体内容的类型 
application/x-www-form-urlencoded：设置参数的类型(后端会交代)

2. 发送请求 
```
xmlhttp.send("值")
```

# 接受响应 
## Ajax的两个属性
### readyState 
#### 说明 
返回请求的状态
#### 语法
```
xmlhttp.readyState
```
xmlhttp: Ajax核心对象 

#### 包含 
 - 0(尚未初始化) 
 - 1(正在请求)
 - 2(请求完毕)
 - 3(正在响应) 
 - 4(响应完毕) 

### status
#### 说明
服务端返回的状态码 
#### 语法
```
xmlhttp.status
```
#### 包含
404 500 200(ok) 301 304


# 请求响应 
## onreadystatechange事件 
### 说明 
当readyState即请求状态发生改变时，会触发onreadystatechange事件 

#### 补充 
当请求完毕且服务器响应状态码才有数据 即: 
```
xmlhttp.readyState==4&&xmlhttp.status==200
```



# 获取服务器的响应内容 
## repsponseText属性 
### 说明 
用于获取字符串形式的响应数据 
### 语法 
```
xmlhttp.responseText
```



# 请求后常见的返回数据的格式json 
## 说明 
javascript object notation 一种数据格式同样是对象 
## 语法 
和js对象语法一样，都是由键值对构成 

## 方法 
### parse 
将json字符串转换为对象 
```
JSON.parse(json格式字符串)
```

### stringify 
将对象转换为json字符串 
```
JSON.stringify(对象)
```

Ajax-基本概念

# 说明 
让js自动运行的唯一方法 
# 特点
定时器是异步程序，和代码编写先后顺序无关 



# 分类 
- 周期性定时器 
- 一次性定时器 

# 周期性定时器 
## 说明 
每隔一段时间，就执行什么事 
## 语法 
```
setInterval(函数，间隔毫秒数)
```

# 一次性定时器 
## 说明 
等待一定的时间，做什么事 
## 语法 
```
setTimeout(函数，等待毫秒数)
```


# Eg 
![定时器](https://dev.dwxzbz.com/blogphoto/JS-Basis/%E5%AE%9A%E6%97%B6%E5%99%A8/%E5%AE%9A%E6%97%B6%E5%99%A8.jpg)

![定时器test](https://dev.dwxzbz.com/blogphoto/JS-Basis/%E5%AE%9A%E6%97%B6%E5%99%A8/%E5%AE%9A%E6%97%B6%E5%99%A8test.jpg)

从上述代码及运行结果可以证明，定时器是异步执行的(不会从上而下执行),定时器返回结果为线程号，默认从1开始往后排序 


# 停止定时器 
## 停止周期性定时器 
```
clearInterval(线程号)
```

## 停止一次性定时器 
```
clearTimeout(线程号)
```


# 注意 
通常定时器定义在全局，在停止定时器后，建议变量赋值为空值null,以释放性能

JS-定时器

# 说明 
表示对当前对象的一个引用 
JavaScript中this不是固定不变的，它会随着执行环境的改变而改变 



# ES5中this指向 
es5this指向函数运行时所在的对象（谁调用我我指谁，会随着调用者不同而改变） 

# ES6中this指向 
es6箭头函数中this指向函数定义时所在的对象(我在哪出生我指谁，永远不会改变)

JS-this关键字

# 事件触发周期
## DOM事件流
事件捕获(外--里)-->目标触发-->事件冒泡(里--外) 

一定是包含关系(子父级)才会产生 



## 说明
- 事件捕获： 
 * 事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

- 事件目标：
 * 当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

- 事件冒泡：
 * 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发，当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 





## 阻止冒泡 
```
event.stopPropagation()
```


# 事件委托 
也称为事件代理，利用事件冒泡，可以只使用一个事件处理程序来管理一种类型的事件 

## Eg 
如对box2,box3,box4绑定事件，则只需要 对其父级元素box1绑定事件然后利用事件冒泡管理事件 
![code](https://cdn.jsdelivr.net/gh/RK-LS/blogphoto@master/common-resource/code.5842p0h5et80.png)