JavaScript之箭头函数

灰太狼 2021-05-03 05:50 517阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>箭头函数</title>
        <script type="text/javascript">
          //箭头函数就是对匿名函数的一种改写，或者说简化，是一种新的语法风格（ES6）
          var f=function(){ 
              console.log("HelloWorld");
          }
          //箭头函数
          var f1=()=>console.log("HelloWorld");
          //如果代码比较多，那就是代码块的写法
          var f2=(a,b)=>{ 
              console.log("带有参数的箭头函数");
          }
          //箭头函数和普通函数的区别？
          //箭头函数没有自己的this和arguments
    
        var f3=function(){ 
            //获取实际参数需要使用arguments 类数组对象
            console.log(arguments);
        }
         
        f3(1,2,3,4);
        //箭头函数没有自己的arguments
        /*var f4=()=>{ //获取实际参数需要使用arguments 类数组对象 console.log(arguments); } f4(1,2,3,4); */
        var f5=function(){ 
            return ()=>{ 
                console.log(arguments);
            }
        }
        var f6=f5("a","b","c");
        f6();
    
        //如何在箭头函数中获取参数列表呢？
        //通过剩余参数变量 rest
        var f7=(a,...val)=>{ 
            console.log(val);
        }
        f7("abc","efg","lmn");
    
        //箭头函数没有绑定自己的this
        var f8=function(){ 
            alert(this==window);//Object window ==window
        }
        function f9(){ 
            alert(this);//Object window
        }
        f8();
        f9();
        //window 顶层作用域对象 任何在顶层作用域中定义的全局变量和全局函数，都是window属性
    
        var name="蓝桥";
        window.f8();
        window.f9();
        alert(window.name);
        //this在普通函数中绑定的是调用者对象
        var p={ name:"张三",
        age:25,
        say:function(){ 
              alert("我的名字"+this.name);
            },
            say2:()=>{ 
               alert("我的名字2是"+this.name);
            }
        };
        p.say();//this==p
        p.say2();//this==window
        //箭头函数没有自己的this 不能绑定调用者,箭头函数中this依然是外层代码，或者是父级代码的上下文（对象）
    
        </script>
    </head>
    <body>
        
    </body>
    </html>