es6箭头函数

es6箭头函数

es6箭头函数

一:一般箭头函数

 //普通无参数匿名函数
    let func1 = function(){
        console.log(this);
        console.log('普通无参数匿名函数')
    }
    func1()

    // 箭头函数
    let func2 = ()=>{
        console.log('箭头函数')
    }
    func2()

二:箭头省略函数

//一个参数的时候，括号可以省略（我个人习惯，不省略）
    let func3=(a)=>console.log(a);
    func3(1)

    // 两个或者两个参数以上,括号不能省略
    let func4=(a,b)=>a+b;
    console.log(func4(1,2))

    // 以前写法,需要return
    let func5=(a,b)=>{
        return a+b;
    }
    console.log(func5(1,2))

三:箭头函数中的this关键字

　　这个特性不太实用,还是具体的点出是哪个参数更好些

　　只要用到箭头函数,this就是指箭头函数上一层的对象,

比如例子中就可以直接调用两个箭头函数最外层的name

• 有箭头函数时,this是指声明的地方的对象;
• 没有箭头函数时,this是调用时的对象

 

    let name='marry';
    let obj={
        name:'jack',
        age:11,
        getName:function(){
            // console.log('xxx:',this)
            // document.getElementById('btn').onclick=function(){
            //     console.log('按钮：'+this);
            //     console.log(`按钮1:${this}`)
            // }

            return this.name;
        },
        getName2:()=>{
            document.getElementById('btn').onclick=()=>{
                console.log(name);
            }
            console.log(name)
            // console.log('yyy:'+this);
        }
    }
    //
    console.log(obj.getName());
    console.log(obj.getName2());