IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      什么是箭头函数?箭头函数中this关键字的用法

      • 发布时间:
        2023-03-15
      • 版权所有:
        云和教育
      • 分享:

      箭头函数是ES6中新增的函数,它用于简化函数的定义语法,有自己的特殊语法,接收一定数量的参数,并在其封闭的作用域的上下文(即定义它们的函数或其他代码)中操作。

      ES6中,箭头函数的基本语法

      箭头函数基本语法,具体如下:

         0=>{}

      箭头函数以小括号开头,在小括号中可以放置参数。小括号的后面要跟着箭头(=>),箭头后面要写一个大括号来表示函数体,这是箭头函数的固定语法。

      箭头函数调用:因为箭头函数没有名字,我们通常的做法是把箭头函数赋值给一个变量,变量名就是函数名,然后通过变量名去调用函数即可。

         <script>
          const fn = () => {
           console.log(123);      
      ∥输出结果:123
         };
         fn();∥函数调用
         </script>

      箭头函数的特点

      特点1:省略大括号

      在箭头函数中,如果函数体中只有一句代码,且代码的执行结果就是函数的返回值,此时可以省略函数体大括号。计算两个数值相加的结果,示例代码如下:

       

      <script>
       const sum = (numl, num2) => num1 + num2;
       //等价于
       // const sum = (num1, num2)=>{
       // return num1 + num2;
       //};
       const result = sum(10, 20); //使用result接收sum() 函数执行的结果
       console.log(result); //在控制台输出result值, 结果为30 
      </script>

      特点2:省略参数外部的小括号

      在箭头函数中,如果参数只有一个,可以省略参数外部的小括号。只有一个参数的函数定义方式,示例代码如下:

         <script>
          //传统的函数定义方式
          //function fn(v){
          // return 
          v;
          //}
          //ES6中函数定义方式
          const fn = v => v;
         </script>

      特点2:省略参数外部的小括号

      定义带有一个参数的函数,并在浏览器的弹出框中弹出参数值。示例代码如下:

         <script>
          const fn = v =>{
           alert(v);
          };
          fn(20);
         </script>

      箭头函数中的this关键字

      ES6前,JavaScript的this关键字指向的对象是在运行时基于函数的执行环境绑定的,在全局函数中,this指向的是window;当函数被作为某个对象的方法调用时,this就指向那个对象。

      ES6中,箭头函数不绑定this关键字,它没有自己的this关键字,如果在箭头函数中使用this关键字,那么this关键字指向的是箭头函数定义位置的上下文this。也就是说,箭头函数被定义在哪,箭头函数中的this就指向谁。

      箭头函数解决了this执行环境所造成的一些问题,如解决了匿名函数this指向的问题(匿名函数的执行环境具有全局性),包括setTimeout()和setInterval(0中使用this所造成的问题。

         <script>
          const obj = { name: 'zhangsan' };
          function 
           fn(){
           console.log(this);               //输出结果:{name:"zhangsan"}
          return () =>{
           console.log(this);               //输出结果:{name:"zhangsan"}
           };
          }
          // call()方法可以改变函数内部的this指向,将函数fn(0内部的this指向obj对象
          const resFn = 
          fn.call(obj);
          resFn();
         </script>