Es6 箭头函数

最新推荐文章于 2024-05-17 14:32:46 发布

IT行星

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量223

点赞数

文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/m0_72694993/article/details/126820911

版权

一、普通函数

1.首先我们说一下普通函数function的使用方式

1.1当我们要定义函数的时候，有两种方法定义函数（function 函数名（）{}）(var 函数名=function （）{})。例如以下代码进行定义fn1、fn2

            
      var a=10;
      function fn1(){
        console.log(a);
      } ;
      var fn2=function(){
        console.log(a);
      } ;

1.2两种定义方式的不同

第一种方式具有函数提升，第二种没有函数提升，我们可以把下边的两段代码放入script标签中，运行会发现第一个输出的是undefined，第二个会报错；所以第二种方式不会有函数提升

           
      fn1();
    
      var a=10;
      function fn1(){
        console.log(a);
      } ;

           
      fn2();
    
      var a=10;
      var fn2=function(){
        console.log(a);
      } ;

1.3普通函数中的this指向1

我们script标签中输入这样一段代码，我们控制台输出的this是window，那么我们在对象里设置一个函数的时候this又会指向谁

    <script>
            
    
    
      var a=10;
      function fn1(){
        console.log(a);
        console.log(this);
      } ;
      var fn2=function(){
        console.log(a);
        console.log(this);
      } ;
       fn2();
       fn1();


    </script>

1.4普通函数中的this指向2

我们在一个对象中定义一个函数，利用这个函数输出this，如下代码段，我们执行以后输出的是obj这个对象，说明此时this指向了这个对象，所以在普通函数中我们的this会指向函数外的第一个父类。

var obj={
   fn(abc){
    console.log(this);
}
}
obj.fn(123);

1.5定时器的this指向，我们在定时器中定义的函数输出this，当我们点击按钮的时候触发这个定时器，控制台输出的是window

<body>
 <button id="add">点击触发</button>

    <script>
         var add=document.getElementById("add");
         add.onclick=function(){
            setInterval(function(){
      console.log(this);
    },1000);
    setTimeout(function(){
    console.log(this);
    },1000);
         }   ;
  

    </script>

</body>

1.6我们把定时器的方法放入对象中调用又会发生什么，我们这次通过调用对象下的方法来调用定时器时，this的输出是什么，仍然是windows

<body>
 <button id="add">点击触发</button>

    <script>
         var add=document.getElementById("add");
         add.onclick=function(){
            obj.fun();
         }   ;
  var obj={
    fun(){
    setInterval(function(){
      console.log(this);
    },1000);
    setTimeout(function(){
    console.log(this);
    },1000);
         }   
  }

    </script>

</body>

二、箭头函数

1.箭头函数的用法

箭头函数的基本使用,空号中是填入参数，如果只有一个参数可以不写括号，

()=>{};

2.箭头函数的命名定义和使用；

     var fn2 = () => {
            console.log(11);
        }
        fn2();

3.箭头函数不具备函数提升，必须先定义才能调用；

4.箭头函数中的this(**重点)：箭头函数中的this只会找上以及的父元素，只遵循这一点，如果上一级仍然为箭头函数，那么继续向上找。所以重要的是，如果我们在一个对象中定义一个箭头函数利用定时器进行输出this，那么zhegethis的值为这个对象，即如下代码的输出就是obj；

（我们在fun函数内用了两个定时器，一个用的function函数，一个用的箭头函数，箭头函数的this输出的是obj对象，另一个输出的window）

<body>
 <button id="add">点击触发</button>

    <script>
         var add=document.getElementById("add");
         add.onclick=function(){
            obj.fun();
         }   ;
  var obj={
    a:12,
    fun(){
    setInterval(int=>{console.log(this);},1000);
    setTimeout(function(){
    console.log(this);
    },1000);
         }   
  }

    </script>

</body>

5.我们把上述代码fun也改为箭头函数，两个定时器的输出都是window，但是两个this寻找的方式不同，一个是箭头函数的上一级仍然是箭头函数，再想上找为window，而另外一个定时器中的函数中的function中的定时器this直接指向window

 <button id="add">点击触发</button>

    <script>
         var add=document.getElementById("add");
         add.onclick=function(){
            obj.fun();
         }   ;
  var obj={
    a:12,
    fun:()=>{
    setInterval(int=>{console.log(this);},1000);
    setTimeout(function(){
    console.log(this);
    },1000);
         }   
  }

    </script>

</body>

6.箭头函数不能new 不能作为构造函数

7.箭头函数中没有argument（有rest）；

IT行星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Es6 箭头函数

5.我们把上述代码fun也改为箭头函数，两个定时器的输出都是window，但是两个this寻找的方式不同，一个是箭头函数的上一级仍然是箭头函数，再想上找为window，而另外一个定时器中的函数中的function中的定时器this直接指向window。我们在一个对象中定义一个函数，利用这个函数输出this，如下代码段，我们执行以后输出的是obj这个对象，说明此时this指向了这个对象，所以在普通函数中我们的this会指向函数外的第一个父类。3.箭头函数不具备函数提升，必须先定义才能调用；
复制链接

扫一扫

Es6 箭头函数

“相关推荐”对你有帮助么？