JS ES6匿名函数和箭头函数

最新推荐文章于 2024-08-14 10:33:43 发布

偷只猫来养

最新推荐文章于 2024-08-14 10:33:43 发布

阅读量5.6k

点赞数 6

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42602282/article/details/106917287

版权

本文详细介绍了JavaScript ES6中的匿名函数和箭头函数，包括它们的定义、使用方式、特点和区别。重点讲解了箭头函数的语法糖，如简化函数体和this的指向规则。此外，还探讨了箭头函数在不同场景下的应用，例如在对象方法、构造函数和维持上下文this时的使用注意事项。

摘要由CSDN通过智能技术生成

JS ES6匿名函数和箭头函数

1、匿名函数

匿名函数即没有名字的函数，在使用时：可以当做变量的值、当做参数值、可以自调用；ES6中的匿名函数同ES5，但是在ES6中，匿名函数包含了箭头函数。

例：

        //将匿名函数当做变量的值：
        let show = function(a,b){
   
            console.log(a,b);//10,20
        }
        show(10,20);
        function show4(){
   
            let m = function(){
   
                console.log('key');//key
            }
            m();
        }
        show4();
        let stu = {
   
            id:1,
            name:'zhang',
            shown:function(){
   
                console.log(this.name);
            }
        }
        stu.shown();//zhang
        
        //将匿名函数当做参数值：
        function show5(k){
   
            //回调函数
            k();
        }
        show5(function(){
   
            //调用了匿名函数
            console.log('a');//a
        });

        //匿名函数自调用：
        (function(){
   
            console.log('b'); //b
        })();
        (function(a,b){
   
            console.log(a + b);//300
        })(100,200);

2、箭头函数

（1）箭头函数的写法：去掉函数名，去掉function，在() 与{}之间加=>:
()=>{}
(name)=>{}
(name,age)=>{}
箭头函数的使用方法大多与匿名函数相同——可以当做变量的值、当做参数值、可以自调用，关于箭头函数的几种写法如下：

        //箭头函数当做变量值：
        let show1 = () => {
   
            console.log('show1');//show1
        };
        show1();
        let show2 = (name) => {
   
            console.log(name);//zhang
        }