彻底弄懂this指向问题

箭头函数的this指向问题

箭头函数的this指向问题new创建的实例对象普通函数的调用【1】：普通函数的调用 分为三种 箭头函数【2】箭头函数：跟函数定义的位置有关系 箭头函数内的没有this的指向，都是翻出箭头函数查找上层的this的！ 定时器和延时器中

箭头函数的this指向问题

【0】new创建的实例对象 — this指向的是new创建的实例对象【1】普通函数：跟函数定义没有关系，主要看函数调用方法 1】主动调用 函数名() 函数中的特=this指向window （就是在全局作用域下调用）2】事件驱动调用 ele.事件类型 = 函数名； 函数中的this指向 ele3】当对象中 写 函数的时候， 调用函数 对象.函数名() 函数中的this指向 对象 【2】箭头函数：跟函数定义的位置有关系 哪怕箭头函数写在对象中，但是函数的this 还是指向这个对象所处环境this的指向 obj.fn() this不会指向obj 【3】定时器和延时器 1】：他们使用普通函数的方式设置的时候，都是指向window2】：他们使用箭头函数的方式设置的时候，都是查找上才文的this

new创建的实例对象

this指向的是new创建的实例对象 let Star = function (name, age) { this.name = name, this.age = age console.log(this); } let ldh = new Star("刘德华", 34) //结果：this指向的是 Star这个实力对象 Star {name: "刘德华", age: 34}

普通函数的调用

【1】：普通函数的调用 分为三种

// 1】主动调用 在全局作用域下调用函数，指向的是window let fu = function () { console.log(this); } fu() //window // 2】事件驱动调用 ele.事件类型 = 函数名； 函数中的this指向 ele let btn = document.querySelector(".btn") let fu1 = function () { console.log(this); } btn.onclick = fu1; //指向的是调用者 btn这个对象！ <button class="btn">按钮</button> // 3】当对象中 写 函数的时候， 调用函数 对象.函数名() 函数中的this指向 对象 let obj = { name: "pink", age: 18, fu2: function () { console.log(this); } } obj.fu2() //分析：调用fu2()的时候，执行obj对象中的方法，于是打印了 this，而这个this指向的是前面的调用者，也就是obj //指向的是对象的调用者 obj {name: "pink", age: 18, fu2: ƒ}

箭头函数

【2】箭头函数：跟函数定义的位置有关系 箭头函数内的没有this的指向，都是翻出箭头函数查找上层的this的！

// 1】：直接定义在全局作用域下 let fn = () => { console.log(this); } fn(); //分析：箭头函数内没有this的指向，只能查找上下文的this，也就是查询到window区域，因此指向window //结果：this指向的是window // 2】：定义在函数表达式内 let fn1 = function () { let f1 = () => { console.log(this); } f1() } fn1(); //分析：箭头函数定义在函数内，箭头函数没有thi指向，只能查找上下文，查找到f这个函数，而这个f函数在全局作用域下被调用，全局作用域下为window //结果：window // 3】：函数表达式内定义一个对象的方法上 let obj2 = { name: "pink", age: 12, f2: () => { console.log(this); } } obj2.f2() //分析： obj2.f2()，执行obj2中的f2函数，由于f2没有this执行，查找上下文，然后obj也是没有this，最后翻出到window查找到this //结果：最后打印输出：window

定时器和延时器中

1】：他们使用普通函数的方式设置的时候，都是指向window2】：他们使用箭头函数的方式设置的时候，都是查找上才文的this //1】：在全局作用域下的定时器 let n = 0; let timer = setInterval(function () { n++ // console.log(this); if (n == 2) { clearInterval(timer) } }, 1000) //分析：定时器函数，是直接调用了setInterval函数，也就是说，前面省略了window //结果：window //2】：在函数表达式中的的定时器 let f3 = function () { var n = 0; let timer = setInterval(function () { n++; // console.log(this); if (n === 2) { clearInterval(timer) } }, 1000) } f3() //分析：定时器函数，是直接调用了setInterval函数，也就是说，前面省略了window //结果：window //3】：定时器中的箭头函数，定义在全局作用域下 let n1 = 0; let timer1 = setInterval(() => { n1++ // console.log(this); if (n1 == 2) { clearInterval(timer1) } }, 1000) //分析：定时器函数，是直接调用了setInterval函数，也就是说，前面省略了window //结果：window //4】：在函数表达式中的的定时器 let f4 = function () { var n = 0; let timer = setInterval(() => { n++; console.log(this); if (n === 2) { clearInterval(timer) } }, 1000) } f4() //分析：定时器函数，是直接调用了setInterval函数，也就是说，前面省略了window //结果：window // 5】：定时器写在对象方法里面 定时器里面的函数为普通函数的时候 let n0 = 0; let obj3 = { name: "pink", age: 12, f2: function () { let timer0 = setInterval(function () { n0++ // console.log(this); if (n0 == 2) { clearInterval(timer0) } }) } } obj3.f2() //分析： obj2.f2()，执行obj2中的f2函数，由于定时器是主动调用的，于是指向window //结果：最后打印输出：window // 6】：定时器写在对象方法里面 定时器里面的函数为箭头函数的时候 let obj4 = { name: "pink", age: 12, f2: function () { let timer0 = setInterval(() => { n0++ console.log(this); if (n0 == 2) { clearInterval(timer0) } }) } } obj4.f2() //分析： obj4.f2()，执行obj2中的f2函数，由于f2的定时器是监听函数，没有this指向，查找上下文后， // 然后在上一层中的f2函数的this，它被调用了，指向的是调用者obj4 //结果：最后打印输出：obj4 {name: "pink", age: 12, f2: ƒ}