一分钟带你了解箭头函数

 es6允许使用箭头函数(=>)定义函数

    声明一个函数
    let fn=function(){

    }

    let fn=(a,b)=>{
        return a+b;
    }
    //调用函数
    let result=fn(1,2);
    console.log(result);

    1.this是静态的,this始终指向函数声明时所在的作用域下的this的值
    function getName(){
        console.log(this.name);
    }

    let getName2=()=>{
        console.log(this.name);
    }
    设置window对象的name属性
    window.name="尚硅谷";
    const school={
        name:"AtGUIGU"
    }
    getName();
    getName2();

    call方法调用
    getName.call(school);
    getName2.call(school);//箭头函数的this指向依然不变

    let Person=(name,age)=>{
        this.name=name;
        this.age=age;
    }
      2.不能作为构造实例对象
    let me=new Person('xiao',30)
    console.log(me);

    3.不能使用arguments变量
    let fn=()=>{
        console.log(arguments);
    }
    fn(1,2,3);

    4.箭头函数的简写
    （1)省略小括号,当形参只有一个的时候
    let add=n=>{
        return n+n;
    }
    console.log(add(9));
     （2)省略大括号,当代码体只有一条语句的时候,此时return必须省略,函数的返回值为语句的执行结果
     let pow=n=> n*n;
     console.log(pow(9));

下面我们用一个简单的实例来看看箭头函数在实际中的用法

代码：

css部分：

js部分：