箭头函数中的this

289 阅读1分钟

箭头函数就是() => XXX 这样的形式,这样的写法是因为只有一行,所以省去了中括号和return以及语句后面的分号,使用箭头函数是因为其比正常的函数简洁并且不绑定this。所以箭头函数的this是什么呢?
首先是直接写一个setTimeout的代码

image.png 输出的直接就是

image.png 那么换成对象中

image.png
也就是把这两个放在对象的方法中,有箭头函数的输出的是对象,普通函数的则是window。
为什么呢?
箭头函数的this引用的是最近作用域中的this。
setTimeout(function{},500)这个的this是通过call绑定的,第一个传入的是window。
setTimeout(() => {},500)这个就是向外查找一层作用域,是aaa的作用域,aaa是在一个对象中定义的,那么这个函数调用的话,this就是当前对象了。 再来看一下这个 image.png
这个按照我们的逻辑就是,第一个是在普通函数中的,那么是window毋庸置疑
第二个呢是箭头函数中,那么箭头函数往外找到function(){}的作用域,这个call绑定的是window,所以还是window。
第三个呢毋庸置疑是window。
第四个呢箭头函数往外找还是箭头函数,再往外就是aaa的作用域,那么对象内函数的调用,就是这个对象。