关于箭头函数中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不变。
在这里插入图片描述

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值