手写Bind+箭头函数this指向理解

最新推荐文章于 2023-06-29 13:54:22 发布

Huijie Xu

最新推荐文章于 2023-06-29 13:54:22 发布

阅读量476

点赞数

分类专栏：前端开发基础概念面试文章标签： javascript 前端

本文链接：https://blog.csdn.net/Xu_cipu/article/details/122168188

版权

本来只是遇见了一个面试题准备手写一下，但最后发现通过手写bind最主要的是深刻理解了箭头函数this指向问题。为什么这么说？上代码直接看

// 正确手写Bind结果
Function.prototype.mybind = function (...args) {
	return () => {
		this.apply(args[0], args.slice(1))
	}
}

乍一眼看上去，感觉没啥，但其实我一开始写的是这样的：

Function.prototype.mybind = (...args) => {
	return () => {
		this.apply(args[0], args.slice(1))
	}
}

细心的你应该发现，这里只把外层的function改成了箭头函数
然鹅，勤劳的你在浏览器跑一下就会发现，这样会报错：

TypeError: this.apply is not a function

？？我一开始一脸懵逼，？怎么获取不到this了？this不是就是调用这个mybind函数的函数吗？

然后聪明（菜鸡）的我console了一下这里的this，决定一探究竟：

Function.prototype.mybind = (...args) => {
	console.log(this)
	return () => {
		this.apply(args[0], args.slice(1))
	}
}

聪明的你猜打印出来是啥？

是全局window

关注