前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >箭头函数和this指向

箭头函数和this指向

作者头像
名字是乱打的
发布2021-12-23 17:30:31
1.2K0
发布2021-12-23 17:30:31
举报
文章被收录于专栏:软件工程软件工程
箭头函数基本使用
代码语言:javascript
复制
// 箭头函数: 也是一种定义函数的方式
  // 1.定义函数的方式: function
  const aaa = function () {

  }

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

    }
  }

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

  }
带返回值的箭头函数
代码语言:javascript
复制
// 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) => {
  //   return num1 + num2
  // }
  const mul = (num1, num2) => num1 * num2
  console.log(mul(20, 30));

  // const demo = () => {
  //   console.log('Hello Demo');
  // }
  const demo = () => console.log('Hello Demo')
  console.log(demo());
什么时候使用箭头

一般我我们准备把一个函数作为参数放在另外一个函数里的时候使用. 比如

代码语言:javascript
复制
setTimeout(function () {
    console.log(this);//打印的this是window
  }, 1000)
代码语言:javascript
复制
 setTimeout(function () {
    console.log(this);//打印的this是window
  }, 1000)
 
  setTimeout(() => {
    console.log(this);//打印的this是window
  }, 1000)

//setTimeout(function () 
//{这种结构其实默认第一个参数是window,所以函数体内向外找到的第一个作用域是window
  const obj = {
    aaa() {
      setTimeout(function () {
        console.log(this); // 打印的this是window
      })
 
      setTimeout(() => {
        console.log(this); //打印的this是 obj对象
      })
    }
  }
 
  obj.aaa()

箭头函数中的this是如何查找的? 答案: 向外逐层查找最近作用域的this.

代码语言:javascript
复制
  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()
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020/11/16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 箭头函数基本使用
  • 带返回值的箭头函数
  • 什么时候使用箭头
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档