ES6箭头函数

简介: ES6箭头函数
箭头函数:定义函数的一种方式

一,定义函数的方式

1.function:

      const aaa = function (){
      }

2.对象字面量中定义函数:

     const obj = {
       bbb() {}
     }

3.ES6中的箭头函数:

      // const ccc=(参数列表)=>{
      //
      // }
      const ccc=()=>{

      }

二,箭头函数

1.参数问题

1.1放入两个参数

      const sum = (num1,num2) =>{
        return num1+num2
      }

1.2放入一个参数

参数外的括号可省略
      const power = num =>{
        return num*num
      }

2.代码行数

2.1函数中有多行代码

      const test =()=>{
        console.log('hello');
        console.log('hello');
      }

2.2函数中只有一行代码,可简写

      const mul =(num1,num2)=>num1*num2

结果:

      console.log(mul(20,30))  //600

3.箭头函数this的使用

      setTimeout(function (){
        console.log(this); //window
      },1000)
      setTimeout(()=>{
        console.log(this);  //window
      },1000)
==箭头函数中的this引用的就是最近作用域中的this
箭头函数中this是如何查找的:向外层作用域中一层层的查找this,直到有this的定义==
      const obj2={
        aaa(){
          setTimeout(function (){
            console.log(this); //window
          },1000)
          setTimeout(()=>{
            console.log(this);  //object对象
          },1000)
        }
      }
      obj2.aaa()
 
  const obj3={
    aaa(){
      setTimeout(function (){
        setTimeout(function (){
          console.log(this);  //window
        })
        setTimeout(()=>{
          console.log(this);  //window
        })
      })

      setTimeout(()=>{
        setTimeout(function (){
          console.log(this);  //window
        })
        setTimeout(()=>{
          console.log(this);  //obj对象
        })
      })
    }
  }
  obj3.aaa()

相关文章
|
7月前
ES6之箭头函数
ES6之箭头函数
|
1月前
|
JavaScript
哪些场景适合使用 ES6 的箭头函数?
总之,当需要简洁地定义函数、处理回调函数、避免 `this` 指向问题以及进行函数式编程等场景时,ES6的箭头函数都是一个很好的选择。但需要注意的是,箭头函数也有一些限制,如不能作为构造函数使用等,在使用时需要根据具体情况进行选择。
|
1月前
|
安全 JavaScript 前端开发
es6 箭头函数
【10月更文挑战第26天】ES6箭头函数为JavaScript开发者提供了一种更简洁、更直观的函数定义方式,同时其独特的`this`绑定和无`arguments`对象等特性也使得在一些特定场景下的代码编写更加方便和安全,但在使用时也需要注意其与普通函数的区别,以确保正确地使用和理解箭头函数。
114 62
|
1月前
|
自然语言处理
ES6 中箭头函数和普通函数区别
【10月更文挑战第19天】这些仅是对箭头函数和普通函数区别的一些主要方面进行的详细阐述,实际应用中可能还会有更多具体的细节和情况需要进一步探讨和理解。可以根据自己的需求进一步深入研究和实践,以更好地掌握它们在不同场景下的应用。
36 2
ES6学习(4)箭头函数
ES6学习(4)箭头函数
|
7月前
|
小程序
es6学习笔记(四)箭头函数
es6学习笔记(四)箭头函数
|
7月前
Es6箭头函数
Es6箭头函数
75 0
|
前端开发
ES6系列笔记-箭头函数
ES6系列笔记-箭头函数
33 1
|
前端开发 JavaScript
01.ES6箭头表达式
01.ES6箭头表达式
79 0