0
点赞
收藏
分享

微信扫一扫

搞懂箭头函数的this

君心浅语 2022-04-14 阅读 58
前端js

应该是最全的箭头函数使用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) 的概念,后面有时间的话我也会出一篇相关文档去解释词法作用域。

以上例子大部分参考于此

举报

相关推荐

0 条评论