this 关键字

先说结论 this的值是指向调用者 `谁调用它它就指向谁`

全局定义函数
- 全局函数在默认调用的时候函数内的this会指向js最顶层的对象window

对象内部的函数

因为函数在对象内所有在调用函数的时候需要访问对象的key
这里直接上代码

    function myFn() {
        console.log(this) //每个函数内都有一个this（不包括箭头函数）
        }
    let Obj = {
        a: myFn
        }
    Obj.a() //此时打印 Obj 因为当前是通过对象内调用的对象 所以this会指向Obj

定时器内部的函数
- 默认指向window 因为setInterval()和setTimerOut() 实际上是window.setInterval() 和window.setTimeOut() 个人理解就是相当于是计时器里面的函数实际上是被window调用
- 上代码演示
```
    window.setInterval(function () {
            console.log(this) // window
        },1000)
```

事件处理函数

就是js事件绑定函数内的this 比如点击事件click 这里的this一般都会指向事件源

<head>
    <style>
        div{
            height:100px;
            width:100px;
            background-color:pink;
        }
        p{
            height:30px;
            width:30px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是this</p>
    </div>
    <script>
        var D = document.querySelector('div')
        D.onclick = function (e) {
            e = e || window.event                // 事件对象兼容写法
            console.log(this.innerText)          //我是this 点击子元素p
            console.log(e.target.innerText)      //结果一致
            }
    </script>
</body>

call() 方法可以改变this()的指向

具体语法为函数.call(新的指向，参数1，参数二，...) 上代码

    function myFn() {
        console.log(this)
    }
    let obj = {
        a:1
    }
    myFn() //默认调用的话 这里的this会指向window
    myFn.call(abj)// 此时this的值为指向Obj对象的地址 也就是Obj

apply()方法也可以修改this()的指向但是在实参的传递上与call()有所不同

语法函数.apply(新指向， [需传递的参数（数组形势）])

    function myFn(a,b) {
        console.log(this,a + b)
    }
    let obj = {
        a:1
    }
    myFn() //默认调用的话 这里的this会指向window
    myFn.apply(abj,[100, 200])// 此时this的指向Obj对象 同时输出 a + b == 300

bind()方法同样可以修改this指向，语法与call()方法不能说很相似只能说一模一样但是call()方法会直接调用函数而bind()方法不会直接调用函数而是返回一个修改this指向的新函数

语法函数.bind(新指向，，参数1，参数二，...)

    function myFn(a,b) {
        console.log(this,a + b)
    }
    let obj = {
        a:1
    }
    myFn() //默认调用的话 这里的this会指向window
    let Bin = myFn.bind(abj,[100, 200])// 此时this的指向Obj对象 输出 a + b == 300 不会直接调用
    Bin() //需要调用新函数
    myFn.bind(obj) (100,200)//或者直接写的时候调用

ES5 与 ES6

ES6 其实就是 JS 发展过程中的某一个版本而已那个版本的版本号叫做 ES6

微信在最初的时候, 是不具有微信支付随着版本的更新, 在某一个版本内推出了微信支付

JS 在最初的时候, 是只有 var 关键可以声明变量随着版本的更新, 在某一个版本内推出了新的变量声明方式

JS 的更新在推出ES6 的时候, 这个版本推出的新东西比较多所以后续程序员们为了方便记忆, 把 ES6 以后的版本统称为 ES6+

let关键字

在ES5也就是ES6之前我们声明变量都只能使用 var关键字
- let的语法与var的语法一样
```
    var i = 1;
    let a = 1;
    console.log(i, a)//1，1
```
const关键字声明的是常量声明时必须赋值
var 关键字声明的变量具有变量提升同时其声明的变量一般都是全局变量

哪他们有什么区别吗？答案是有区别

1、 var声明的变量可以变量提升而let当然还有const都不具有变量提升
2、var声明的变量不会受限于{}（不包括函数）而 let声明的变量会受限于任何形式的{}即let声明的是块变量
3、 const声明的是常量一旦赋值无法修改
4、var是ES6之前就存在的而let 和const是Es6新增的关键字

箭头函数

箭头函数就是对 ES5 普通函数的写法上的一个优化
箭头函数普通写法: (书写形参) => {书写函数调用时执行的代码}

箭头函数的优化

1. 箭头函数如果只有一个形参的时候, 可以不写前边的小括号(除此之外, 必写)
1. 如果箭头函数的函数体, 只有一行代码, 那么可以省略大括号(并且会默认将这行代码 return)

let myFn = (a,b) => a+b  //当函数体只有一行代码时 花括号可以不写 且默认返回该行代码
    let s = myFn (100, 200)
    console.log(s)

    let myFn1 = a => a     //当函数形参只有一个时 小括号可以不写
    console.log(myFn1(1000))


    let myCard = (a, v) => {  //完整箭头函数
        return a + v
    }
    console.log(myCard(1000,2000))

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

箭头函数内部没有this 也没有argument对象

 // 箭头函数内部没有 this 也没有 arguments 对象

    function Fn () {
        console.log(arguments)
    }
    Fn(100, 200) //arguments 就传递的实参集合
    // let Fn1 = () => console.log(arguments)
    // Fn1(100,200)


    let Fn2 = () => console.log(this) //window 函数内没有this 所以会向寻找
    Fn2(100)
    var d = document.querySelector('div')
    d.onclick = function () {
        d.onclick = () => {
        console.log(this)
            }
        }
    ```

解构赋值

解构对象

ES6 解构赋值, 解构对象时, 赋值号左边必须写大括号, 代表对象的解构赋值

    var obj = {
            a: 11,
            b: 21,
            c: 31
        }
    let { a, b, c } = obj //解构对象
    console.log(a, b, c)

解构数组
- ES6 解构赋值, 解构数组时, 赋值号左边必须写中括号, 代表数组的解构赋值
```
    var arr = [1, 2]
    let [num1, num2, num3] = arr //解构赋值 解构数组
```

展开运算符

展开(扩展)运算符
- 语法: ...数组(对象)
- 作用: 展开数组或者对象相当于把数组两侧包裹的中括号去掉
- 注意不能直接展开对象 JS 不支持这样的写法

Map 和 Set

SET

es6 新推出的两种数据结构
- 1. set 类似于数组的一种数据结构
    - 语法：let s = new Set([数据1, 数据2, 数据3])
```
    let s = new Set([3, 4, 5, 5, 5, 4, 4, 3])
```
    - 特点：特点: 天生不支持重复数据
    - set的一些方法
      - size (类似数组的 length); 作用: 获取到当前数据结构中数据的数量
      - add 方法; 作用: 向当前数据结构中新增数据
```
    s.add(100)
    s.add(5)
    console.log('add 后的数据结构', s)
```
      - has() 作用: 查询当前数据结构中是否拥有该数据; 找到的时候, 返回 true, 否则返回false
      - delete(数据) 作用: 将当前数据结构中的这个数据删掉
      - clear() 作用: 清空当前数据结构
      - forEach 作用: 遍历数据结构, 拿到数据结构的每一项
```
        s.forEach(function (item, key, origin) {
            // set 数据结构是没有 key 所以 item 和 key 打印出来的值都一样
                console.log(item, key, origin)
            })
```

MAP

ES6 推出的一种数据结构
- 类似于对象的一种数据结构 * 但是 map 的 key 可以是任意类型的值
  - 特点：和 set 一样, 也不支持重复数据
  - 语法: var m = new Map([key, value])
```
var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
```
  - map 的一些方法
    - 1. size 作用: 返回当前数据结构的数据长度(多少个)
    - 1. set() 作用: 向当前数据结构中, 新增数据
    - 1. get(key) 作用: 获取到指定key 对应的 value
    - 1. has(key) 作用: 查询数据结构中是否存在当前 key; 存在返回一个 true ,否则返回一个 false
    - 1. delete 作用: 删除当前数据结构对应的 key
    - 1. clear 作用: 清空当前数据结构
    - 1. forEach
```
    m.forEach(function (item, key, origin) {
        /**
         *  item: 对应的 value
         *  key: 对应的 key
         *  origin: 对应的原始数据结构
         */
        console.log(item, key, origin)
        })
```

对象语法的简写

1. key 和 value 拼写一样
1. 并且 value 写的是一个变量
  - 满足这两个条件的情况, 可以少写其中一个

let name = 'QF666'//变量 且名字对象的key一样
    const obj = {
        name,    //省略 value 好像可以省略 key
        age: 18,
        fn1: function () {
            console.log(1)
        },
        fn2() {
            console.log('222222')
        }
    }

睡前知识点 this关键字 ES6新增 let const 以及.....