js中箭头函数的this作用域

Posted on | Post modified:
最近有需要方法中嵌套一个请求，需要用到父层中的作用域，因此使用箭头函数

js中箭头函数的this作用域

最近有碰到需要在一个方法中，判断完参数后，在执行的时候，再次确认才开始向后台发起请求，因此发起请求的方法中，需要拿到父级代码中的变量，这里不能使用构造函数function () {}，而是应该使用箭头函数来替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
startBoot (unit, exec_classification) {
        try {
          xxx
                        ...
          this.$confirm('是否确定执行?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            this.loadingTable = true
            let result = await request.post('/apis/deploy_task/startBoot', data)
            this.getDeployDetail(false)
            this.$message.success('操作成功！')
          }).catch((error) => {
            console.log(error)
          }).finally(() => {
            this.loadingTable = false
          })
        } catch (e) {
          console.info(e)
        }

这里就顺便找了下资料，了解下箭头函数的作用域以及变量(arguments)

箭头函数没有this，他的this是父级作用域中的this，使用了父级的变量，从而形成一个闭包

1
2
3
4
5
6
7
8
function foo() {
  this.a = 1
  let b = () => console.log(this.a)

  b()
}

foo()  // 1
1
2
3
4
5
6
7
8
9
10
function foo() {
  this.a = 1

  let self = this
  let b = () => console.log(self.a)

  b()
}

foo()  // 1
  • 上面两个代码块等价