js中箭头函数的this作用域

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
  • 上面两个代码块等价