Arrow functions in ES6 Javascript

Ordinary function: function fn(){}
Arrow function: let fn = ()=>{}

<script>
        //普通函数的写法
        function getName1(){
            console.log('小马');
        };
        //调用函数  看控制台输出的结果是不是“小马”
        getName1();


        //箭头函数的写法
        let getName2 = ()=>{
            console.log('小红');
        };
        //调用函数
        getName2();
</script>

Output result:

Experience: Don't look at the simplicity, if you don't do it yourself, you will forget it.

---

this in the arrow function:

       //1.this是静态的。 this始终指向函数声明时所在作用域下的this的值
        //普通函数的写法
        function getName1(){
            console.log(this.name);
        };
        //箭头函数的写法
        let getName2 = ()=>{
            console.log(this.name);
        };

        //设置window对象的name属性    
        window.name = '小马';      //也可以写成let name = '小马';
        const otherName = {
            name:'小红',
        };

        //调用函数
        getName1();
        getName2();

 Output result:

There is nothing wrong with being a "pony", why?

Because the scope of the ordinary function (that is, getName1) is window, and the scope of this of the arrow function is also window, the value output by the two functions on the console is "Little Horse".

---

Okok, next, let's take a look at the difference between ordinary functions and arrow functions  if we use the call method to change the direction of this :

//1.this是静态的。 this始终指向函数声明时所在作用域下的this的值
        //普通函数的写法
        function getName1(){
            console.log(this.name);
        };
        //箭头函数的写法
        let getName2 = ()=>{
            console.log(this.name);
        };

        //设置window对象的name属性    
        window.name = '小马';      //也可以写成let name = '小马';
        const otherName = {
            name:'小红',
        };

        //调用函数
        getName1();   //输出结果是：小马
        getName2();   //输出结果是：小马

        //call方法调用
        getName1.call(otherName);  //输出结果是：小红
        getName2.call(otherName);  //输出结果是：小马

The output result of the ordinary function is "Xiaohong", there is no problem, because the call method is used to change the direction of this to point to otherName.

Does anyone have doubts? ? ? Doesn't the arrow function also use the call method to change the direction of this?         

Yes, the call method is used to try to change it, but one feature of the arrow function is that the this of the arrow function is static, and this always points to the value of this under the scope where the function is declared. (Remember this sentence for me)

(: So, even if you use call to try to change its pointing, but because its this is static, its this always points to the value of this under the scope where the function is declared. So this still points to window, so the output Again: "Pony")

---

Shorthand for arrow functions (with 2 cases):

        //箭头函数的简写（有两种情况）

            //1.省略小括号，当形参有且只有一个的时候
            let add= n => {   //这里的n省略了小括号!!!
                return n + n;
            };

            console.log(add(3)); //输出的结果是：6


            //2.省略花括号，当代码体只有一条语句的时候 
            //注意：花括号去掉的时候，return也应该省略
            let pow = (n) =>  n * n;   
            console.log(pow(3));  //输出的结果是：9