es6:箭头函数

最新推荐文章于 2022-11-20 09:26:54 发布

程序猿二鍋頭

最新推荐文章于 2022-11-20 09:26:54 发布

阅读量83

点赞数

分类专栏：大前端文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45441466/article/details/112425439

版权

大前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

箭头函数基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  //箭头函数：也是一种定义函数的方式
  //1.定义函数的方式:function
  const aaa = function () {

  }

  //2.对象字面量中定义函数
  const obj = {
    bbb(){

    }
  }
  //3.ES6中箭头函数
  // const ccc = (参数列表) => {
  //
  // }
  const ccc = () => {

  }
</script>
</body>
</html>

箭头函数参数和返回值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  //1.参数问题：
  //1.1放入两个参数
  const sum = (num1,num2) => {
    return num1+num2;
  }
  //1.2放入一个参数
  const power = num => {
    return num * num;
  }

  //2.函数中
  //2.1函数代码块中有多行代码时
  const test = () => {
    //1.打印Hello World
    console.log("Hello World")

    //2.打印Hello Vuejs
    console.log('Hello Vuejs')
  }

  //2.2函数代码块中有一行代码时
  const mul = (num1,num2) => console.log(num1* num2)

  const demo = num => console.log(num);
  console.log(demo());

</script>
</body>
</html>

箭头函数中的this的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  //什么时候使用箭头
  // setTimeout(function(){
  // console.log(this);//window
  // },1000)

  // setTimeout(()=>{
  //  console.log(this);//window
  // },1000)

  //结论：箭头函数中的this引用的就是最近作用域中的this
  //问题：箭头函数中的this是如何查找的了？
  //答案：向外层作用域中，一层层查找this，知道有this的定义
  const obj = {
    aaa(){
      setTimeout(function () {
        console.log(this); //window
      })

      setTimeout(()=>{
        console.log(this); //obj对象
      })
    }
  }
</script>
</body>
</html>

程序猿二鍋頭

关注

0
点赞
踩
0

收藏

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

箭头函数基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> //箭头函数：也是一种定义函数的方式 //1.定义函数的方式:function const aaa = function () { }
复制链接

扫一扫

专栏目录