[玩转 typescript 系列]搞懂箭头函数的this

原创已于 2022-06-08 10:15:09 修改 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #js

于 2022-04-14 20:42:17 首次发布

本文详细总结了箭头函数中this的使用场景，通过实例演示，帮助读者理解其this指向规则，涉及严格模式、对象方法、异步回调、类方法和构造函数等，同时提到了词法作用域的概念。

应该是最全的箭头函数使用this场景汇总

以下例子如果全部能搞懂，那就算毕业了

大伙可以放到浏览器的控制台里面去试一下，然后一个个去理解就好了，实在难理解先背下来也不是不行

const fn = () => {
	console.log(this)
}
fn()

"use strict"
const fn = () => {
	console.log(this)
}
fn()

const obj = {
	fn: () => {
		console.log(this)
	}
}
obj.fn()
const fn = obj.fn
fn()

const obj = {
	fn1: null,
	fn2: function() {
		this.fn1 = () => {console.log(this)}
	},
}
obj.fn2()
obj.fn1()
const fn = obj.fn1
fn()

const fn = () => {
	console.log(this)
}
const obj = {}
fn.call(obj)
const fn1 = fn.bind(obj)
fn1()

const obj = {
	fn: function() {
		// 执行了某个异步函数，比如发了一个http请求
		someAsyncFunction("hello", () => {
			console.log(this)
		})
	}
}
obj.fn()

const arrowFnCb = () => {
  console.log(this);
};

obj = {
  fn: function () {
    someAsyncFunction("hello", arrowFnCb);
  },
};
obj.fn()

class Obj {
	fn = () => {
		console.log(this)
	}
}
new Obj().fn()

class Obj {
	constructor() {
		this.fn()
	}
	fn = () => {
		console.log(this)
	}
}
new Obj()

class Obj {
	constructor() {
		this.fn1(this.fn)
	}
	fn = () => {
		console.log(this)
	}
	fn1(fn) {
		fn()
	}
}
new Obj()

class Foo {}
class Obj {
	constructor() {
		this.fn1(this.fn)
		return new Foo()
	}
	fn = () => {
		console.log(this)
	}
	fn1(fn) {
		fn()
	}
}
const obj = new Obj()
obj.fn()

小结

一言以蔽之，箭头函数的this指向继承于定义时，父作用域的this。

所以如果不想死记硬背的话，最好能理解一下js里面词法作用域 (lexical scope) 的概念，后面有时间的话我也会出一篇相关文档去解释词法作用域。

以上例子大部分参考于此