[JavaScript知识库] Es6 箭头函数

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Es6 箭头函数 -> 正文阅读

[JavaScript知识库]Es6 箭头函数

一、普通函数

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）；