箭头函数简单使用

最新推荐文章于 2024-05-30 20:54:32 发布

ToShy

最新推荐文章于 2024-05-30 20:54:32 发布

阅读量274

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/ToShy/article/details/109067545

版权

js 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了JavaScript中的箭头函数语法，包括参数列表、简洁写法及单行函数的使用。同时，重点讲解了箭头函数中this的指向规则，通过示例展示了箭头函数如何在不同上下文中保持this的引用。了解这些知识点有助于提升JavaScript编程效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

箭头函数语法： (参数列表) => { 函数代码块 }

箭头函数简单使用

普通函数：

    const fun = function (num1,num2) {
      return num1 + num2
    }

箭头函数：

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

当参数只有一个时可省略括号

    const power = num => {
      return num * num
    }

当函数代码块中只有一行代码时，可以省略大括号和return

    const power = num => num * num

箭头函数关于this的使用

箭头函数中的this是向外层作用域中, 一层层查找this, 直到有this的定义.

例1：

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

例2：

const obj = {
    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
        })
      })
    }
  }

  obj.aaa()