ES6箭头函数this指向、解构赋值、扩展对象、SYMBOL

1.箭头函数的指向

箭头函数没有this的指向的

在es5中 this指向可能会引起以下的问题：

        let pagg={
            id:123,
            init:function(){
                document.addEventListener('click',function(event){
                    this.dos(event.type)
                })
            },
            dos:function(type){
                console.log(`事件类型：${type},id:${this.id}`);
            }
        }
        pagg.init();

其中的this指向是文档，指向document 所以找不到；

我们可以用箭头函数没有作用域链（this）来解决这个问题：

 

  let pagg={
            id:123,
            init:function(){
                document.addEventListener('click',(event)=>{
                    this.dos(event.type)
                })
            },
            dos:function(type){
                console.log(`事件类型：${type},id:${this.id}`);
            }
        }
        console.log(pagg.init());

此时原来内部的function 因为没有this了所以向外找，找寻到 init  谁调用this指向谁  pagg调用init所以pagg 就是this的指向

let pagg={
            id:123,
            init: ()=>{
                document.addEventListener('click',(event)=>{
                    this.dos(event.type)
                },false)
            },
            dos:function(type){
                console.log(`事件类型：${type},id:${this.id}`);
            }
        }
        console.log(pagg.init());

但如果将外面那一个function也变成箭头函数就有问题了；因为外面那个失去this，找到pagg 谁调用pagg  ，window所以this指向的是window  ；外面那一个只能是function

*注意事项

1.箭头函数没有arguments

2.箭头函数不能实例化对象；只能用function！！

2.解构赋值

解构赋值针对的是赋值的一种拓展，针对数组和对象在书写上更加简洁；

es5中如何将对象的值赋给变量

    <script>
        let peo={
            name:'qq',
            age :15
        }
        let name=peo.name
        let age=peo.age
        console.log(name+" "+age)
    </script>

而es6中可以这么赋值

        let peo={
            name:'qq',
            age :15
        }
       let{name,age}=peo;
        console.log(name+" "+age)

同时可以用剩余函数将其赋值在一个对象数组内

    let obb={
        a:{
            name:'kk'
        },
        b:[],
        c:'hello'
    }
    let{a,...add}=obb;
    console.log(add);

 

数组的解构：

let arr=[1,2,3]
    let[a,b,c]=arr
    console.log(a,b,c)

3.扩展对象

es5中对对象声明是这样的

    const name='wb';
        const age=20;
        let obj={
            name:name,
            age:age,
            fun:function(){
                console.log(name)
            }
        }
        obj.fun();

需要对其中的name：name进行赋值

es6中提供了一个更加简洁的写法

      const name='wb';
        const age=20;
        let obj={
           name,
            age,
            fun(){
                console.log(name)
            }
        }
        obj.fun();

不用再name:name  直接写即可

其余：

a：

        const a={
            [name+'sb']:123,
            ['sb'+name](){
                console.log(this)
            }
        }
        console.log(a);

 

b： is（）

比较两个数是否严格相等；例子NAN===NAN ---->FALSE

IS(NAN,NAN)--->TRUE

C:assing（）拷贝对象

        let newObj=Object.assign({},{a:1},{c:2,d:4});
        console.log(newObj)

将后面的对象拷贝到第一个对象中

 

4.symbol

数据类型：表名是一个独一无二的值

  var a=Symbol('name');
        var b=Symbol('name');
console.log(a===b)

别看后面都是name 但两个是不一样的

 

最大的用处是用来定义私用变量

  let s1=Symbol('s1')
        let obj={
           [s1]:'hahha' 
        }
        
        console.log(obj[s1])

 其中必须用[]来声明属性