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

  • Post author:
  • Post category:其他


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])

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



版权声明:本文为a15800585396原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。