ES6箭头函数中的this绑定问题

浅浅的花香味﹌ 2022-06-14 07:19 207阅读 0赞

关于this指向问题的讨论一直是学习js不可忽视的重要部分，那些一个又一个围绕this挖的笔试坑，仿佛永远也填不完

var obj={
    	fn:function(){
    		console.log(this);
    	}
    }
    obj.fn();//object

以上这段代码是再浅显不过的this指向问题，也就是谁调用的函数，函数体中的this就指向谁

再看下面这段

var obj={
    	fn:function(){
    		setTimeout(function(){
    			console.log(this);
    		});
    	}
    }
    obj.fn();//window

这次this指向了最外层的window对象，为什么呢，还是那个道理，这次this出现在全局函数setTImeout()中的匿名函数里，并没有某个对象进行显示调用，所以this指向window对象

假如我们在这里使用箭头函数呢

var obj={
    	fn:function(){
    		setTimeout(() => {
    			console.log(this);
    		});
    	}
    }
    obj.fn();//object

this又指向函数的宿主对象了

为了更加清楚的对比一般函数和箭头函数this指向的区别，我们给对象添加变量

如上代码，在没有使用箭头函数的情况下，this指向了window（匿名函数，没有调用的宿主对象），而window对象并没有num属性（num属性在obj中定义），而在使用箭头函数的情况下，this的指向却对象obj1，自然可以输出obj1中定义的属性num。

接下来看更复杂的情况

**多层嵌套的箭头函数**

假如我们改动两层箭头函数的其中一处，看会出现什么结果

好，接下来改变另一处

**总结：**

1.箭头函数的this绑定看的是this所在的函数定义在哪个对象下，绑定到哪个对象则this就指向哪个对象

2.如果有对象嵌套的情况，则this绑定到最近的一层对象上

还没有评论，来说两句吧...