关于箭头函数中this指向问题(一步到位,不用背)
一句话概括:箭头函数中没有this,若想打印它的话只能沿着作用域链去找。 例:
<script> var name = "周冬雨"; let obj={ name:"东东", say:()=>{ //箭头函数中无this,只能延作用域链去找 //因为没有函数,所有作用域就是window //而window.name=周冬雨 console.log(this.name); }, } obj1={ name:冬雨 } obj.say(); //不管怎么调用,箭头函数中都无this,需从作用域中去找, //就是window作用域下,因为再无其他函数包裹箭头函数,所以永远都是window.name。 obj.say.call(obj1);
例:
var name ="冬雨"; const obj = { name:周冬雨, a: function() { console.log(this) window.setTimeout(() => { //箭头函数中无this,沿作用域链去找,最近的是function函数 //而function中this是obj。因为是obj调用的a。 console.log(this) }, 0) } } obj.a()
var name ="冬雨"; const obj = { name:"周冬雨", a: function() { console.log(this) window.setTimeout(() => { //箭头函数中无this,沿作用域链去找,最近的是function函数。 console.log(this) //而function是obj1。因为是obj1调用的a。 }, 0) } } obj1={ name:"夏洛" } obj.a.call(obj1)
var name ="周冬雨q"; const obj = { name:"冬雨", b: { name:"东东", c: ()=>{ console.log(this.name)} } } //还是去寻找作用域,这里没有函数包括它, //则找到最外层的name,为window.name。 obj.b.c()
var name ="周冬雨q"; const obj = { name:"冬雨", b: { name:"东东", c: ()=>{ console.log(this.name)} //注:箭头函数中无this,沿着作用域链去找,最近的作用域就是window //打印的结果则是windo.name //这种情况无论this怎么调用c方法,都是打印的winwow.name } } obj1={ name:夏洛 } obj.b.c.call(obj1);
function foo() { setTimeout(() => { //注:箭头函数中无this,沿作用域链去找 //最近的就是foo函数中this, console.log(id:, this.id); }, 100); } var id = 21; //此刻foo中的this指向{id:42}这个对象 //箭头函数中this即为它,最终打印出this.id为42。 foo.call({ id: 42 });
function Timer() { this.s1 = 0; this.s2 = 0; // 箭头函数 setInterval(() => this.s1++, 1000); // 普通函数 setInterval(function () { this.s2++; }, 1000); } var timer = new Timer(); setTimeout(() => console.log(s1: , timer.s1), 3100); setTimeout(() => console.log(s2: , timer.s2), 3100);
3秒之后打印结果如下:箭头函数中this是timer中this,而普通函数中this是window,所以timer中s2不变。